Question

126

Bootstrap datepicker format date differently on display than on value

rated 0 times [ 132] [ 6] / answers: 1 / hits: 20587 / 9 Years ago, thu, march 12, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kurtisl

Add To Favorites

Follow

Total Points: 559

Total Questions: 110

Total Answers: 97

Location: Tokelau

Member since Sun, May 7, 2023

1 Year ago

answered 9 Years ago lawrencem · Accepted Answer

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 

});