Develop Reference

Disable future dates after today in Jquery Ui1.8.9 [duplicate]

Is it possible to disable future date from today?
Let say today is 23/10/2010, so 24/10/2010 onwards are disabled.
Sorry I am very new in jQuery and JavaScript.

Yes, indeed. The datepicker has the maxdate property that you can set when you initialize it.
Here's the codez
$("#datepicker").datepicker({ maxDate: new Date, minDate: new Date(2007, 6, 12) });

$(function() { $("#datepicker").datepicker({ maxDate: '0'}); });

Try This:
$('#datepicker').datepicker({
endDate: new Date()
});
It will disable the future date.

you can use the following.
$("#selector").datepicker({
maxDate: 0
});

Code for Future Date only with disable today's date.
var d = new Date();
$("#delivdate").datepicker({
showOn: "button",
buttonImage: base_url+"images/cal.png",
minDate:new Date(d.setDate(d.getDate() + 1)),
buttonImageOnly: true
});
$('.ui-datepicker-trigger').attr('title','');

Date for the future 1 year can be done by
$('.date').datepicker({dateFormat: 'yy-mm-dd', minDate:(0), maxDate:(365)});
you can change the date format too by the parameter dateFormat

http://stefangabos.ro/jquery/zebra-datepicker
use zebra date pickers:
$('#select_month1').Zebra_DatePicker({
direction: false,
format: 'Y-m-d',
pair: $('#select_month2')
});
$('#select_month2').Zebra_DatePicker({
direction: 1, format: 'Y-m-d',
});

Yes, datepicker supports max date property.
$("#datepickeraddcustomer").datepicker({
dateFormat: "yy-mm-dd",
maxDate: new Date()
});

$('#thedate,#dateid').datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-100:+0",
dateFormat:"dd/mm/yy" ,
maxDate: '0',
});
});

how can i open auto datepicker range departure

sorry my question maybe is too esay but i am not understand javascript. i have a range datepicker. arrival-departure. i want to when i selected arrival auto open departure picker. here is my js code.
$('#arrival').datetimepicker({
useCurrent: false,
format: 'DD/MM/YYYY',
minDate: 'now'
});
$('#departure').datetimepicker({
useCurrent: false,
format: 'DD/MM/YYYY',
minDate: 'now'
});
$("#arrival").on("change.datetimepicker", function (e) {
$('#departure').datetimepicker('minDate', e.date);
});
$("#departure").on("change.datetimepicker", function (e) {
$('#arrival').datetimepicker('maxDate', e.date);
});

You can use the onShow() callback with setOptions() to set the min and max dates on the datetimepicker on the fly.
A few other things I noticed:
e.date is undefined so I used the .val() of the date time picker for the dates.
Also your format was off you are doubling month names and days and quadrupling years. So I set it to format 04/May/2018 format in the below example.
I also set the max date on the arrival picker (to the departure time) if the departure is set, otherwise there is now max.
$('#arrival').datetimepicker({
useCurrent: false,
format: 'd/M/Y',
onShow: function(ct) {
this.setOptions({
minDate: "now",
maxDate: $('#departure').val() ? new Date($('#departure').val()) : false
})
}
});
$('#departure').datetimepicker({
useCurrent: false,
format: 'd/M/Y',
onShow: function(ct) {
this.setOptions({
minDate: new Date($('#arrival').val())
})
}
});
$("#arrival").on("change.datetimepicker", function(e) {
$('#departure').datetimepicker("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
arrive <input id="arrival" type="text">
depart <input id="departure" type="text">

How to show a date format in Jquery ui datepicker?

When I select jquery ui datepicker. It does not show the datepicker. It shows like November/Wednesday/YYYY h:11 A. but I want ex : 11/17/2016 5:51 PM. please help me with it.
$('#start-date').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: {touchonly: false},
timeFormat: "h:mm TT",
minDate: 0,
dateFormat: 'MM/DD/YYYY h:mm A',
onSelect: function(date) {
console.log('date :' + date);
console.log('id :' + this.id);
if (this.id == "start-date") {
var endDate_picker = $("#end-date");
var minDate = moment(date,"MM/DD/YYYY h:mm A");
var endDate = moment(moment(minDate).toDate()).add('hours', 2);
if ((endDate_picker.val() == "")||
(moment(endDate_picker.val(),"MM/DD/YYYY h:mm A").toDate()) < minDate.toDate()) {
$(endDate_picker).datetimepicker("setDate", endDate.toDate());
console.log('set date :' + endDate.toDate());
}
$(endDate_picker).datetimepicker("option", "minDate", minDate.toDate());
}
}
});

You just need to change the dateFormat: 'MM/DD/YYYY h:mm A', with your desired format.
Please, check this link to see which options you can set for the DATE, and this one for the TIME (Formatting tab)
To get 11/17/2016 5:51 PM, if you're using bootstrap datetimepicker, you should use something like this:
format: 'm/d/Y h:i A',
If you tell us which library are you using for the datetimepicker we can help you better.
EDIT: Please check this JSFiddle I did for you. (Using Bootstrap DateTimePicker)

Set datepicker startDate jQuery

I am not able to set the startDate parameter to a datePicker.
I was trying to look for a solution and came up with nothing that works.
What i need is to set default value to the datePicker (1/1/1970) and when I click it I want it to show me the date of today.
This is what I came up with, although it's not working:
$(".from-date").datepicker( "setDate" , "1/1/1970" );
$(".from-date").datepicker("option", { startDate: "1/1/2015" } );
What am I doing wrong?

Use this Demo here
$('.datepicker').datepicker();
$('.datepicker').datepicker('setDate', '1/1/1970');
$('.datepicker').click(function(){
var myDate = new Date() ;
$('.datepicker').datepicker('setDate', myDate);
});

You should set your date first as default date and on textbox selection fire jquery for change default date of datepicker and set today's date as default date
$('.datepicker').datepicker();
$('.datepicker').datepicker('setDate', '1/1/1970');
$('.datepicker').click(function(){
var myDate = new Date() ;
$('.datepicker').datepicker('setDate', myDate);
});
Here Is Fiddle

You can put a minDate in the datePicker that will disable all the dates before this minDate.
Find the Fiddle
$(function() {
var todayDate = new Date();
//$('.datepicker').datepicker();
$( ".datepicker" ).datepicker({
minDate:"01/01/1970"
});
$( ".datepicker" ).datepicker("setDate", todayDate);
});

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