6

I am using Datepicker for my HTML field . The HTML code is :

<input type="text" id="from-datepicker"/>

The Jquery code to set and get the date picker fields is :

 $("#from-datepicker").datepicker({ dateFormat: 'yy-mm-dd'});
            $("#from-datepicker").on("change", function () {
                var fromdate = $(this).val();
                alert(fromdate);
            });

This code, however, displays the field in 'mm-dd-yyyy' format. Can someone tell me where am I going wrong ?

My imported CDNs are :

 <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>

    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">

Thanks in advance.

4 Answers 4

20

Yes, change dateFormat to just format and you need 4 sets of 'y's

Sample code:

<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
<script>
$( document ).ready(function() {
    $("#from-datepicker").datepicker({ 
        format: 'yyyy-mm-dd'
    });
    $("#from-datepicker").on("change", function () {
        var fromdate = $(this).val();
        alert(fromdate);
    });
}); 
</script>
<input type="text" id="from-datepicker"/>
1
4

See the format option: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format

toDisplay: function (date, format, language) to convert date object to string, that will be stored in input field
toValue: function (date, format, language) to convert string object to date, that will be used in date selection

2
  • Hi @BrOrlandi , Thank you. But I am not able to understand how shall I convert these value. I don't want to just save it but convert and store it in yyyy-mm-dd format. Can you please tell me how this is going to work in my code ? May 9, 2016 at 19:56
  • @nerd.post sounds like something you could do server side May 9, 2016 at 20:00
3

UPDATE 2018

As of bootstrap-datepicker version 1.6.4, setting data-date-format attribute to 'yyyy-mm-dd' on an input element works as well.

For e.g.

  <input data-provide="datepicker" name="date_selected" data-date-format="yyyy-mm-dd" placeholder="Select date" required>
0
1

The option is format

You can set a default value for all your app:

$.fn.datepicker.defaults.format = 'yy-mm-dd';

Or:

$("#from-datepicker").datepicker({format: 'yy-mm-dd'});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.