14

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

informatik01
  • 15,174
  • 9
  • 67
  • 100
HerGiz
  • 697
  • 1
  • 10
  • 19

9 Answers9

32

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();
madzohan
  • 9,868
  • 9
  • 32
  • 60
justinw
  • 660
  • 8
  • 10
  • This works as expected. Shows Monday as the first day on the calendar. In addition to this i needed the Monday and Sunday from any date they picked. i.e if they choose 08/09/2018 (MM/DD/YYYY) then i needed 08/06/2018 and 08/12/2018 . to Get those I used the ```Weekday()``` function. i.e ```moment(new Date()).weekday(6).format("MM/DD/YYYY")``` which gave me Sunday for the week https://momentjs.com/docs/#/get-set/weekday/ – Digvijayad Aug 09 '18 at 14:43
6

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 }
    }),
});
DoctorAgon
  • 539
  • 4
  • 13
4

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.

Stefan
  • 13,724
  • 13
  • 70
  • 123
  • But still left column is sunday, and people expect monday – HerGiz Jun 25 '14 at 14:22
  • In bootstrap-datapicker.js I have offseted the names, but only names get mooved, not the dates itself, so entire calender is not correct. Eaven treid changing in moment.js, but same thing. – HerGiz Jun 25 '14 at 14:26
  • Any replacement sugestions? – HerGiz Jun 26 '14 at 23:36
  • 1
    Finally i switched to https://github.com/smalot/bootstrap-datetimepicker but will follow development of first one. – HerGiz Jun 28 '14 at 21:40
  • NO i didn't. It is buggy and simply not working. Gong back to original. – HerGiz Jun 28 '14 at 22:29
4

Instead of using moment.js I used moment-with-langs.js (I guess it came with default package ASP.NET MVC 5).

By calling:

<script type="text/javascript">
    $('#DateTime').datetimepicker({
        language: "hr"
    });
</script>

thing works, finally the calender starts from monday.

UPDATE: Even better, add key to web.config

<appSettings>    
    <add key="Culture" value="hr" />
</appSettings>

and then

$(document).ready(function () {
    $(document).on('focus', '#Date', function () {
        $(this).datetimepicker({
            locale: '@System.Configuration.ConfigurationManager.AppSettings["Culture"]',
            format: 'DD:MM:YYYY',
        });
    });
});
HerGiz
  • 697
  • 1
  • 10
  • 19
4

I have just done! In moment.js change this line:

_week : {
    dow : 1, // Sunday is the first day of the week.
    doy : 6  // The week that contains Jan 1st is the first week of the year. 
},

'dow' MUST BE 1 and the week starts at Monday.

user3928861
  • 41
  • 2
0

open jquery.datetimepicker.js and find variable "dayOfWeekStart" and set it to 1

seaWolf
  • 19
0
'locale' => [
    'firstDay' => 1
]
flarpy
  • 1
  • 1
  • 1
0

I stumbled upon the same question, and i'm using:

And, following the answer of user3928861 I found the answer on line 961 of moment.js as follows:

var defaultLocaleWeek = {
    dow : 1, // Sunday is the first day of the week.
    doy : 6  // The week that contains Jan 1st is the first week of the year.
};
Community
  • 1
  • 1
Tales Farias
  • 1
0

Datetimepicker has an option to set that to match wherever you are in the world (see the locale option http://eonasdan.github.io/bootstrap-datetimepicker/Options/#locale)

You can manually override it

$('#DateTime').datetimepicker({
    locale: moment.local('en')
});
Pierre
  • 1