I want to use Twitter Bootstrap's datepicker. I want the actual input to DISPLAY in the format mm/dd/yyyy but the value of the object I want it to create/pass should be in yyyy-mm-dd. I am aware of this property:

"data-date-format" => "mm-dd-yyyy"

But that changes both the way the date is displayed and how the value is formatted. I also have this in my JS:

$(this).datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true,
  todayHighlight: true,
  pickTime: false
});

I'm not really sure what the format part is doing, but changing it doesn't change the value that is created by the input.

I want to use Twitter Bootstrap's datepicker. I want the actual input to DISPLAY in the format mm/dd/yyyy but the value of the object I want it to create/pass should be in yyyy-mm-dd. I am aware of this property:

"data-date-format" => "mm-dd-yyyy"

But that changes both the way the date is displayed and how the value is formatted. I also have this in my JS:

$(this).datepicker({
  format: 'yyyy-mm-dd',
  autoclose: true,
  todayHighlight: true,
  pickTime: false
});

I'm not really sure what the format part is doing, but changing it doesn't change the value that is created by the input.

• javascript
• twitter-bootstrap
• datetime
• datepicker
• formatting

• 1 I would like to see this feature too, I want to display the date in local UK format (dd/mm/yyyy) but it needs to be parsed as yyyy-mm-dd due to a piece of software I'm using. Also I think "data-date-format" and "format" are the same thing just one is attached via HTML and the other via JS. – alvinc Commented Aug 27, 2015 at 12:46
• See my answer here stackoverflow.com/a/47466659/1153909 – Irfan Ashraf Commented Nov 24, 2017 at 5:06

4 Answers 4

When I am faced with such a problem, where I want data displayed differently than I want it communicated, I usually write a short script to copy the value into a hidden element where I maintain the 'correctly'-formatted data which the user does not see.

This is the best solution I can offer at the moment, as I do not know of any way to convince the Bootstrap Datepicker to use two formats simultaneously.

there's a solution from bootstrap for this problem.

as said on the docs

you can set format as an object with 2 parsing functions: toValue and toDisplay.

$('.datepicker').datepicker({
format: {
    /*
     * Say our UI should display a week ahead,
     * but textbox should store the actual date.
     * This is useful if we need UI to select local dates,
     * but store in UTC
     */
    toDisplay: function (date, format, language) {
        var d = new Date(date);
        d.setDate(d.getDate() - 7);
        return d.toISOString();
    },
    toValue: function (date, format, language) {
        var d = new Date(date);
        d.setDate(d.getDate() + 7);
        return new Date(d);
    }
  },
   autoclose: true 
});

here is example script to copy the value into a hidden element to maintain yyyy-mm-dd format :

    $('.datepicker').on('changeDate', function(e){
        var date = e.date;
        var day = ('0' + date.getDate()).slice(-2);
        var month = ('0' + (date.getMonth() + 1)).slice(-2);
        var year = date.getFullYear();
        console.log(year + '-' + month + '-' + day);
        $(this).next('input[type=hidden]').val(year + '-' + month + '-' + day);
    });

I wanted to use the default date pickers in Chrome, FF, Edge, and Safari. In particular, I wanted the scrolling behavior on the phone.

I set the input type to "date" and pass in the value as yyyy-mm-dd. This works great on Chrome, FF, Edge, and Safari. Automatically gets formatted as mm/dd/yyyy except in Safari, which shows longer format.

IE doesn't support the "date" type. So, when I pass the data into the "date" textbox, it needs to be converted manually to mm/dd/yyyy format and then I use the bootstrap datepicker.

So I test for IE. Then, if it is, do the transformation in the val()

     // Format the values to be mm/dd/yyyy
     ElementsJQ.val(function (index, value) {
          
          // Check for a date value
          let testDate = new Date(value);
          if (isNaN(testDate.getMonth())) {
               $(this).attr('value', '');
                return '';
           }

           // Parse the value to get its parts
           let dateParts_ = value.split('-');
           if (dateParts_.length != 3) {
               $(this).attr('value', '');
               return '';
           }

           // Create formatted date
           let formattedDate = dateParts_[1] + '/' + dateParts_[2] + '/' + dateParts_[0];

           // Test - real date?
           testDate = new Date(formattedDate);
           if (isNaN(testDate.getMonth())) {
               $(this).attr('value', '');
               return '';
           }

           $(this).attr('value', formattedDate);
           return formattedDate;
            });

            // Apply bootstrap date picker.
            ElementsJQ.datepicker();

        }