Develop Reference

datetimepicker - disabling some days in the calendar

I have the following jQuery code:
$(".dtp").datetimepicker({
format: 'Y-M-D hh:mm',
minDate: new Date()
});
I am using datetimepicker from Bootstrap and I'm trying to disable some days, based on information in my database.
For example all Mondays and Saturdays could be disabled. I can't seem to find information about how to do this.

The latest version of datepicker has this option.
http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#daysofweekdisabled
See Answer in this similar question
Limit bootstrap-datepicker to weekdays only?

Check this link, you can use disabledDates :
$(".dtp").datetimepicker({
format: 'Y-M-D hh:mm',
minDate: new Date(),
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});

jQuery datetimepicker default time is not working

I am using jquery datetimepicker. I used minDate to set the minimum date, a user can select. Now i want to make timepicker independent. So I am using hour and minute to set the default time, but its not working. Here is my code:
jQuery('#datetimepicker1').datetimepicker({
minDate: "06/20/2017",
hour : '06',
minute: '00'
});
It give me error:
Uncaught TypeError: option hour is not recognized!

Untested code, let me know if there is any problem:
jQuery('#datetimepicker1').datetimepicker({
minDate: "06/20/2017"
});
var myDate = new Date();
myDate.setHours(6);
myDate.setMinutes(0);
myDate.setDate(20);
jQuery('#datetimepicker1').datetimepicker("setDate", myDate);

jQuery UI Datepicker showing incorrect week number

When using the jQuery UI Datepicker and starting the week on a Sunday, the week numbers are incorrect. For example, 3rd Jan 2016 should be week 1 as all of the dates (3rd to 9th) are in the same year. But as you can see in the screenshot below, the UI shows it as week 53.
Here is the code to render the datepicker:
$("#datepicker" ).datepicker({
showWeek: true,
firstDay: 0
});
So nothing special, other than showing the week numbers and starting the week on Sunday instead of Monday (as per default).
Here is a fiddle of the issue: https://jsfiddle.net/vLqabmmz/

Due to the fact that this seems like a bug in jQuery UI. I'm posting the possible answer being the reporting of this as a bug to the jQuery UI team here: https://bugs.jqueryui.com/ticket/14907#ticket

