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>

I noticed when we use jquery its `dateFormat: 'dd/mm/yy'`, and for pure javascript use `format: 'dd/mm/yyyy'` — DnR, Mar 06 '18 at 08:56

score 69 · Accepted Answer · answered May 18 '14 at 20:13

69

Change

dateFormat: 'dd/mm/yyyy'

to

format: 'dd/mm/yyyy'

Looks like you just misread some documentation!

answered May 18 '14 at 20:13

ntzm

4,663
2
31
35

6

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. – Krystian Dec 16 '16 at 09:41
@Krystian Same for me: `dateFormat: 'dd/mm/yy'`. – Eduardo Lucio Dec 18 '18 at 16:51

score 16 · Answer 2 · answered Jun 15 '16 at 10:22

16

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'

answered Jun 15 '16 at 10:22

Shree Krishna

8,474
6
40
68

4

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. – IsolatedStorage Jul 19 '16 at 04:11
1

For en-US culture, `m/dd/yy` worked and for other culture, `dd/mm/yy` worked fine. – nim_10 Feb 27 '18 at 10:05
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. – Daniel Carpio Contreras Jan 08 '19 at 16:04

score 15 · Answer 3 · answered Oct 14 '14 at 12:34

15

a bit change in format

format : "DD/MM/YYYY"

answered Oct 14 '14 at 12:34

SoumitB

151
1
3

score 15 · Answer 4 · answered Jun 02 '17 at 06:14

15

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.

answered Jun 02 '17 at 06:14

Jani Devang

1,099
12
20

This a very common confusion among developers so be alert after using datepickers. – Jani Devang Jun 28 '17 at 08:23

score 8 · Answer 5 · answered Mar 21 '17 at 07:38

8

for me it is daterangepicker worked by this :

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

answered Mar 21 '17 at 07:38

Mehrnoosh

879
2
12
27

2

I think this is the newest correct answer – ihavenokia Feb 26 '21 at 12:14
It's worked. This is the latest solution. – iamtheasad Apr 27 '23 at 10:48

score 3 · Answer 6 · answered Jan 18 '16 at 08:07

3

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

answered Jan 18 '16 at 08:07

SrikanthGoud Mamindla

101
5

score 3 · Answer 7 · answered Feb 27 '16 at 05:47

3

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

answered Feb 27 '16 at 05:47

Chandra Kumar

4,127
1
17
25

score 2 · Answer 8 · answered Feb 24 '16 at 14:47

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.

score 2 · Answer 9 · answered Dec 22 '20 at 18:00

2

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

answered Dec 22 '20 at 18:00

Ahmed Bermawy

2,290
4
35
42

score 1 · Answer 10 · answered Feb 06 '18 at 15:04

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

score 1 · Answer 11 · answered Mar 19 '18 at 06:27

"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>

This one worked for me while none of the above did. Thanks @LuisEduardox — Tanuki, Feb 18 '21 at 19:13

score 1 · Answer 12 · answered Mar 23 '19 at 16:00

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

score 0 · Answer 13 · answered Dec 30 '21 at 08:08

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>

score 0 · Answer 14 · answered Nov 23 '22 at 11:15

0

In my case this worked.

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

answered Nov 23 '22 at 11:15

Dula

1,276
5
14
23

bootstrap datepicker setDate format dd/mm/yyyy

14 Answers14

Linked