Develop Reference

jquery ui datepicker - how to set two min/max date restrictions in one datepicker?

I am using the jquery ui datepicker with select date range. I know that by default it already set if the from picks a date then the to date can not pick any date before the from date picked. I also checked the minDate and maxDate documents but I still couldn't try figuring it out.
I want to keep the default setting it has which is after date from is chosen date to cannot be before the from date vise versa but also want to add another restriction which is both datepickers have a maxDate of 0 which is today. None of them can be picked pass today.
This is pretty much just the standard.
$( "#date-from-field" ).datepicker({
onClose: function( selectedDate ) {
$( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#date-to-field" ).datepicker({
onClose: function( selectedDate ) {
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate );
}
});
I tried adding these two but none of them works though
$( "#date-from-field" ).datepicker({maxDate: "0"});
$( "#date-from-field" ).datepicker({maxDate: "+0m +0w"});
but none of them work though.
Thank you in advance.

Alright so pretty much you need to check if the selectedDate is empty when date-to-field is updated and make the maxDate to "0". Once you do it should act as you wanted, it'll set the max to today's date or if the date of the from if it's not todays date. Here's a codepen that works for me - CodePen.
$("#date-from-field").datepicker({
onClose: function( selectedDate ) {
$( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
},
maxDate: "0"
});
$("#date-to-field").datepicker({
onClose: function( selectedDate ) {
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? selectedDate: "0" );
},
maxDate: "0"
});
EDIT
Updated the CodePen a bit more so that it checks if the selected date is greater than todays date.
$("#date-to-field").datepicker({
onClose: function( selectedDate ) {
var possibleDate = new Date(selectedDate);
possibleDate = (possibleDate < new Date())?possibleDate: new Date();
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? possibleDate: "0" );
},
maxDate: "0"
});

You can refer to this link : http://api.jqueryui.com/datepicker/#option-maxDate
This is to Initialize the datepicker with the maxDate option specified, not to set it up afterwards:
$( ".selector" ).datepicker({
maxDate: "+1m +1w"
});
To modify/get the option, use this:
Get or set the maxDate option, after initialization:
// Getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
// Setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );
"+0" is for now()
Same for mindate!

How to disable previous dates on the TO calendar?

This is the script I am using. What changes to be done?
$( "#from" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
$( "#to" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3

I fixed it :-
Have to add this code in $( "#from" ).datepicker
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "maxDate", selectedDate
Have to add this code in $( "#to" ).datepicker
onSelect: function( selectedDate ) {
$( "#toDateRange" ).datepicker( "option", "minDate", selectedDate

Do:
var today = new Date();
var yesterday = new Date(today.getFullYear(),today.getMonth(),today.getDate()-1)
then add below property in your to date picker function
minDate : yesterday

Here is complete to code for that
var dateToday = new Date();
$(".datefrom" ).datepicker({
dateFormat: 'dd/mm/yy',
minDate: dateToday,
onClose: function( selectedDate ) {
$( ".dateto" ).datepicker( "option", "minDate", selectedDate );
},
onSelect: function(selectedDate) {
var option = this.class == "datefrom" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
}
});
$(".dateto" ).datepicker({
dateFormat: 'dd/MM/yyyy',
onClose: function( selectedDate ) {
$( ".datefrom" ).datepicker( "option", "maxDate", selectedDate );
}
});
$('.datefrom,.dateto').change(selector)
It will disable the previous date in from calender and according to the selection done in from calender the to calender will get updated automatically and disabled previous date..

Click button to load set daterange using Datepicker instead of new Date();

I have a working range selection using the basic Jquery UI date range from the UI website.
HTML
<button id="week">Past Week</button><br />
<label for="from">From</label>
<input type="text" id="from" name="from" value"">
<label for="to">to</label>
<input type="text" id="to" name="to" value"">
JQ
$( "#from" ).datepicker({
defaultDate: "+1w",
dateFormat: 'MM d, yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
dateFormat: 'MM d, yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
I also need to include a button for automatically selecting the previous 7 days from the current date. I've used the new Date(); method to achieve a 'working' version (no date formating at the moment).
$( "#week" ).click(function() {
var today = new Date();
var lastweek = new Date(new Date().setDate(new Date().getDate()-7));
$( "#from" ).val(lastweek);
$( "#to" ).val(today);
});
However I'd prefer to use the datepicker function to achieve the previous week range, and I cannot figure out how to achieve that (if its even possible). Primary reason being that if a user chooses the "Prev Week" button option, then selects a new date, I want the existing date to be selected on the calendar widget.
I have this in a jsfiddle http://jsfiddle.net/lopac1029/RuhWj/

Boom boom boom. Another related question was offered to me in the sidebar after posting, and I was able to use that as a basis to figure out this:
$( "#week" ).click(function() {
var today = new Date();
var from = new Date(today.getTime());
from.setDate(from.getDate() - 7);
$("#to").datepicker("setDate", today);
$("#from").datepicker("setDate", from);
});
jsfiddle updated
Thanks for always being there for me, stackoverflow.

Disable selection jQuery Datepicker field?

I'm using jQuery UI Datepicker to make a two field submission form. I want the user to create a range and submit it to see results. However, they obviously cannot pick a start date that happens more recently than an end date (you can't see a range starting today and going to yesterday).
As of now, I've been able to put an alert on selection of the second one if the first one happened before it, but I can't figure out how to have the datepicker stay open so the user can select something else.
Here is the code I have so far:
<script>
$(document).ready(function() {
$(".datepicker_start").datepicker({
maxDate: '+0d',
onSelect: function(dateText, inst) {
}
});
$(".datepicker_to").datepicker({
maxDate: '+0d',
onSelect: function(dateText, inst) {
var startDate = $('.datepicker_start').val();
$(this).attr('value', dateText)
if (startDate > dateText) {
alert('not cool!');
}
}
});
});
</script>
Does anyone know how I'd do this? I tried returning false but it still pushes the incorrect date to the field :(

$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate);
}
});
});
From: http://jqueryui.com/demos/datepicker/date-range.html

$(function () {
$("#fromdate").datepicker({
onClose: function (selectedDate) {
$("#todate").datepicker("option", "minDate", selectedDate);
}
});
$("#todate").datepicker({
onClose: function (selectedDate) {
$("#fromdate").datepicker("option", "maxDate", selectedDate);
}
});
});

Date formatting (jQuery datepicker)

I want to change the date format from mm/dd/yyyy to dd/mm/yyyy.
After the date picker performs its action, I want the dd/mm/yyyy to display
in the text box.
<script>
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
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 );
}
});
});
</script>

Try this:
$('#from, #to').datepicker({ dateFormat: 'dd/mm/yyyy' });
it can help you...

.datepicker({ dateFormat: 'dd-mm-yy' })
using dateFormat option you can change the format of date,rest whatever option you want you can provide it