Jquery datepicker format date not working

Question

Here is my code:

$(function () {
    $("#datepicker").datepicker({ dateFormat: 'DD-MM-YY' });
});

And the datetime picker is shown, but in format mm/dd/yyyy. Why is it not working?

have u seen this: http://stackoverflow.com/questions/1328025/jquery-ui-datepicker-change-date-format/1328040? — Jignesh Rajput, Mar 27 '12 at 10:56

score 31 · Answer 1 · answered Mar 28 '19 at 12:49

31

Try just format option not dateFormat

$('#datepicker').datepicker({
   format: 'dd-mm-yyyy' 
});

answered Mar 28 '19 at 12:49

Mayur Kambariya

319
1
3
2

you saved me also. Cheers! – Asad ullah Dec 29 '19 at 23:46
This is working. Try just format option not dateFormat. Because due to different version of datepicker. – shiv Sep 25 '20 at 06:24
Thanks, dateFormat: 'dd-mm-yy' is not working in my code. Format is working – Mukhila Asokan Dec 04 '20 at 11:24
Thanks. Everywhere, it is shown as "dateformat" in examples. – AntiqTech Mar 15 '23 at 23:44

score 15 · Answer 2 · answered Feb 10 '17 at 17:13

15

Depending on the version of datepicker being used, the correct format may be:

$('#datepicker').datepicker({ format: 'yyyy-mm-dd' });

answered Feb 10 '17 at 17:13

shuadoc

436
4
5

score 14 · Accepted Answer · answered Mar 27 '12 at 10:54

14

try out this

$(".datepicker").datepicker({dateFormat: 'dd-mm-yy'});

small letter will works

answered Mar 27 '12 at 10:54

Kashiftufail

10,815
11
45
79

score 12 · Answer 4 · answered Mar 27 '12 at 10:50

12

Thats the default, meaning it does not recognise your option.

try:

dateFormat: 'dd-mm-yy'

(small letters)

answered Mar 27 '12 at 10:50

Steen

2,749
2
20
36

3

It's confusing but "yy" actually gives you the 4-digit year. – Luke Jan 07 '14 at 22:16
5

Depends which datepicker, and which distribution of it. Different ones use different meanings for upper and lower case y, and d. Everyone wants to re-invent everything for their "special" version, instead of sticking with the strftime standard. And is it "format" or dateFormat? Just keep piddling and fiddling until you "discover" what the particular author thought was the "cooler way" to do it. – JosephK Mar 19 '16 at 16:39
3

@JosephK totally that! The API docs are very clear that the property is "dateFormat", but after reading your comment I tried "format" and it started working. Oh, and for extra fun, I needed to use "yyyy" for a four-digit date. Yeah, consistency FTW :-/ – Jon Sep 07 '16 at 08:13
2

If you find "format" and using "yyyy" instead of "yy" is working for you, you may actually be using the bootstrap version of datepicker. Be sure to check your script src included .js files to see WHOSE datepicker you're using. – geis May 03 '17 at 21:15

score 10 · Answer 5 · edited May 23 '17 at 12:34

10

Setting the default format will solve the problem, this solution works for me while all above do not.

$.datepicker.setDefaults({
     dateFormat: 'yy-mm-dd'
});

Source: Datepicker: Adding dateFormat is giving an error

edited May 23 '17 at 12:34

Community

1
1

answered Dec 31 '13 at 10:15

user2814778

296
6
14

score 3 · Answer 6 · answered Nov 20 '14 at 14:49

Full example:

In jsp:

<div id="datepicker"></div>

In script:

function datepicker() {

  $("#datepicker").datepicker({
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd',
    onSelect: function() {
        var dateObject = $('#datepicker').datepicker().val();
        alert(dateObject);
    }
   }
  );
}

score 3 · Answer 7 · answered Dec 15 '17 at 03:48

3

this one works for me

$('#datepicker').datepicker({ format: 'dd-mm-yyyy' });

answered Dec 15 '17 at 03:48

Rachman Kushinryu

