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: stackoverflow.com/questions/1328025/…?

Jignesh Rajput
– Jignesh Rajput

2012-03-27 10:56:54 +00:00
Commented Mar 27, 2012 at 10:56 — Jignesh Rajput
– Jignesh Rajput, Commented Mar 27, 2012 at 10:56

Mayur Kambariya · Accepted Answer · 2019-03-28 12:49:20Z

34

Try just format option not dateFormat

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

answered Mar 28, 2019 at 12:49

Mayur Kambariya

3491 gold badge3 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Asad ullah Over a year ago

you saved me also. Cheers!

Shiv Babbar Over a year ago

This is working. Try just format option not dateFormat. Because due to different version of datepicker.

Mukhila Asokan Over a year ago

Thanks, dateFormat: 'dd-mm-yy' is not working in my code. Format is working

AntiqTech Over a year ago

Thanks. Everywhere, it is shown as "dateformat" in examples.

shuadoc · Accepted Answer · 2017-02-10 17:13:17Z

15

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

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

answered Feb 10, 2017 at 17:13

shuadoc

4564 silver badges5 bronze badges

Comments

Muhammad Kashif Ali · Accepted Answer · 2012-03-27 10:54:05Z

14

try out this

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

small letter will works

answered Mar 27, 2012 at 10:54

Muhammad Kashif Ali

10.9k11 gold badges50 silver badges81 bronze badges

Comments

Steen · Accepted Answer · 2012-03-27 10:50:28Z

12

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

try:

dateFormat: 'dd-mm-yy'

(small letters)

answered Mar 27, 2012 at 10:50

Steen

2,8972 gold badges24 silver badges38 bronze badges

4 Comments

Luke Over a year ago

It's confusing but "yy" actually gives you the 4-digit year.

JosephK Over a year ago

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.

Jon Over a year ago

@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 :-/

geis Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:34:31Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Dec 31, 2013 at 10:15

user2814778

3166 silver badges15 bronze badges

Comments

Rony SP · Accepted Answer · 2012-03-27 10:56:50Z

3

See this Jsfiddle link that is working example for me:

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

answered Mar 27, 2012 at 10:56

Rony SP

2,62817 silver badges16 bronze badges

Comments

Sallyerik · Accepted Answer · 2014-11-20 14:49:09Z

3

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);
    }
   }
  );
}

answered Nov 20, 2014 at 14:49

Sallyerik

5192 gold badges12 silver badges27 bronze badges

Comments

Rachman Kushinryu · Accepted Answer · 2017-12-15 03:48:36Z

3

this one works for me

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

answered Dec 15, 2017 at 3:48

Rachman Kushinryu

312 bronze badges

Comments

David Liang · Accepted Answer · 2019-09-20 17:36:39Z

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');
});

AS Mackay · Accepted Answer · 2019-01-04 17:56:12Z

2

Try this:

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

It works 100%.

edited Jan 4, 2019 at 17:56

AS Mackay

2,8559 gold badges21 silver badges27 bronze badges

answered Jan 4, 2019 at 17:13

user10822968

1 Comment

sunakshi verma Over a year ago

its really help when we have date range picker and datepicker-ui both in one screen.

SHUBHASIS MAHATA · Accepted Answer · 2019-04-07 07:20:32Z

2

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

edited Apr 7, 2019 at 7:20

answered Apr 7, 2019 at 4:49

SHUBHASIS MAHATA

9487 silver badges12 bronze badges

1 Comment

greg-449 Over a year ago

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.

tacia_2019 · Accepted Answer · 2021-03-02 09:36:14Z

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

Yogesh Sharma · Accepted Answer · 2020-05-27 06:10:37Z

0

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"
         });

answered May 27, 2020 at 6:10

Yogesh Sharma

2273 silver badges2 bronze badges

Collectives™ on Stack Overflow

Jquery datepicker format date not working

13 Answers 13

4 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

4 Comments

Comments

Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related