[jquery] jQuery date formatting

How can I format the date using jQuery. I am using below code but getting error:

 $("#txtDate").val($.format.date(new Date(), 'dd M yy'));

Please suggest a solution.

u can use this coding

$('[name="tgllahir"]').val($.datepicker.formatDate('dd-mm-yy', new Date(data.tgllahir)));

This worked for me with slight modification and without any plugin

Input : Wed Apr 11 2018 00:00:00 GMT+0000

$.date = function(orginaldate) { 
    var date = new Date(orginaldate);
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date =  month + "/" + day + "/" + year; 
    return date;
};

$.date('Wed Apr 11 2018 00:00:00 GMT+0000')

Output: 04/11/2018

Take a look here:

https://github.com/mbitto/jquery.i18Now

This jQuery plugin helps you to format and translate date and time according to your preference.

ThulasiRam, I prefer your suggestion. It works well for me in a slightly different syntax/context:

var dt_to = $.datepicker.formatDate('yy-mm-dd', new Date());

If you decide to utilize datepicker from JQuery UI, make sure you use proper references in your document's < head > section:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 

Use dateFormat option when creating date picker.

$("#startDate").datepicker({
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    dateFormat: 'yy/mm/dd'
                });

Simply we can format the date like,

var month = date.getMonth() + 1;
var day = date.getDate();
var date1 = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + date.getFullYear();
$("#txtDate").val($.datepicker.formatDate('dd/mm/yy', new Date(date1)));

Where "date" is a date in any format.

An alternative would be simple js date() function, if you don't want to use jQuery/jQuery plugin:

e.g.:

var formattedDate = new Date("yourUnformattedOriginalDate");
var d = formattedDate.getDate();
var m =  formattedDate.getMonth();
m += 1;  // JavaScript months are 0-11
var y = formattedDate.getFullYear();

$("#txtDate").val(d + "." + m + "." + y);

see: 10 ways to format time and date using JavaScript

If you want to add leading zeros to day/month, this is a perfect example: Javascript add leading zeroes to date

and if you want to add time with leading zeros try this: getMinutes() 0-9 - how to with two numbers?

You can add new user jQuery function 'getDate'

JSFiddle: getDate jQuery

Or you can run code snippet. Just press "Run code snippet" button below this post.

// Create user jQuery function 'getDate'_x000D_
(function( $ ){_x000D_
   $.fn.getDate = function(format) {_x000D_
_x000D_
 var gDate  = new Date();_x000D_
 var mDate  = {_x000D_
 'S': gDate.getSeconds(),_x000D_
 'M': gDate.getMinutes(),_x000D_
 'H': gDate.getHours(),_x000D_
 'd': gDate.getDate(),_x000D_
 'm': gDate.getMonth() + 1,_x000D_
 'y': gDate.getFullYear(),_x000D_
 }_x000D_
_x000D_
 // Apply format and add leading zeroes_x000D_
 return format.replace(/([SMHdmy])/g, function(key){return (mDate[key] < 10 ? '0' : '') + mDate[key];});_x000D_
_x000D_
 return getDate(str);_x000D_
   }; _x000D_
})( jQuery );_x000D_
_x000D_
_x000D_
// Usage: example #1. Write to '#date' div_x000D_
$('#date').html($().getDate("y-m-d H:M:S"));_x000D_
_x000D_
// Usage: ex2. Simple clock. Write to '#clock' div_x000D_
function clock(){_x000D_
 $('#clock').html($().getDate("H:M:S, m/d/y"))_x000D_
}_x000D_
clock();_x000D_
setInterval(clock, 1000); // One second_x000D_
_x000D_
// Usage: ex3. Simple clock 2. Write to '#clock2' div_x000D_
function clock2(){_x000D_
_x000D_
 var format = 'H:M:S'; // Date format_x000D_
 var updateInterval = 1000; // 1 second_x000D_
 var clock2Div = $('#clock2'); // Get div_x000D_
 var currentTime = $().getDate(format); // Get time_x000D_
 _x000D_
 clock2Div.html(currentTime); // Write to div_x000D_
 setTimeout(clock2, updateInterval); // Set timer 1 second_x000D_
 _x000D_
}_x000D_
// Run clock2_x000D_
clock2();_x000D_
_x000D_
// Just for fun_x000D_
// Usage: ex4. Simple clock 3. Write to '#clock3' span_x000D_
_x000D_
function clock3(){_x000D_
_x000D_
 var formatHM = 'H:M:'; // Hours, minutes_x000D_
 var formatS = 'S'; // Seconds_x000D_
 var updateInterval = 1000; // 1 second_x000D_
 var clock3SpanHM = $('#clock3HM'); // Get span HM_x000D_
 var clock3SpanS = $('#clock3S'); // Get span S_x000D_
 var currentHM = $().getDate(formatHM); // Get time H:M_x000D_
 var currentS = $().getDate(formatS); // Get seconds_x000D_
 _x000D_
 clock3SpanHM.html(currentHM); // Write to div_x000D_
 clock3SpanS.fadeOut(1000).html(currentS).fadeIn(1); // Write to span_x000D_
 setTimeout(clock3, updateInterval); // Set timer 1 second_x000D_
 _x000D_
}_x000D_
// Run clock2_x000D_
clock3();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>_x000D_
_x000D_
<div id="date"></div><br>_x000D_
<div id="clock"></div><br>_x000D_
<span id="clock3HM"></span><span id="clock3S"></span>

