We Keep Coding

Trying to set min & max time date in jquery datepicker in two inputs

So I am working on a project for my classes and I had to set minimum and maximum date for two inputs. First one is being set from now to 12 months from now, and the other was meant to be set from date which was picked in the first input field to 12 months from now.
<p>From: <input type="text" id="dateFrom"></p>
<p>To: <input type="text" id="dateTo"></p>
this is my JS
var chosenDate = document.getElementById("dateFrom").value;
$( function() {
$("#dateFrom").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: '12M',
minDate: '0',
});
})
$( function() {
$("#dateTo").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: '12M',
minDate: chosenDate,
});
})
On the preview in a browser it works only for last session. How can I fix this?

you have to use change event on #dateFrom, so whenever the value of the input is changed,the minDate property of the datepicker event get the current input value
of #dateFrom
$("#dateFrom").change(() => {
$("#dateTo").datepicker("option", "minDate", chosenDate.value);
});
the final code should be like this:
var chosenDate = document.getElementById("dateFrom");
$(function() {
$("#dateFrom").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: "12M",
minDate: "0"
});
});
$(function() {
$("#dateTo").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
maxDate: "12M",
minDate: chosenDate.value
});
$("#dateFrom").change(() => {
$("#dateTo").datepicker("option", "minDate", chosenDate.value);
});
});
notice the chosenDate variable is now just the element not the value of the element

JQUI datepicker changing month or year resets after selecting

I'm experiencing an issue using the JQUI datepicker where I have a from and to text field. Picking a from date, auto selects the next field using the onClose function.
When trying to change the month or year from the drop down boxes in the to text field the datepicker popup gets reset and the user has to re-select the month or year. This only appears to happen on the to field.
Am I doing something wrong in the code to cause this behaviour? I've noticed this in Chrome and Firefox on Windows.
JS FIDDLE DEMO
CODE
$('#sfd_start').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
minDate: 0,
maxDate: "+2y",
dateFormat: "yy-mm-dd",
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
$('#sfd_end').focus();
}
});
$('#sfd_end').datepicker({
inline: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
maxDate: "+2y"
});
EDIT: There doesn't seem to be an issue if the datepicker is not auto opened after selecting a from date if that helps narrow it down.

Seems to be a timing issue. Change your onClose function to:
onClose: function (selectedDate) {
$('#sfd_end').datepicker('option', 'minDate', selectedDate);
setTimeout(function () {
$('#sfd_end').focus();
}, 100);
}
jsFiddle example

yearvalue option is not visible in the jquery datepicker

How we can display the date in dd-mm-yyyy format using jquery datepicker, I tried with the below code, however, the year option is not visible in the datepicker.
jQuery("#formComp1_date").datepicker({
minDate: new Date(1, 1, 1900),
maxDate: new Date(dayValue, monthValue, yearValue),
dateFormat: 'dd-mm-yyyy' ,
changeMonth: true,
changeYear: true,
yearRange:"-90:+0"
});
Thanks,
Balaji.

jquery datepicker daterange, specify start year

I'm using the date range with jquerydate picker.
<script>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("form").validationEngine();
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75'
});
});
</script>
The problem is then that the drop down box starts at 1936, where as I would like it to start at the other end of the scale. Can anyone help

You can use the defaultDate option: http://jqueryui.com/demos/datepicker/#option-defaultDate
jQuery(document).ready(function() {
// binds form submission and fields to the validation engine
// jQuery("form").validationEngine();
var myDate = new Date("March 21, 1997");
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-14:-75',
defaultDate: myDate
});
});
See on this jsfiddle

jQuery: Datepickerdate range

According to the documentation for the datepicker, the yearRange property determines the range shown in the dropdown (which using the code below is -10 years, +10 years from the currently selected date). Is there a way to change this to 80 years in the past, zero years in the future. Is there something else I need to do to increase the range of dates shown?
$('.datePicker, .datePicker').datepicker({
minDate: new Date(1930,1,1,0,0,0),
yearRange: '-80+0',
dateFormat: 'dd-mm-yy',
showOn: 'both',
direction: 'left',
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
buttonImage: '/Images/calendar_16.png' });

Try
yearRange: '-80:+0',
// ^