We Keep Coding

jquery datepicker set initial date

I need to set the initial date on jquery-ui datepicker initialization, so i tried with defaultDate field:
$('#first').datepicker({
defaultDate: '12/04/2018',
dateFormat: 'dd/mm/yy',
});
but no luck: DEMO
according to the API for defaultDate i can use:
a string in the format defined by the dateFormat option, or a relative
date
so, what i'm missing? is it a jquery bug or what?
PS: i know i can setDate after initialization:
$('#second').datepicker({
dateFormat: 'dd/mm/yy',
}).datepicker("setDate", '12/04/2018');
but that's not what i need. Any idea?

You can add a value to input field, and it will act like defaultDate and setDate at the same time
$('#some_input_element').val('12/04/2018').datepicker({
dateFormat: 'dd/mm/yy',
});
I have updatet your jsfiddle as fourth input element

Display specific month on datepicker without changing selected date

i'm using two datepickers to select range of dates, and I have the following problem:
When i select "start date" on datepicker I, I update minDate on the second one (analogously when selecting "end date" I update maxDate on the first one).
The problem is, that updating maxDate or minDate causes refreshing of datepicker.
So, for example if someone was browsing months on datepicker II and then selects some date on datepicker I then datepicker II will refresh and display goes back to last selected date on datepicker II, instead of staying at month user was browsing.
I already know the way to find out which month was last displayed on datepicker - by using "onChangeMonthYear" option.
The question is how to force datepicker to navigate to month I want (without actually changing selected date).
I'd really appreciate any help or suggestions.
Code, as requested. I'm using AngularJS, but I guess you can easily see how this would be translated into JQuery:
scope.fromDate.onChangeMonthYear = function(year, month){
//saving info about date I
};
scope.toDate.onChangeMonthYear = function(year, month){
//saving info about date II
};
scope.fromDate.onSelect = function(selectedDate) {
element.find(".date-to").datepicker("option", "minDate", selectedDate);
};
scope.toDate.onSelect = function(selectedDate) {
element.find(".date-from").datepicker("option", "maxDate", selectedDate);
};

according to jquery ui datepicker api reference:
// getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
// setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
this should be used after the initialization, without reseting the datepicker

How to make all future dates non-clickable

I want to disable all future dates in the calendar after today. Today's date is highlighted in Yellow (Feb 23rd 2012)in the diagram below. All the other future dates should be non clickable. How can i do that ?
For instance 24th,25th.... etc should not be clickable
Note:
$('.datepicker').BlackoutDates.Add(new CalendarDateRange(DateTime.Now.AddDays(1), DateTime.MaxValue)); doesn't work

If you are using JQuery UI datepicker calandar, use maxdate method : http://api.jqueryui.com/datepicker/#option-maxDate
$( ".selector" ).datepicker({ maxDate: new Date() });
new Date() corresponds to the current date
demo : http://jsfiddle.net/UQTY2/21/

if the datepicker wizard has already been initialized on the input, you can also use:
$( ".selector" ).datepicker("option", {maxDate: "+0D" });
That should also work when a day ends and a new day starts after the datepicker has been initialized.

Prevent date selection in the past

How do we prevent the datepicker from picking a date in the past?
I used the following:
$("#Date").datepicker({ minDate: '0' });
$("#Date").datepicker({ minDate: new Date() });
but I can still select a date in the past.

aparently this is the way
$("#datepicker").datepicker({ minDate: 0 });
remove the quotes from the 0

Have you tried using the mindate and maxdate parameters?
JSFiddle here.
Take a look at the documentation and have a play with it.

jquery datepicker year range default

Having a bit of an issue with the JQuery datePicker, I suspect it's just the matter of a setting I've overlooked or got wrong.
If you look at this simple fiddle: JS Fiddle
You'll see I've set the year range, so that the by default when you click on the input it will open it up on 1994, but if you then click on any of those dates, e.g. 3rd Sept, it'll actually put it in the input as 2012 still, rather than the year that is selected in the drop down menu.
How can I make it so that it uses the correct year without having to change the drop down and then change it back again?
Cheers.

As others have suggested, you have to set the defaultDate. However, unlike the other solutions, you don't want to hardcode the date since your dropdown list will be updating as the years pass since you're doing a relative list.
Try this instead...
function loadDatePicker() {
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true,
yearRange: "-18:-12",
defaultDate:"-18y-m-d" // Relative year/month/day
});
}

Weird, but adding defaultDate:"1994-01-01" to the datepicker options seems to fix it.
Fiddle

I think I got the reason..
It is because yearRange: just restrict the range in dropdown menu only.
It just change the list nothing else.
They mansion this over here..
http://jqueryui.com/demos/datepicker/#option-yearRange
[Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.]
To Prove this .. set date picker as below and you will find all date disable.
because it sawing us the calander of 2012 not 1994
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true,
yearRange: "-18:-12",
maxDate: new Date(2012,1-1,1)
});
To fix it you have to use defaultDate as well as minDate and maxDate
i hope i am clear