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.

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")

jQuery Date Picker on Multiple Fields using array notation

Using JS to generate a list of input fields that have the name of:
name="date_from[]"
The class, 'date_picker', is instantiated using:
$( ".date_picker" ).datepicker({ dateFormat: "dd-mm-yy" });
When a new record is generated using JS the new input field does in deed display the Date Picker but the date selected is inserted into the first field, always.
Is there any solution, or maybe an option in the date_picker to make it insert into the currently selected field?

The datepicker has a onClose event wich provide a variable with the result. You need to take it, split it, and set it to your inputs :
var $input = $('input')
$input.datepicker({
dateFormat: 'dd-mm-yy'
, onClose: function(dateText) {
for (var i = 0, date = dateText.split('-'), item; item = $input[i];) {
item.value = date[i++];
}
}
})​
Here is a live example.

jQuery UI extension to make date picker modal

Interestingly, the jQuery UI date picker has no option to display a modal popup, unlike the regular dialog:
http://jqueryui.com/demos/datepicker/
http://jqueryui.com/demos/dialog/
Does anyone know of an extension to add such functionality?
Note: Right now I rolled my own, doing something like
'beforeShow': function(input, inst) {
$('.menu-overlay').height($(document).height());
$('.menu-overlay').toggle();
}
'onClose': function(dateText, inst) {
$('.menu-overlay').toggle();
}
Where the menu-overlay is a 100% height/width semi-opaque div, which works somewhat. But I'd prefer jquery to handle modality

I have the exact same problem... Here is what I am doing to solve it:
I create the datepicker inline (i.e. attach it to a div, not an input)
I append this div to another one that I create on the fly
I make this new div a modal dialog
With this method, the datepicker appears within a "standard" jQueryUI modal.
$.fn.modal_dialog = function(){
modal_dialog_div = $("<div />", {'class': 'modal_datepicker_dialog'})
modal_datepicker_div = $("<div />", {'class': 'modal_datepicker_datepicker', 'height': '200px', 'width':'200px'})
modal_dialog_div.append(modal_datepicker_div);
modal_dialog_div.dialog({modal: true})
modal_datepicker_div.datepicker({altField: "#" + $(this).attr('id'), onSelect: function(dateText, inst) { modal_dialog_div.dialog('destroy');modal_dialog_div.remove()}, defaultDate: $(this).val()})
}
And I call this on an input, like this:
<input type="text" id="datepicker_result1" onclick="javascript:$(this).modal_dialog()" value="08/15/2011"/>
What do you think?
PJ