Bootstrap datepicker format date differently on display than on value

Question

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.

Answer 1

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.

Answer 2

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