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>

Frow

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

Answer 1

Change

dateFormat: 'dd/mm/yyyy'

to

format: 'dd/mm/yyyy'

Looks like you just misread some documentation!

Holladay

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. – Coffman

@Coffman Same for me: dateFormat: 'dd/mm/yy'. – Hydromancy

Form me too dateFormat: 'dd/mm/yy' – Fat

Answer 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'

Ocean

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. – Bamako

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

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. – Elbert

Answer 3

a bit change in format

format : "DD/MM/YYYY"

Christal

Answer 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.

Gloaming

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

Answer 5

for me it is daterangepicker worked by this :

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

Stenograph

I think this is the newest correct answer – Giltedged

It's worked. This is the latest solution. – Toenail

Answer 6

For Me i got same issue i resolved like this changed format:'dd/mm/yy' to dateFormat: 'dd/mm/yy'

Oshiro

Answer 7

You can use this code for bootstrap datepicker:

HTML Code:

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

Javascript:

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

Borroff

Answer 8

format : "DD/MM/YYYY" should resolve your issue. If you need more help regarding available formats, please visit http://momentjs.com/ which is used by this control internally.

I was facing an issue where this "format" thing was working fine on local machine but when I deployed the application on server, the date was not getting populated and the control was empty. when I commented the format code, it started working but then I didn't have the format that I needed. I fixed that issue using globalization entries in web.config.

<system.web>
    <globalization
    requestEncoding="utf-8"
    responseEncoding="utf-8"
    culture="en-GB"
    uiCulture="en-GB" />    
</system.web>

This helped in ensuring that both local & server environments have same culture.

Gadoid

Answer 9

"As with bootstrap’s own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript..."

Boostrap DatePicker Documentation

Maybe you want to set format without DatePicker instance, for that, you have to add the property data-date-format="DateFormat" to main Div tag, for example:

<div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>

    <input type="text" name="YourName" id="YourId" class="YourClass">
</div>

Prepotency

This one worked for me while none of the above did. Thanks @Prepotency – Carillonneur

Answer 10

This line of code works for me

$("#datepicker").datepicker("option", "dateFormat", "dd/mm/yy");

you can change the id #datepicker with the class .input-group.date of course

Dino

Answer 11

I have some problems with jquery mobile 1.4.5. For example it seems accepting format change only passing from "option". And there are some refresh problem with the calendar using "option". For all that have the same problems I can suggest this code:

$( "#mydatepicker" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
$( "#mydatepicker" ).datepicker( "setDate", new Date());    
$('.ui-datepicker-calendar').hide();

Resistant

Answer 12

Try this

 format: 'DD/MM/YYYY hh:mm A'

As we all know JS is case-sensitive. So this will display

10/05/2016 12:00 AM

In your case is

format: 'DD/MM/YYYY'

Display : 10/05/2016

My bootstrap datetimepicker is based on eonasdan bootstrap-datetimepicker

Ari

Answer 13

As with bootstrap’s own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript.. Use this for Bootstrap:

<label>Date of Birth</label>
<input name="userdob" data-provide="datepicker" placeholder="dd-mm-yyyy" date-autoclose="true" class="form-control courtdata" data-date-format="dd-mm-yyyy" required>

Gamone

Answer 14

In my case this worked.

$('.datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: new Date() // disabling past dates
});

Apron