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?

Answer 1

Try just format option not dateFormat

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

Answer 2

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

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

Answer 3

try out this

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

small letter will works

Answer 4

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

try:

dateFormat: 'dd-mm-yy'

(small letters)

Answer 5

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

Answer 6

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

Answer 7

this one works for me

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

Answer 8

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

Answer 9

See this Jsfiddle link that is working example for me:

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

Answer 10

Try this:

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

It works 100%.

Answer 11

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

Answer 12

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

Answer 13

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