How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker

Question

I have following datepicker script:

<script>
 $(function(){
        $("#to").datepicker();
        $("#from").datepicker().bind("change",function(){
            var minValue = $(this).val();
            minValue = $.datepicker.parseDate("mm/dd/yy", minValue);
            minValue.setDate(minValue.getDate()+1);
            $("#to").datepicker( "option", "minDate", minValue );
        })
    });
</script>

Now dateformat is MM/DD/YY .how to change the date format to YYYY-MM-DD?

Do you want to change the parseDate format or the actual displayed dateformat? — tskulbru, Sep 21 '11 at 12:56

score 66 · Accepted Answer · answered Sep 21 '11 at 12:56

66

Use the dateFormat option

 $(function(){
        $("#to").datepicker({ dateFormat: 'yy-mm-dd' });
        $("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
            var minValue = $(this).val();
            minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
            minValue.setDate(minValue.getDate()+1);
            $("#to").datepicker( "option", "minDate", minValue );
        })
    });

Demo at http://jsfiddle.net/gaby/WArtA/

answered Sep 21 '11 at 12:56

Gabriele Petrioli

191,379
34
261
317

Here is my problem: I want the date displayed on screen to be "mm/dd/yy" but I want the DOM to store "yy-mm-dd" since it will be sent to mySQL upon submit. Is this possible? – circle1 Dec 30 '18 at 18:35
@circle1 see the [`altFormat`](http://api.jqueryui.com/datepicker/#option-altFormat) and [`altField`](http://api.jqueryui.com/datepicker/#option-altField) options. – Gabriele Petrioli Dec 30 '18 at 18:43
I found those later yesterday and you're right, it is designed to do exactly what I need. – circle1 Dec 31 '18 at 19:34

score 39 · Answer 2 · answered Sep 21 '11 at 12:54

39

Try the following:

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

You'd think it would be yyyy-mm-dd but oh well :P

answered Sep 21 '11 at 12:54

Gazillion

4,822
11
42
59

Also folks, be careful to write `mm` in small caps, since `MM` will display the month in letters. – actaram Jun 27 '16 at 13:25
this works for me, and be careful its dateFormat dont mistype to dateformat – dewaz May 07 '23 at 06:48

Shiko · Answer 3 · 2017-06-30T08:59:01.203

25

I had the same issue and I have tried many answers but nothing worked.

I tried the following and it worked successfully :

<input type=text  data-date-format='yy-mm-dd'  >

edited Jun 30 '17 at 08:59

answered May 27 '16 at 02:01

Shiko

2,448
1
24
31

score 7 · Answer 4 · edited May 19 '14 at 05:40

7

$( ".selector" ).datepicker( "option", "dateFormat", 'yy-mm-dd' );

See: http://jqueryui.com/demos/datepicker/ and http://docs.jquery.com/UI/Datepicker/formatDate#utility-formatDate

edited May 19 '14 at 05:40

krishna

4,069
2
29
56

answered Sep 21 '11 at 12:54

arychj

711
3
21

score 4 · Answer 5 · edited Jan 10 '19 at 09:49

If in jquery the dateformat option is not working then we can handle this situation in html page in input field of your date:

<input type="text" data-date-format='yyyy-mm-dd'  id="selectdateadmin" class="form-control" required>

And in javascript below this page add your date picker code:

 $('#selectdateadmin').focusin( function()
     {
       $("#selectdateadmin").datepicker();
       
     });

gani024 · Answer 6 · 2016-07-07T08:32:55.093

this also worked for me. Go to the bootstrap-datepicker.js.

replace this code :

var defaults = $.fn.datepicker.defaults = {
  autoclose: false,
  beforeShowDay: $.noop,
  calendarWeeks: false,
  clearBtn: false,
  daysOfWeekDisabled: [],
  endDate: Infinity,
  forceParse: true,
  format: 'mm/dd/yyyy',
  keyboardNavigation: true,
  language: 'en',
  minViewMode: 0,
  multidate: false,
  multidateSeparator: ',',
  orientation: "auto",
  rtl: false,
  startDate: -Infinity,
  startView: 0,
  todayBtn: false,
  todayHighlight: false,
  weekStart: 0
 };

with :

var defaults = $.fn.datepicker.defaults = {
  autoclose: false,
  beforeShowDay: $.noop,
  calendarWeeks: false,
  clearBtn: false,
  daysOfWeekDisabled: [],
  endDate: Infinity,
  forceParse: true,
  format: 'yyyy-mm-dd',
  keyboardNavigation: true,
  language: 'en',
  minViewMode: 0,
  multidate: false,
  multidateSeparator: ',',
  orientation: "auto",
  rtl: false,
  startDate: -Infinity,
  startView: 0,
  todayBtn: false,
  todayHighlight: false,
  weekStart: 0
 };

siwalikm · Answer 7 · 2016-11-18T06:08:49.167

2

I used this approach to perform the same operation in my app.

var varDate = $("#dateStart").val(); 

var DateinISO = $.datepicker.parseDate('mm/dd/yy', varDate); 

var DateNewFormat = $.datepicker.formatDate( "yy-mm-dd", new Date( DateinISO ) );

$("#dateStartNewFormat").val(DateNewFormat);

edited Nov 18 '16 at 06:08

answered Oct 21 '16 at 21:47

siwalikm

1,792
2
16
20

score 2 · Answer 8 · answered Sep 21 '11 at 12:56

2

You need something like this during the initialization of your datepicker:

$("#your_elements_id").datepicker({ dateFormat: 'yyyy-mm-dd' });

answered Sep 21 '11 at 12:56

Huske

9,186
2
36
53

score 1 · Answer 9 · answered Apr 06 '17 at 10:36

1

just add dateFormat:'yy-mm-dd' to your .datepicker({}) settings, your .datepicker({}) can look something like this

            $( "#datepicker" ).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                dateFormat: 'yy-mm-dd'
            });
          });

    </script>