Enjoy!

Though this question was asked a few years ago, a jQuery plugin isn't required anymore provided the date value in question is a string with format mm/dd/yyyy (like when using a date-picker);

var birthdateVal = $('#birthdate').val();
//birthdateVal: 11/8/2014

var birthdate = new Date(birthdateVal);
//birthdate: Sat Nov 08 2014 00:00:00 GMT-0500 (Eastern Standard Time)

Just use this:

var date_str=('0'+date.getDate()).substr(-2,2)+' '+('0'+date.getMonth()).substr(-2,2)+' '+('0'+date.getFullYear()).substr(-2,2);

Add this function to your <script></script> and call from where ever you want in that <script></script>

<script>

function GetNow(){
    var currentdate = new Date(); 
    var datetime = currentdate.getDate() + "-"
            + (currentdate.getMonth()+1)  + "-" 
            + currentdate.getFullYear() + " "  
            + currentdate.getHours() + ":"  
            + currentdate.getMinutes() + ":" 
            + currentdate.getSeconds();
    return datetime;
}

window.alert(GetNow());

</script>

or you may simply use the Jquery which provides formatting facilities also:-

window.alert(Date.parse(new Date()).toString('yyyy-MM-dd H:i:s'));

I love the second option. It resolves all issues in one go.

I'm not quite sure if I'm allowed to answer a question that was asked like 2 years ago as this is my first answer on stackoverflow but, here's my solution;

If you once retrieved the date from your MySQL database, split it and then use the splitted values.

$(document).ready(function () {
    var datefrommysql = $('.date-from-mysql').attr("date");
    var arraydate = datefrommysql.split('.');
    var yearfirstdigit = arraydate[2][2];
    var yearlastdigit = arraydate[2][3];
    var day = arraydate[0];
    var month = arraydate[1];
    $('.formatted-date').text(day + "/" + month + "/" + yearfirstdigit + yearlastdigit);
});

Here's a fiddle.

You can try http://www.datejs.com/

 $('#idInput').val( Date.parse("Jun 18, 2017 7:00:00 PM").toString('yyyy-MM-dd'));

BR

If you are using jquery ui then you may use it like below, you can specify your own date format

$.datepicker.formatDate( "D dd-M-yy", new Date()) // Output "Fri 08-Sep-2017"

You could make use of this snippet

$('.datepicker').datepicker({_x000D_
  changeMonth: true,_x000D_
  changeYear: true,_x000D_
  yearRange: '1900:+0',_x000D_
  defaultDate: '01 JAN 1900',_x000D_
  buttonImage: "http://www.theplazaclub.com/club/images/calendar/outlook_calendar.gif",_x000D_
  dateFormat: 'dd/mm/yy',_x000D_
  onSelect: function() {_x000D_
    $('#datepicker').val($(this).datepicker({_x000D_
      dateFormat: 'dd/mm/yy'_x000D_
    }).val());_x000D_
  }_x000D_
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">_x000D_
<script src="//code.jquery.com/jquery-1.10.2.js"></script>_x000D_
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>_x000D_
_x000D_
<p>_x000D_
  selector: <input type="text" class="datepicker">_x000D_
</p>_x000D_
<p>_x000D_
  output: <input type="text" id="datepicker">_x000D_
</p>

I'm using Moment JS. Is very helpful and easy to use.

var date = moment(); //Get the current date
date.format("YYYY-MM-DD"); //2014-07-10

Here's a really basic function I just made that doesn't require any external plugins:

$.date = function(dateObject) {
    var d = new Date(dateObject);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    if (day < 10) {
        day = "0" + day;
    }
    if (month < 10) {
        month = "0" + month;
    }
    var date = day + "/" + month + "/" + year;

    return date;
};

Use:

$.date(yourDateObject);

Result:

dd/mm/yyyy

I hope this code will fix your problem.

var d = new Date();

var curr_day = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();

var curr_hour = d.getHours();
var curr_min = d.getMinutes();
var curr_sec = d.getSeconds();

curr_month++ ; // In js, first month is 0, not 1
year_2d = curr_year.toString().substring(2, 4)

$("#txtDate").val(curr_day + " " + curr_month + " " + year_2d)

Here is the full code example I have show on browser, Hope you also helpful thanks.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker" ).datepicker({
                minDate: -100,
                maxDate: "+0D",
                dateFormat: 'yy-dd-mm',
                onSelect: function(datetext){
                    $(this).val(datetext);
                },
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type="text" id="datepicker"></p>
   </body>
</html>

add jquery ui plugin in your page.

 $("#txtDate").val($.datepicker.formatDate('dd M yy', new Date()));

you can use the below code without the plugin.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">_x000D_
<script>_x000D_
$( function() {_x000D_
    //call the function on page load_x000D_
 $( "#datepicker" ).datepicker();_x000D_
    //set the date format here_x000D_
    $( "#datepicker" ).datepicker("option" , "dateFormat", "dd-mm-yy");_x000D_
 _x000D_
    // you also can use _x000D_
    // yy-mm-dd_x000D_
    // d M, y_x000D_
    // d MM, y_x000D_
    // DD, d MM, yy_x000D_
    // &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy (With text - 'day' d 'of' MM 'in the year' yy)_x000D_
 } );_x000D_
 </script>_x000D_
_x000D_
Pick the Date: <input type="text" id="datepicker">