Bootstrap Datetimepicker starts with monday [duplicate] - javascript

This question already has answers here:
Bootstrap 3 Datetimepicker 3.0.0 - make a week start on Monday
(9 answers)
Closed 6 years ago.
I want to my calendar week start with monday. Im using Bootstrap Datetimepicker, but I don't know how to do that. There's my JSFiddle.
This is my jQuery for datetimepicker
$(function () {
$('.datetimepickerinline').datetimepicker({
inline: true
});
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
});
I cant find any solutions in documentation, that's why Im asking it there :)

You have to make changes for the moment js option as implemented in answer here : Bootstrap 3 Datetimepicker 3.0.0 - week starts at Monday
JSFIDDLE : https://jsfiddle.net/ekm0on2a/16/
$(function () {
moment.locale('en', {
week: { dow: 1 } // Monday is the first day of the week
});
$('.datetimepickerinline').datetimepicker({
inline: true
});
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
});

You could set the locale to the correct value, so everyone should have it correct in their country.
$('.datetimepickerinline').datetimepicker({
inline: true,
locale: 'de'
});
Setting that to germany, the week starts with monday and also the text is in german.

Related

bootstrap 3 datetimepicker custom year

I need a calendar popup for my project and I just want to show years just like this. (2000 - 2009)
I found this library Bootstrap 3 Datepicker and it seems easy. Then I've configured it to show years. Worked fine.
But I want to show 2000-2009 range in dropdown. That's the problem. I used "viewMode" option to show years. But I couldn't find anywhere to show custom year range. Here is my js code. And here is jsfiddle for live example. Any solution?
$(function () {
$('#datetimepicker10').datetimepicker({
viewMode: 'years',
format: 'L'
});
});
$('#datetimepicker10').datetimepicker({
viewMode: 'years',
defaultDate : '2005-01-01',
format: 'L'
});
set
defaultDate : '2005-01-01'
jsfiddle

Bootstrap datepicker, disable dates - view only mode possible?

I'm loading a selection of dates into bootstrap datepicker for the user to view. Currently they can click on a highlighted date but it clears all the dates that are preloaded.
I don't want them to be able to click on any dates, just view the different month pages of dates. How can I do this?
this is how I setup datepicker and load the dates;
$('.datepickera').datepicker({
format: 'yyyy/mm/dd',
multidate: false
});
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
$(".datepickera").data("datepicker").setDates($('#mydates').data('dates'));
If I understand you correctly you can make the datepicker unselectable by using the daysOfWeekDisable property like this:
$('.datepicker').datepicker({
daysOfWeekDisabled: [0,1,2,3,4,5,6]
});
0 is Sunday and 6 is Saturday. This way a user cannot select any day but can view the entire calendar. You can read more about it here. Hope that helps.

Bootstrap Datepicker maximum selection of N days

I've got datepicker with option multidate and I want to define maximum days which user can select, for example 5 days, other days should be disabled. It should happen dynamically - user can select arbitrary 5 days and then other days should be blocked. How can I do that ?
Based on the documentation for the bootstrap-datepicker plugin you are using, it looks like if you just do multidate: 5 "the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded."
$('#datepicker').datepicker({
multidate: 5
});
As for disabling the days once 5 are selected, rather than dropping the oldest...I am not sure if that is possible. You might be able to do something like this (but not sure, as you would have to pass in a big array of dates):
$('#datepicker').datepicker({
multidate: 5
}).on('changeDate', function(e){
//some function here to disable dates once 5 are selected
});
Hope this helps.

Customize the jquery Datepicker

i am using jqueryDate picker.i want to customize this Datepicker.In this Datepicker Month and year is showing.Like August2014.Here if i click next it will go to next month like previous.
But I want to customize,mean i want to show months in dropdown and Year also i have to show in Dropdown,amd Next and previous function should be work.Can You Please suggest Me.
What plugin are you trying to use. If it is this plugin found in this site. then all you need to do is set the change month and changeyear to true.
$(function() {
$("YOURSELECTOR" ).datepicker({
changeMonth: true,
changeYear: true
});
});
the documentation for the api can be found here.

meteor bootstrap3 datetimepicker disable days of week not working

I'm using bootstrap 3 in a meteor project and would like to disable most of the days of the week in a datetime picker.
The other options I set seem to be working, but daysOfWeekDisabled won't disable any days.
I found this answer here Limit bootstrap-datepicker to weekdays only? that suggests it should work (and it does in the twiddle) but I can't get my code to work.
The options I'm setting are
Template.requestLayout.rendered = function(){
$('.datetimepicker').datetimepicker({
pickTime: false,
startDate: moment().day(12),
defaultDate: moment().day(12),
daysOfWeekDisabled: [0,1,2,3,6],
autoclose: true
});
}
Any ideas why it might not be working?
try changing to this
daysOfWeekDisabled: "0,1,2,3,6"

Categories

Resources