Bootstrap datepicker format date differently on display than on value

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

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.

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