31
2

David Liang · Answer 8 · 2019-09-20T17:36:39.340

If you're getting the default date value from your backend framework/service, i.e., Asp.Net MVC, setting the dateFormat when you initiate the datepicker on your input won't format the date initially.

$(function() {
    $('#date-start').datepicker({
        dateFormat: 'mm/dd/yy',
        onSelect: function(startDate) {
            ...
        }
    });
});

The screenshot above shows, even I am initializing the input with a short date like 03/15/2018, the datepicker won't pick up the format initially. All selections afterward would work as expected.

The fix is you have to set the dateFormat option manually after the datepicker initialization:

$(function() {
    // $('#date-start').datepicker({
    //     dateFormat: 'mm/dd/yy',
    //     onSelect: function(startDate) {
    //         ...
    //     }
    // });
    // $('#date-start').datepicker('option', 'dateFormat', 'mm/dd/yy');

    // Or you can chain them
    $('#date-start').datepicker({
        dateFormat: 'mm/dd/yy',
        onSelect: function(startDate) {
            ...
        }
    }).datepicker('option', 'dateFormat', 'mm/dd/yy');
});

score 3 · Answer 9 · answered Mar 27 '12 at 10:56

3

See this Jsfiddle link that is working example for me:

http://jsfiddle.net/nEGTv/3/

answered Mar 27 '12 at 10:56

Rony SP

2,618
15
16

score 2 · Answer 10 · edited Jan 04 '19 at 17:56

2

Try this:

$(function() {
    $('#datepicker').datepicker({
        dateFormat: 'dd/mm/yy',
    }).datepicker('option', 'dateFormat', 'dd/mm/yy');
});

It works 100%.

edited Jan 04 '19 at 17:56

AS Mackay

2,831
9
19
25

answered Jan 04 '19 at 17:13

its really help when we have date range picker and datepicker-ui both in one screen. – sunakshi verma Sep 30 '22 at 04:12

SHUBHASIS MAHATA · Answer 11 · 2019-04-07T07:20:32.820

2

$('.datepicker').datepicker({
        format: 'dd-mm-yyyy',
        autoclose: true
    })

edited Apr 07 '19 at 07:20

answered Apr 07 '19 at 04:49

SHUBHASIS MAHATA

873
7
12

1

While this code may answer the question, providing some additional context regarding how and why it solves the problem would improve the answer's long-term value. – greg-449 Apr 07 '19 at 07:45

score 1 · Answer 12 · answered Mar 02 '21 at 09:36

I had similar issue: dateFormat was set in defaults, but it did not work.

$.App.Utils.DatePicker = {
  initialize: function(event) {
    $.datepicker.setDefaults({
      dateFormat: 'dd.mm.yy',
      firstDay: 1,
      changeMonth: true,
      changeYear: true,
      showOtherMonths: true,
      selectOtherMonths: true,
      showOn: 'both',
      buttonImage: '/assets/calendar.png',
      buttonImageOnly: true
    })
  },

activate: function(event) {
    this.initialize()
    $('input.datepicker').datepicker()
  }

But date was still displayed in default format, with slashes, like 02/03/2021. Maybe this option can not be overwritten in defaults.

Working solution: remove dateFormat from setDefaults and set it when initializing datepicker:

activate: function(event) {
    this.initialize()
    $('input.datepicker').datepicker({ dateFormat: 'dd.mm.yy' })
}

Docs

score 0 · Answer 13 · answered May 27 '20 at 06:10

C#:-

 [Column(TypeName = "date")]
        [Display(Name = "Date of Birth")]
        [Required]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime? DOB { get; set; }

CSHTL:-

 @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control" , @required = "required", @autocomplete="off"} })

        $(document).ready(function () {
        var validationerror = false;
         $('input[type=date]').datepicker({
             dateFormat: "yy-mm-dd",
             changeMonth: true,
             changeYear: true,
             yearRange: "-60:+0"
         });

Jquery datepicker format date not working

13 Answers13

Linked