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!

select by default previous date with jquery calendar

I have datepicker codes below to display me calendar, the current date is selected by default, i would like to select the previous date by default instead (the day before today). I have tried but i failed anybody can help me please?
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
});

I finally resolved my issue this way
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val();
$("#datepicker").click(function() {
date = new Date();
date.setDate(date.getDate()-1);
$( "#datepicker" ).datepicker( "setDate" , date);
});
});

Try this:
$(".datepicker").datepicker("setDate", -1)
More info: http://api.jqueryui.com/datepicker/#method-setDate

Validation in Jquery datepicker

I want to set maximum limit in JQuery Datepicker so that the user can't pick date after current date. Currently I'm using http://jqueryui.com/datepicker/ plugin.
How to set maximum limit in JQuery datepicker ?

you can validate by Jquery
$(document).ready(function(){
if($("#datepicker").val() == ''){
alert("Please Select Your date");
}
});

try this- just in the datepicker function you are using pass these parameters
$("#date").datepicker({
onSelect: function(selectedDate) {
$( "#date1" ).datepicker( "option", "maxDate", selectedDate);
}
});

Try
option-maxDate
Working Demo
$("#date").datepicker("option","maxDate",0);
or
$("#date").datepicker("option","maxDate",new Date());
Working Demo
$(function () {
$("#date").datepicker({
maxDate: 0
});
});

$("#date").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: "+30M",
});
fore more look here

Setting minimum date to date picked in previous datepicker

I have two date pickers. A startdate and an enddate.
The way I have the code set up is that the second datepicker won't be initiated until the first one has been changed. The enddate datepicker is initialized with the current date on startdate. The only problem is that if you change the time on the first datepicker it doesn't refresh the mindate on enddate.
$(function(){
$( "#startdate" ).datepicker({ minDate: currentTime });
//When the startdate changes change the mindate for the enddate picker
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
$("#enddate").datepicker({ minDate: startTime });
});
//$( "#enddate" ).datepicker({ minDate: currentTime });
});

You will need to use the option method as described in the documentation (http://jqueryui.com/demos/datepicker/#method-option) to update the minDate option of an already initialized widget:
$( "#startdate, #enddate" ).datepicker({ minDate: currentTime });
$('#startdate').change(function () {
var startTime = ($("#startdate").val());
$("#enddate").datepicker('option', 'minDate', startTime);
});
Notice I put a var statement in-front of the startTime variable so it will be declared in the local scope of the event handler. Also both Datepickers get initialized strait-off and then the #enddate widget gets an updated minDate option each time the #startdate element is changed.
Here is a demo: http://jsfiddle.net/VP25m/

EDIT: Try using the refresh() function on datepicker:
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
$("#enddate").datepicker({ minDate: startTime });
$("#enddate").datepicker('refresh');
});
OLD ANSWER BELOW:
You will probably want to set the end date datepicker to a variable so you can destroy and re-initialize it when the start date changes.
$( "#startdate" ).change(function (){
startTime = ($("#startdate").val());
if($("#enddate").datepicker("enabled")) {
endDatePicker.datepicker( "destroy" );
}
var endDatePicker = $("#enddate").datepicker({ minDate: startTime });
});

Use datepicker's onSelect event instead of change event of textbox. In this event you get the selected date as the first argument which you can use to set as minDate of enddate datapicker.
$( "#startdate" ).datepicker({
minDate: currentTime,
onSelect: function(date){
//if the datepicker is not initialized
$("#enddate").datepicker({ minDate: date });
//if the datepicker is already initialized
$("#enddate").datepicker("option", "minDate", date);
}
});
Demo
Reference: http://jqueryui.com/demos/datepicker/#event-onSelect

JQuery Mobile UI DatePicker Change Date Format

I am trying to change the date format in the JQM UI Datepicker.
It's got an input which display's the dates as you change them.
I need it to display in dd/mm/yyyy format.
Can anyone help please?
UPDATE:
I'm trying this, but nothing's changing:
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script language="javascript">
$(document).ready(function() {
$.datepicker.formatDate('dd/mm/yyyy'); //ADDED HERE
$("input[type='submit']").click(function(e) {
e.preventDefault();
});
});
</script>

Try this $.datepicker.formatDate('dd/mm/yyyy');
More reference here

Change the "jquery.ui.datepicker.mobile.js" file
add date format: dateFormat: "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});