answered Apr 06 '17 at 10:36

K.R.Janssen

19
1

This was already in the accepted answer, What does your answer add beyond that? – Raidri Apr 06 '17 at 11:09

score 1 · Answer 10 · answered Apr 12 '19 at 09:14

Just need to define yy-mm-dd here. dateFormat

Default is mm-dd-yy

Change mm-dd-yy to yy-mm-dd. Look example below

  $(function() {
    $( "#datepicker" ).datepicker({
      dateFormat: 'yy-mm-dd',
      changeMonth: true,
      changeYear: true
    });
  } );

Date: <input type="text" id="datepicker">

score 1 · Answer 11 · edited Dec 26 '13 at 18:34

1

Try this:

$.datepicker.parseDate("yy-mm-dd", minValue);

edited Dec 26 '13 at 18:34

Navnath Godse

2,233
2
23
32

answered Sep 21 '11 at 12:55

Peng Qi

1,412
1
10
13

score 1 · Answer 12 · edited May 19 '14 at 08:24

1

Use .formatDate( format, date, settings )

http://docs.jquery.com/UI/Datepicker/formatDate

edited May 19 '14 at 08:24

krishna

4,069
2
29
56

answered Sep 21 '11 at 12:56

Vlad Dneprovskiy

179
3

score 0 · Answer 13 · answered Jun 21 '16 at 16:23

0

this worked for me.

    $('#thedate').datepicker({
    dateFormat: 'dd-mm-yy',
    altField: '#thealtdate',
    altFormat: 'yy-mm-dd'
});

answered Jun 21 '16 at 16:23

Narendra Kothule

1,064
9
7

score 0 · Answer 14 · answered Jan 20 '17 at 00:59

This work for me:

 $('#data_compra').daterangepicker({
          singleDatePicker: true,
          locale: {
           format: 'DD/MM/YYYY'
          },
         calender_style: "picker_4", }, 
function(start, end, label) {
          console.log(start.toISOString(), end.toISOString(), label); 
});

score 0 · Answer 15 · answered Nov 07 '17 at 13:48

This is what worked for me in every datePicker version, firstly converting date into internal datePicker date format, and then converting it back to desired one

var date = "2017-11-07";   
date = $.datepicker.formatDate("dd.mm.yy", $.datepicker.parseDate('yy-mm-dd', date));
// 07.11.2017

score 0 · Answer 16 · answered Nov 23 '17 at 07:30

0

For me in datetimepicker jquery plugin format:'d/m/Y' option is worked

$("#dobDate").datetimepicker({
lang:'en',
timepicker:false,
autoclose: true,
format:'d/m/Y',
onChangeDateTime:function( ct ){
   $(".xdsoft_datetimepicker").hide();
}
});

answered Nov 23 '17 at 07:30

surya

51
1
6

score 0 · Answer 17 · answered Jan 13 '22 at 06:17

0

 $('#selectdateadmin').focusin( function()
     {
       $("#selectdateadmin").datepicker();
       
     });

answered Jan 13 '22 at 06:17

Mehmet Çetin

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 13 '22 at 08:35
While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Luca Kiebel Jan 18 '22 at 10:53

score 0 · Answer 18 · answered Sep 22 '11 at 10:00

Thanks for all. I got my expected output

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

<script>
$(function(){
        $("#to").datepicker({ dateFormat: 'yy-mm-dd' });
        $("#from").datepicker({ dateFormat: 'yy-mm-dd' }).bind("change",function(){
            var minValue = $(this).val();
            minValue = $.datepicker.parseDate("yy-mm-dd", minValue);
            minValue.setDate(minValue.getDate()+1);
            $("#to").datepicker( "option", "minDate", minValue );
        })
    });

</script> 

<div class="">
    <p>From Date: <input type="text" id="from"></p>

    <p>To Date: <input type="text" id="to"></p>
</div>

How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker

18 Answers18

Linked

Related