bootstrap datepicker setDate format dd/mm/yyyy

Question

I have to set the date in my datepicker in dd/mm/yyyy format. Whet I'm trying to do, with Javascript is this:

  var year = 2014;
  var month = 5;
  var day = 10;

  var realDate = new Date(year, month - 1, day); // months are 0-based!

  $('#MainContent_txtDataConsegna').datepicker({ dateFormat: 'dd/mm/yyyy' }); // format to show
  $('#MainContent_txtDataConsegna').datepicker('setDate', realDate);

the problem is that the value inside my datepicker is always in format mm/dd/yyyy. Where is the problem??

Here the definition datepicker and datepicker options:

   <div class="input-group date">
       <asp:TextBox runat="server" ID="txtDataOrdine" class="form-control" onBlur="CalcolaTotaliTestata('txtDataOrdine')"></asp:TextBox>
       <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i>/span>
    </div>

<script type="text/javascript">
   $('.input-group.date').datepicker({
       todayBtn: "linked",
       language: "it",
       autoclose: true,
       todayHighlight: true,
       dateFormat: 'dd/mm/yyyy' 
   });
</script>

Solution 1

Change

dateFormat: 'dd/mm/yyyy'

to

format: 'dd/mm/yyyy'

Looks like you just misread some documentation!

Solution 2

Changing to format: 'dd/mm/yyyy' didn't work for me, and changing that to dateFormat: 'dd/mm/yyyy' added year multiple times, The finest one for me was,

dateFormat: 'dd/mm/yy'

Solution 3

a bit change in format

format : "DD/MM/YYYY"

Solution 4

There is confusing when you are using data picker, for bootstrap datepicker you have to use following code:-

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

and for jquery datepicker following code must be used:-

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

So you must be aware which date picker you are using, that is ultimately solve your issue, Hope this hepls you.

Solution 5

for me it is daterangepicker worked by this :

     $('#host1field').daterangepicker({
                   locale: {
                            format: 'DD/MM/YYYY'
                            }
                 });

View more solutions

Comments

[DnR]

I noticed when we use jquery its dateFormat: 'dd/mm/yy', and for pure javascript use format: 'dd/mm/yyyy'

[IsolatedStorage]

I also had to use the 'dateFormat' option rather than 'format' to get this to work. I think there must be a bug in v1.6.1 because I had this problem where 'dd/mm/yyyy' duplicated the year value when you made a selection from the calendar. Switching it to 'dd/mm/yy' worked but is not the correct format as it displays the four digit year while the format suggests it shoud only be showing two.

[Krystian]

As there is other answer, for some of us works format: 'dd/mm/yyyy' and for other dateFormat: 'dd/mm/yy'. The simplest way to solve this is just to try which name is supported.

[Jani Devang]

This a very common confusion among developers so be alert after using datepickers.

[nim_10]

For en-US culture, m/dd/yy worked and for other culture, dd/mm/yy worked fine.

[Eduardo Lucio]

@Krystian Same for me: dateFormat: 'dd/mm/yy'.

[Daniel Carpio Contreras]

This worked for me in bootstrap-datepicker v1.7.1. It seems to be a bug, let me know if it was solved in later versions, thanks.

[Tanuki]

This one worked for me while none of the above did. Thanks @LuisEduardox

[ihavenokia]

I think this is the newest correct answer