We Keep Coding

Jquery datepicker. 2 datepickers. Restrict range. Default date current date

I am using the jQuery Datepicker widget with two input boxes, one for the "From" date and the second with the "To" date. I am using the jQuery Datepicker but I need these additional restrictions:
Both "From" date and "To" date have to show current date highlighted in the calendar by default.
If a "To" date is selected first, then the "From" date can only be within the range of 31 days before the "To" date. If "From" date is selected first then "To" date can only be within the range of 31 days after "From" date. Rest of the dates should be disabled in either case.
I need the dates in dd-mm-yyyy format.

Please use the following code.
$( function() {
$("#fromDate").datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
onSelect: function(date, inst) {
var selDate = new Date(date);
var newDate = new Date(selDate.getFullYear(), selDate.getMonth(), selDate.getDate()+31);
$('#toDate').datepicker('option', 'minDate', selDate );
$('#toDate').datepicker('option', 'maxDate', newDate );
}
});
$("#fromDate").datepicker('setDate', new Date());
$( "#toDate" ).datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
onSelect: function(date, inst) {
var selDate = new Date(date);
var newDate = new Date(selDate.getFullYear(), selDate.getMonth(), selDate.getDate()-31);
$('#fromDate').datepicker('option', 'minDate', newDate );
$('#fromDate').datepicker('option', 'maxDate', selDate );
}
});
$("#toDate").datepicker('setDate', new Date());
} );
Refer Fiddle

datepicker in javascript date format DD/MM/YYYY

Am using a datepicker in my application.
code is :
this.$el.find('#ondate').datepicker({
minDate: 0,
maxDate: "+2M",
onSelect: function(x) {
self.startDepartureValidation();
return self.onDate(x);
},
// numberOfMonths: numberOfMonths,
beforeShow: function() {
return $('#ondate').datepicker("option", "maxDate", $("#returndate").datepicker('getDate'));
}
});
when i seklect the date am getting the format as MM/DD/YYYY but i need as DD/MM/YYYY in the textbox.
if i use the dateformat: in datepicker i will get that format but , with MM/DD/YYYY am having so many calculations in my application.
Note: i need just in datepicker textbox after seklecting date it should show in that textbox as DD/MM/YYYY. without changing in our code in other places

Add the dateFormat attribute to your code:
this.$el.find('#ondate').datepicker({
minDate: 0,
maxDate: "+2M",
dateFomat: 'dd/mm/yy', //Note that 'yy' is for four digits.
onSelect: function(x) {
self.startDepartureValidation();
return self.onDate(x);
},
// numberOfMonths: numberOfMonths,
beforeShow: function() {
return $('#ondate').datepicker("option", "maxDate", $("#returndate").datepicker('getDate'));
}
});
More details at the official documentation here.
The below snippet of code can help in converting date format:-
var ddMMyy = $("#ondate").val().split("/");
var mmDDyy = ddMMyy[1]+"/"+ddMMyy[0]+"/"ddMMyy[2];
alert(mmDDyy);
Working JSFiddle here.

jQuery datepicker doesn't update minDate

I have the following code:
$.ajax({
url: 'my_url',
type: 'GET'
}).done(function(data){
availableDates = data;
var min = availableDates[0].split('-');
var max = availableDates[availableDates.length - 1].split('-');
var minDate = new Date(min[0], min[1] - 1, min[2]);
var maxDate = new Date(max[0], max[1] -1, max[2]);
$('#id_date').datepicker({
beforeShowDay: available,
minDate: minDate,
maxDate: maxDate,
});
}).fail(function(){
console.log('some message');
});
It sets the minDate, maxDate and the available dates. All that works fine on the first go. After making the AJAX call again, I get different dates so I have to change the minDate and the maxDate.
The maxDate changes as expected, but the minDate changes only if the new minDate is later than the original minDate. It won't change to a day in the past in regards to the previous minDate.
Any ideas?

Why are your re-initializing the date picker
instead do following:
$( "#id_date" ).datepicker( "option", "minDate", minDate );
$( "#id_date" ).datepicker( "option", "maxDate", maxDate );

How to set the default date to two days from current date using date picker?

I went through many examples but Im not able to set the value of my date picker. The textbox value is shown as 01/01/2016 and the calendar opens to that date as well. Im trying to set the default date to two days from now in the text box as well as in the calendar that shows up on click.
I tried the following:
1.
$(".date-picker").datepicker().datepicker("setDate", new Date());
2.
$(".date-picker").datepicker().datepicker('setDate', '+2');
My HTML is:
<input type="text" class="input date-picker">
I agree this question has been repeated lots of times but I have tried most of the examples but still Im not able to make it work. Please advice.

The best way to do this is to extend the javascript date function using prototype
Date.prototype.addDays = function(days) {
this.setDate(this.getDate() + days);
return this;
};
Then simply call as follows:-
$(function() {
var currentDate = new Date();
var myDate = currentDate.addDays(2);
$(".date-picker").datepicker(); //initialise
$(".date-picker").datepicker('setDate', myDate); //set date
});
DONT FORGET you have to INITIALISE the datepicker - then set the date
JS Fiddle here

Initialize a datepicker with the defaultDate option specified.
$(document).ready(function () {
$(".date-picker").datepicker({
defaultDate: +2,
dateFormat: "mm/dd/yy"
});
});

http://jsfiddle.net/8ejbw8d5/
$( ".date-picker" ).datepicker({
defaultDate: +2
});
// Getter
var defaultDate = $( ".selector" ).datepicker( "option", "defaultDate" );
// Setter
$( ".selector" ).datepicker( "option", "defaultDate", +2 );
Read more here: http://api.jqueryui.com/datepicker/#option-defaultDate

Using jQuery to create two datepicker date-range instances

I have two date range forms. Each form has 2 fields, a from and to. In the javascript I have created two instances of the date range datepicker but for some reason, in the second date range form, it doesn't quite work right.
The first form works perfectly. But when I select a date in the from box in the second form, 9th October for example it displays that in the from box. When I then click into the to field in the second form, the furthest date I can select is 9th Oct for some reason?
I have a JS Fiddle below so you can see what is going on. I've searched around but I cannot find any working examples of two date-range forms. I can find a lot of default date pickers, but they're of course not date ranges and written different and the usual problem with them is people using the same IDs, however mine are all different so I don't get it..
JS Fiddle - http://jsfiddle.net/6jJ36/

Working Demo http://jsfiddle.net/fxr5c/
Culprit was: var option = this.id == "invfrom" ? "minDate" : "maxDate", line of code in your old code you had id wrong i.e. ivnfrom which inversed the behavior.
Rest this should help your cause :)
Code
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: 'dd/mm/yy',
onSelect: function (selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
var invdates = $("#invfrom, #invto").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: 'dd/mm/yy',
onSelect: function (selectedDate) {
var option = this.id == "invfrom" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
invdates.not(this).datepicker("option", option, date);
}
});