We Keep Coding

jQuery DatePicker restrict dates

I am trying to restrict jquery datepicker values. So the the from date can not exceed the to date and vice versa.
Demo https://jsfiddle.net/DTcHh/21594/
I've tried multiple instances of this but can not seem to get it to work. Is it because I am using the UK date format?
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#from_date').datepicker({
onSelect: function(dateStr) {
var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
var max = new Date(min.getTime());
max.setMonth(max.getDay() + 1); // Add one month
$('#to_date').datepicker('option', {minDate: min, maxDate: max});
}
});
$('#to_date').datepicker({
onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Selected date or null if none
$('#from_date').datepicker('option', {maxDate: max});
}
});
As i'm new to JavaScript i'm keen to know exactly why my code doesn't work, so i can learn from this.

You cannot initialize date picker on same element twice. First, you called the date picker on element with its class; then with its ID.
Try to move the date format to date picker default function.
$.datepicker.setDefaults({
dateFormat: 'dd-mm-yy'
});
Or, you need to set dateFormat every time you initialize a date picker element.

Datepicker don't allow past dates plus today

Hi I have a bootstrap datepicker. I want to grey out all past dates plus the date today on the calendar. I know that I can grey out all past dates with this:
<script type="text/javascript">
$(function () {
$('#delayed-spiffdate').datepicker({
startDate: '-0d'
});
});
But how do I grey out the current date? Thanks.

If you want to exclude all past dates and today as well, then you need your startDate value to be +1d:
$(function () {
$('#delayed-spiffdate').datepicker({
startDate: '+1d'
});
});
DEMO: jsfiddle

War10ck's answer is the cleanest. Worth noting, you can also set your datepicker parameters to whatever you like using a date object. Here's another answer that also works:
$(function () {
$('#delayed-spiffdate').datepicker({
startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000)
});
});
http://jsfiddle.net/qy8kvf39/

Jquery Datetimepicker disable dates

i am using jquery datetime picker for getting date and time using
$(document).ready(function() {
$('#pickup_date').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
but i need to enable 3 weeks from the current date only.How to solve this.thanks in advance

<script>
function DisableWeekDays(date) {
var weekenddate = $.datepicker.noWeekends(date);
// In order to disable weekdays, we will invert the value returned by noWeekends functions.
// noWeekends return an array with the first element being true/false.. So we will invert the first element
var disableweek = [!weekenddate[0]];
return disableweek;
}
$(function() {
$( "#datepicker" ).datetimepicker({
beforeShowDay: DisableWeekDays
});
});
</script>

$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:0, //Today You can also '+1970/01/21' or '-1970/01/21' both ended up meaning -0 or +0
maxDate:'+1970/01/21' //3*7 days from today.
});
use minDate and maxDate
0 means 1970/01/01 which is start time of Unix time.You can plus/minus the String Date to set range of selectable dates.
The case You want to set the range to be yesterday to tomorrow it'll be
$('yourSelectorForDateTimePicker').datetimepicker({
formatDate:'Y/m/d',
minDate:'-1970/01/02', //Yesterday(plus one day from the 0 '1970/01/01')
maxDate:'+1970/01/02' //Tomorrow(minus one day from the 0 '1970/01/01')
});
http://xdsoft.net/jqplugins/datetimepicker/

The above answer is a good one, but if you want to set the date dynamically (based on the current date).
$(function () {
var currentDate = new Date();
var date = currentDate.toDateString();
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: date
});
});
Get the current date into a variable
Convert the date to a string
Pass the string to minDate
Or
$(function () {
$("#datetimepicker1").val(new Date() + " 00:01:00");
$('#datetimepicker1').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment()
});
});
Using JSMoment and pass moment.

jQuery Datepick (Keith Wood) highlight defaultDate with a CSS-class

I am using the inline version of Keith Woods jquery datepick plugin.
The default value for the picker is set like this:
var dpInputField = $('input#datepicker-value');
var defaultDate = (dpInputField.val() == '') ? '1399593600' : dpInputField.val(); // 1399593600 = 9th May 2014 00:00:00
$('#datepicker').datepick({
dateFormat: $.datepick.TIMESTAMP,
monthsToShow: 2,
changeMonth: false,
altField: '#datepicker-value',
onDate: showDayAndMonth,
defaultDate: defaultDate,
}, $.extend($.datepick.regional[window.language]));
Theres a form submit after selecting a date. If I debug the defaultDate its correct! Just a CSS-class is missing somehow.

Solved it. I am using the onShow: event to call a function which is selecting the HTML object by its class.
for example: class="dp1403344800000", as theres the timestamp as part of the css class, it was no problem to .addClass(datepicker-selected)

jQuery UI Datepicker - Disable current date but NOT the highlight

I have the following code which disables the current date by setting minDate to current date + 1:
var today = new Date();
var tomorrow = new Date();
tomorrow.setDate(today.getDate() + 1);
$("#minDate").datepicker({
showOn: "none",
minDate: tomorrow,
dateFormat: "DD dd-mm-yy",
onSelect: function(dateText) {
minDateChange;
},
inputOffsetX: 5,
});
The problem is that I want to disable the current date, but still keep it highlighted (Blue border around the date) in the calendar.
Is there a native way to do this using the datepicker or do I have to create a highlight script myself?

you don't need to set today and tomorrow as a variable. just set minDate: 1

The datepicker has a class on todays date called "ui-datepicker-today", so I simply added a class to that:
$(".ui-datepicker-today span").addClass("ui-state-hover")