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 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 Date picker is Selecting today and default date given

I am using Jquery date picker for selecting a date, and I'd like to be able to default the selection to a given date.
Here's my code:
var SelectDate=new Date(2013, 06,25 , 0, 0, 0, 0) ;
$("#OnwardTravelDate").datepicker({
numberOfMonths: 2,
dateFormat: 'dd/mm/yy',
minDate: datePickMinDate_DT,
maxDate: datePickMaxDate_DT,
defaultDate: SelectDate
});
But the date selector control highlights both today's date and the date 'selectDate' . I want only 'selectDate' as highlighted

removeClass("ui-state-highlight"); should fix your problem.
but if you just want the highlight of today never show again, you may get the datepicker's source (jquery.ui.datepicker.js) and find this line to remove:
(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +
then compile it to use.

Datepicker assigns different classes to "today" and "selected day":
today - ui-state-highlight
selected day - ui-state-active
You can either remove or override styling of ".ui-datepicker .ui-state-highlight" or remove the class:
$("#OnwardTravelDate a.ui-state-highlight").removeClass("ui-state-highlight");

What about setting the value of #OnwardTravelDate in html or jquery?
HTML:
<input type="text" id="OnwardTravelDate" value="25/06/2013" />
jQuery:
$("#OnwardTravelDate").val("25/06/2013"); // Before datepicker code
Then you don't need your defaultDate: SelectDate at all :)
Hope that helps.
Edit: (more info)
You could also try the setDate method:
$("#OnwardTravelDate").datepicker("setDate", SelectDate); // After datepicker code
Edit: jsfidle
This JS fidle seems to work for me: jsfiddle
Maybe the styling on your theme makes it look like it's selected?

EDIT1: From here I found just a fix, but I'm not able to handle with your code.
$( "#datepicker" ).datepicker({
beforeShow: function(input, inst) {
window.setTimeout(function(){
$(inst.dpDiv).find('.ui-state-highlight.ui-state-hover').removeClass('ui-state-highlight ui-state-hover')
},0)
},
});
Check this JSFiddle and if possible update it with your code you trying.
EDIT2: By overriding the default css .ui-datepicker-today and a.ui-state-highlight of with the below one.
.ui-datepicker-today a.ui-state-highlight {
border-color: #d3d3d3;
background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
color: #555555;
}
Check out this JSFiddle

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.