Search code examples
javascriptjquerydatepickerdatetimepickerbootstrap-datetimepicker

jquery - bootstrap datetimepicker viewMode months format

I'm using the jquery plugin bootstrap datetimepicker and I want to set the full format of months in the calendar. How i can do that because I didn't any function that allow me to do this ?

<div id="datetimepicker"></div>

$('#datetimepicker').datetimepicker({
    locale: 'fr',
    dayViewHeaderFormat: 'YYYY',
    viewMode: 'months',
    format: "MMMM YYYY", 
    debug : true
});

enter image description here

Solution

  • Use moment.js to locate the language and get the list of full months, or alternatively, specify months manually as an array of all months.

    Listen to the dp.show event and loop through the months text replacing it with corresponding full month's text.

    moment.locale('fr');
var months = moment.months();

$('#datetimepicker10').datetimepicker({
    viewMode: 'months',
    locale: 'fr'
}).on('dp.show', function(e){
    var $dp = $(e.target);
    var $cal = $('.bootstrap-datetimepicker-widget', $dp);
    $('.month', $cal).each(function(i){
        $(this).text(months[i]);
    });
});

    DEMO: http://jsfiddle.net/nepek6u8/