Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 Datetimepicker 3.0.0 - make a week start on Monday

There are few reasons I use Bootstrap 3 Datetimepicker 3.0.0 in my MVC 5 project.

Any idea how to offset week start so it starts from Monday? Language tag also not working.

 $(function () {
    $('#PickupTime').datetimepicker({
     weekStart: 1
    });
 });

This is not working because it is not the same bootstrap-datapicker.js

like image 690
HerGiz Avatar asked Jun 25 '14 13:06

HerGiz


3 Answers

If you are using moment.js from v2.8.1 onwards, add the below code before calling datetimepicker().

moment.updateLocale('en', {
  week: { dow: 1 } // Monday is the first day of the week
});

$('#DateTime').datetimepicker();

If you are using old version of moment.js, do the following

moment.lang('en', {
  week: { dow: 1 }
});

$('#DateTime').datetimepicker();
like image 62
justinw Avatar answered Nov 19 '22 01:11

justinw


You can also override the dow value via the locale when calling datetimepicker()

$('#myid').datetimepicker({
    format:'YYYY-MM-DD',
    locale:  moment.locale('en', {
        week: { dow: 1 }
    }),
});
like image 7
John McCabe Avatar answered Nov 19 '22 03:11

John McCabe


According to the options for Datetimepicker this is not possible. It only supports the following properties:

$.fn.datetimepicker.defaults = {
    pickDate: true,                 //en/disables the date picker
    pickTime: true,                 //en/disables the time picker
    useMinutes: true,               //en/disables the minutes picker
    useSeconds: true,               //en/disables the seconds picker
    useCurrent: true,               //when true, picker will set the value to the current date/time     
    minuteStepping:1,               //set the minute stepping
    minDate:`1/1/1900`,               //set a minimum date
    maxDate: ,     //set a maximum date (defaults to today +100 years)
    showToday: true,                 //shows the today indicator
    language:'en',                  //sets language locale
    defaultDate:"",                 //sets a default date, accepts js dates, strings and moment objects
    disabledDates:[],               //an array of dates that cannot be selected
    enabledDates:[],                //an array of dates that can be selected
    icons = {
        time: 'glyphicon glyphicon-time',
        date: 'glyphicon glyphicon-calendar',
        up:   'glyphicon glyphicon-chevron-up',
        down: 'glyphicon glyphicon-chevron-down'
    }
    useStrict: false,               //use "strict" when validating dates  
    sideBySide: false,              //show the date and time picker side by side
    daysOfWeekDisabled:[]          //for example use daysOfWeekDisabled: [0,6] to disable weekends 
};

Source: http://eonasdan.github.io/bootstrap-datetimepicker/#options

You can disable the weekend if you don't want to see sunday.

like image 4
Stefan Avatar answered Nov 19 '22 02:11

Stefan