i checked further and iso8601Week() method of jqueryUI is working fine, the problem is in its representation (the layout).
If you extract the value of the week you can see that the standard is followed and is fine. 3-rd is week 53 and after that 4 ... 7 (which is the first Thursday of the year and this is the week number 1). You can check with the code below.
$(function() {
$( "#datepicker" ).datepicker({
showWeek: true,
onSelect: function(dateText, inst) {
$(this).val("'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)));
}
});
});

As seen from documentation for calculateWeek here:
This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4.
So comments are right qualifying this as a bug. While this is not resolved yet, you can overcome this easily by setting firstDay to 1 like this:
$("#datepicker" ).datepicker({
showWeek: true,
firstDay: 1
});
Week number would be correct, it is easier than rewrite calculateWeek, only difference is that week will start on Monday instead on Sunday. Note that default behavior sets firstDay to 0.

Here is a display of the jQuery calendar for the first week of 2017 - fully contained in a new year.
Yet, the week number is shown as 52 of year 2016 (wtf).
To me it looks like a bug to be corrected, otherwise there is no reason to display the week number.

https://en.wikipedia.org/wiki/ISO_week_date:
The first week of a year is the week that contains the first Thursday of the year (and, hence, always contains 4 January).

You should update locale:
moment.updateLocale('en', {
week: {
dow: 1,
doy: 1
}
});

Bootstrap 3 datepicker - minDate and maxDate

http://eonasdan.github.io/bootstrap-datetimepicker/
Hi
I am trying to use the min max date options but not sure how to use it as the documentation doesn't provide example code.
I found on stackoverflow that you can do this:
minDate: moment()
But that throws an error that moment is not defined.
I am guessing it can't find the moment.js which is included on the page otherwise the plugin wouldn't work.
What I am trying to achieve is to disable 10 days before the current day and show 30 days from the current day.
Thanks
Here is the code (I have removed everything except whats important to simply show the code):
window[ns] = window[ns] || {};
(function ($, moment, app) {
'use strict';
// Private Methods
var nameSpace = 'global',
globalDataObject = null,
notifyRenderCallbacks = function (pageName) {
if ($('.js-calendar').length) {
$('.js-calendar').datetimepicker({
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
icons: {
next: 'icon icon-chevronright',
previous: 'icon icon-chevronleft'
},
enabledDates: moment().add(30, 'days')
});
}
},
// If this module requires global data
app.register(nameSpace, initialize);
}(jQuery, moment, window[ns] || {}));

To answer my question. The framework used required you to add moment to a config file otherwise it would not allow to use http://momentjs.com/ or any other JS - spoke to the person who set up the framework and they did it for security reasons.
Kasun's answer is correct but a better way to do this is to use Moment.js since datetimepicker is using this JS.
So to answer the 2nd part which is to disable 10 days before the current day and show 30 days from the current day you need to set the options as below. I didn't need to do the 10 days before but wanted only a set number of days to be available to select. I've added comments to make things clear but they shouldn't be there.
$mydatepicker.datetimepicker({
minDate: moment(), // Current day
maxDate: moment().add(30, 'days'), // 30 days from the current day
viewMode: 'days',
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
});
What the above will do is enable all the days between minDate and maxDate.
You could also directly enter the date range:
$mydatepicker.datetimepicker({
minDate: moment("12/01/2015"),
maxDate: moment("12/30/2015"),
viewMode: 'days',
format: 'DD MMMM YYYY',
dayViewHeaderFormat: 'MMMM YYYY',
});
And this will disable all days before and after the dates you entered into moment().
This is not part of the question but I wanted to display the current day in the input value when the calendar loaded but it wouldn't, instead it would show the placeholder text. I think its because of the use if minDate so I simply used jQuery to replace the value of the input.
$datepickerInput.val(moment());

var todayDate = new Date().getDate();
$('#element').datetimepicker({
timepicker:false,
formatDate:'Y/m/d',
minDate: new Date(),
maxDate: new Date(new Date().setDate(todayDate + 30))
});
By using this example you can give option to user to select date between today and next 30 days without using momentjs. You can provide value of minDate and maxDate accoording to you. For an example if you want to give options in between last 30 days to next 30 days, so set
minDate: new Date(new Date().setDate(todayDate - 30))
maxDate: new Date(new Date().setDate(todayDate + 30))

Just give this way, using JavaScript Date Object:
minDate: (new Date()).getDate()

For disable
$("#editreservation_to").datetimepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');
For Enable
$("#editreservation_to").datetimepicker({minDate:false,maxDate:false}).removeAttr('readonly');

jQuery datepicker setDate to value from div

I have problem with datepicker setDate option (I need to use server date in datepicker). I have display current date from server in that format (html source):
<div id="cur-date">27/11/2013</div>
In jquery script I try to set the setDate using this code:
$('#date_from, #date_to').datepicker({
beforeShowDay: noWeekendsOrHolidays,
defaultDate: '+1d',
minDate: '+1d'
}).datepicker('setDate', '#cur-date');
But it didn't work.
Any suggestion what is wrong?

first use text() not val()
val() is use for input type
$('#date_from, #date_to').datepicker({
beforeShowDay: noWeekendsOrHolidays,
dateFormat: "mm/dd/yy"
}).datepicker("setDate", $("#cur-date").text());

Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.Since you are added +1d it does not show the current date. For example 2 represents two days from today and -1 represents yesterday.
$('#date_from, #date_to').datepicker({
defaultDate: '+1d',
minDate: '0'
}).datepicker('setDate', '#cur-date');
Try removing the `minDate: '+1d'` or try commenting that part or even changing it to 0.
Working fiddle
http://jsfiddle.net/Uv8c5/

Use datepicker with these parameters
$('#date_from, #date_to').datepicker({
format: 'mm/dd/yy',
autoclose: true,
forceParse:true,
pickerPosition: "bottom-left",
startDate: $("#cur-date").text()
});