jQuery date formatting

Question

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.

Microsoft JScript runtime error: '$.format' is null or not an object — DotnetSparrow, Mar 09 '11 at 18:15
have you included the plugin that includes the format functions? — zzzzBov, Mar 09 '11 at 18:17
Sneaky one liner for yyyy-mm-dd: `new Date().toJSON().substring(0,10)` — Mike Causer, Jul 05 '13 at 01:47
Mike Causer, brilliant. If you want time as well then you can do this: `new Date().toJSON().substring(0,19).replace('T',' ');` — H2ONOCK, May 21 '15 at 17:44
WARNING! the slick code: `new Date().toJSON().substring(0,10)` worked nice, but it returns date as GMT! Since we are 7 hours behind GMT, I was getting the wrong date after 5:00pm. I just wasted a couple hours finding the cause /sigh/. [Reference](http://stackoverflow.com/questions/13646446/javascript-date-tojson-produces-a-date-which-has-wrong-hours-and-minutes) — JayRO-GreyBeard, Aug 01 '15 at 03:40
Mike Causer you rock. `new Date().toISOString().substring(0,10)` — m.kocikowski, Aug 29 '15 at 00:44
@JayRO-GreyBeard, one liner with timezoneOffset: `new Date().toLocaleDateString();`. Converts the date portion of a Date object into a readable string — user3439968, Sep 15 '16 at 22:12

score 221 · Answer 1 · answered Jun 29 '12 at 11:51

221

add jquery ui plugin in your page.

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

answered Jun 29 '12 at 11:51

Thulasiram

8,432
8
46
54

2

This is the answer I was looking for, especially since I am using jQuery UI elsewhere. – nzifnab Jan 10 '13 at 00:32
Is there any way to get date + 2 years ? – Serjas Mar 09 '13 at 07:22
1

var currentDate = new Date(); currentDate.setFullYear(currentDate.getFullYear() + 2); – Thulasiram Mar 11 '13 at 15:33
it is a pitty that it doesnt support time formatting =S – Thomas Jul 01 '14 at 07:48
4

Here's the link to the official doc : http://api.jqueryui.com/datepicker/#utility-formatDate – Guillaume Husta Jan 15 '15 at 15:30
what a strange library. 'dd M yy' is understood as 'dd MMM yyyy'. This library has it's own understanding of format – Nick Apr 09 '15 at 14:05

score 112 · Accepted Answer · edited Dec 23 '13 at 00:31

112

jQuery dateFormat is a separate plugin. You need to load that explicitly using a <script> tag.

edited Dec 23 '13 at 00:31

Pablo Cantero

6,239
4
33
44

answered Mar 09 '11 at 18:17

Pekka

442,112
142
972
1,088

10

@Dotnet sure, using other functions: See e.g. [here](http://www.webdevelopersnotes.com/tips/html/10_ways_to_format_time_and_date_using_javascript.php3) – Pekka Mar 09 '11 at 18:20
I dont want to use plugin. CAn you please tell me how can I format the date ? – DotnetSparrow Mar 09 '11 at 18:22
@Dotnet see the link in my comment – Pekka Mar 09 '11 at 18:22
33

@Dotnet if it could be done using jQuery, there would not be a jQuery plug-in for date formatting, would there? – Pekka Mar 09 '11 at 18:32
1

I can't tell if this should be a joke or not... it's almost brilliant @pekka. Also, it's the right answer. – jcolebrand Mar 09 '11 at 18:34
1

jQuery dateFormat doesn't works with jQuery Validate. Neither the pure JavaScript version. – Kunal B. Apr 15 '15 at 23:34
4

It is hard to believe that vanilla jQuery doesn't have a function to format a date. This question is 5 years old, is this still the case? – felwithe Jul 22 '16 at 00:14
1

@felwithe a cursory Google search suggests that indeed is the case! Perhaps they felt it's functionality they want to keep out of the core library for bandwidth and performance reasons. – Pekka Jul 22 '16 at 00:19

score 108 · Answer 3 · edited May 23 '17 at 12:10

108

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?

edited May 23 '17 at 12:10

Community

1
1

answered Apr 25 '13 at 10:03

Pascal

1,984
1
21
25

it will be handy to add seconds as @sein did – wpcoder Oct 16 '17 at 11:32
This is good until the user wants the recent date or a date is fed into the `Date` object. What about getting the date in the same format but 6 months prior to the fed date ?? – Sanjok Gurung Oct 10 '18 at 13:49

Owen · Answer 4 · 2017-07-31T09:48:32.697

40

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

edited Jul 31 '17 at 09:48

answered Jun 06 '13 at 09:08

Owen

4,229
5
42
50

thanks super cool easy to use I tried working perfectly – Adnan Zaheer Aug 10 '20 at 16:44
superb Solution – Maulik patel Feb 03 '22 at 12:45

score 32 · Answer 5 · answered Jul 10 '14 at 04:56

32

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

answered Jul 10 '14 at 04:56

Jhonatascf

451
4
7

Dominik Ras · Answer 6 · 2015-01-30T09:51:32.140

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>

score 17 · Answer 7 · answered Sep 14 '14 at 16:00

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)

score 10 · Answer 8 · edited Jan 22 '19 at 08:26

10

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.

edited Jan 22 '19 at 08:26

souzan

289
1
2
14

answered Aug 07 '17 at 15:31

4

That 2nd option gives me "radix argument must be between 2 and 36 at Number.toString". It crashes. – DevOpsSauce Nov 21 '19 at 20:15
1

We can't use second option as it will throw error – MayankGaur Mar 22 '21 at 09:21

score 9 · Answer 9 · answered Sep 08 '17 at 08:01

9

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"

answered Sep 08 '17 at 08:01

Jatin C

145
2
4

score 8 · Answer 10 · edited Aug 01 '12 at 18:46

8

Just use this:

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

edited Aug 01 '12 at 18:46

Vitor M. Barbosa

3,286
1
24
36

answered Apr 22 '12 at 22:07

Nipple

105
1
1

1

Note, this gives you a date one month in the past (unless it's accessed in January in which case it gives you '00' for the month) because date.getMonth() is a zero-based index. – jaybrau May 28 '15 at 16:15

score 6 · Answer 11 · answered Jan 30 '15 at 15:06

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)

user3439968 · Answer 12 · 2016-09-16T23:49:19.910

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'
(function( $ ){
   $.fn.getDate = function(format) {

 var gDate  = new Date();
 var mDate  = {
 'S': gDate.getSeconds(),
 'M': gDate.getMinutes(),
 'H': gDate.getHours(),
 'd': gDate.getDate(),
 'm': gDate.getMonth() + 1,
 'y': gDate.getFullYear(),
 }

 // Apply format and add leading zeroes
 return format.replace(/([SMHdmy])/g, function(key){return (mDate[key] < 10 ? '0' : '') + mDate[key];});

 return getDate(str);
   }; 
})( jQuery );


// Usage: example #1. Write to '#date' div
$('#date').html($().getDate("y-m-d H:M:S"));

// Usage: ex2. Simple clock. Write to '#clock' div
function clock(){
 $('#clock').html($().getDate("H:M:S, m/d/y"))
}
clock();
setInterval(clock, 1000); // One second

// Usage: ex3. Simple clock 2. Write to '#clock2' div
function clock2(){

 var format = 'H:M:S'; // Date format
 var updateInterval = 1000; // 1 second
 var clock2Div = $('#clock2'); // Get div
 var currentTime = $().getDate(format); // Get time
 
 clock2Div.html(currentTime); // Write to div
 setTimeout(clock2, updateInterval); // Set timer 1 second
 
}
// Run clock2
clock2();

// Just for fun
// Usage: ex4. Simple clock 3. Write to '#clock3' span

function clock3(){

 var formatHM = 'H:M:'; // Hours, minutes
 var formatS = 'S'; // Seconds
 var updateInterval = 1000; // 1 second
 var clock3SpanHM = $('#clock3HM'); // Get span HM
 var clock3SpanS = $('#clock3S'); // Get span S
 var currentHM = $().getDate(formatHM); // Get time H:M
 var currentS = $().getDate(formatS); // Get seconds
 
 clock3SpanHM.html(currentHM); // Write to div
 clock3SpanS.fadeOut(1000).html(currentS).fadeIn(1); // Write to span
 setTimeout(clock3, updateInterval); // Set timer 1 second
 
}
// Run clock2
clock3();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="date"></div><br>
<div id="clock"></div><br>
<span id="clock3HM"></span><span id="clock3S"></span>

Enjoy!

score 5 · Answer 13 · edited Apr 21 '15 at 07:00

You could make use of this snippet

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p>
  selector: <input type="text" class="datepicker">
</p>
<p>
  output: <input type="text" id="datepicker">
</p>

score 5 · Answer 14 · answered Jan 18 '16 at 11:19

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.

score 4 · Answer 15 · answered Jun 11 '12 at 07:31

4

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.

answered Jun 11 '12 at 07:31

Manuel Bitto

5,073
6
39
47

score 2 · Answer 16 · answered Nov 25 '14 at 05:03

Use dateFormat option when creating date picker.

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

score 2 · Answer 17 · answered Jun 01 '17 at 07:32

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>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$( function() {
    //call the function on page load
 $( "#datepicker" ).datepicker();
    //set the date format here
    $( "#datepicker" ).datepicker("option" , "dateFormat", "dd-mm-yy");
 
    // you also can use 
    // yy-mm-dd
    // d M, y
    // d MM, y
    // DD, d MM, yy
    // &apos;day&apos; d &apos;of&apos; MM &apos;in the year&apos; yy (With text - 'day' d 'of' MM 'in the year' yy)
 } );
 </script>

Pick the Date: <input type="text" id="datepicker">

score 2 · Answer 18 · answered Jun 17 '17 at 17:24

2

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

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

BR

answered Jun 17 '17 at 17:24

Condemateguadua

576
5
9

score 2 · Answer 19 · answered Apr 04 '18 at 06:41

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

score 2 · Answer 20 · answered Mar 23 '21 at 11:37

I have achieved through this, I have resolved this without any plugin or datepicker.

GetDatePattern("MM/dd/yyyy");
 function GetDatePattern(pattern)
    {
    var monthNames=["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];
    
            var todayDate = new Date();
                                              
                            var date = todayDate.getDate().toString();
                            var month = todayDate.getMonth().toString(); 
                            var year = todayDate.getFullYear().toString(); 
                            var formattedMonth = (todayDate.getMonth() < 10) ? "0" + month : month;
                            var formattedDay = (todayDate.getDate() < 10) ? "0" + date : date;
                            var result = "";
    
                            switch (pattern) {
                                case "M/d/yyyy": 
                                    formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
                                    formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
    
                                    result  = formattedMonth + '/' + formattedDay + '/' + year;
                                    break;
    
                                case "M/d/yy": 
                                    formattedMonth = formattedMonth.indexOf("0") == 0 ? formattedMonth.substring(1, 2) : formattedMonth;
                                    formattedDay = formattedDay.indexOf("0") == 0 ? formattedDay.substring(1, 2) : formattedDay;
                                    result  = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
                                    break;
    
                                case "MM/dd/yy":
                                    result  = formattedMonth + '/' + formattedDay + '/' + year.substr(2);
                                    break;
    
                                case "MM/dd/yyyy":
                                   result  = formattedMonth + '/' + formattedDay + '/' + year;
                                    break;
    
                                case "yy/MM/dd":
                                    result  = year.substr(2) + '/' + formattedMonth + '/' + formattedDay;
                                    break;
    
    
                                case "yyyy-MM-dd":
                                    result  = year + '-' + formattedMonth + '-' + formattedDay;
                                    break;
    
                                case "dd-MMM-yy":
                                   result  = formattedDay + '-' + monthNames[todayDate.getMonth()].substr(3) + '-' + year.substr(2);
                                    break;
    
                                case "MMMM d, yyyy":
                                    result  = todayDate.toLocaleDateString("en-us", { day: 'numeric', month: 'long', year: 'numeric' });
                                    break;
    
    
                            }
                            }

score 1 · Answer 21 · answered Apr 11 '14 at 01:32

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.

score 1 · Answer 22 · answered Mar 03 '15 at 11:00

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>

score 0 · Answer 23 · answered Jun 23 '22 at 22:05

0

using Moment JS moment js

$("#YourDateInput").val(moment($("#YourDateInput").val()).format('YYYY-MM-DD'));

answered Jun 23 '22 at 22:05

Aladein

184
2
13

score -1 · Answer 24 · answered Sep 23 '17 at 15:28

-1

u can use this coding

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

answered Sep 23 '17 at 15:28

Endang Taryana

129
2

2

Code-only answers are discouraged because they do not explain how they resolve the issue. Please update your answer to explain how this improves on the many other accepted and upvoted answers this question already has. Also, this question is 6 years old, your efforts would be more appreciated by users who have recent unanswered questions. Please review [How do I write a good answer](https://stackoverflow.com/help/how-to-answer). – FluffyKitten Sep 23 '17 at 15:51
1

Answer didn't mention jQuery UI was required – sean2078 Nov 02 '17 at 12:59

jQuery date formatting

24 Answers24

Linked

Related