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

Limit the minimum year in DatePicker selection

I'm using jQuery DatePicker to select a date on my form. I want to limit the years in that calendar in such a way that it will display the years from 1900 and up.
I tried this code:
$('#' + CalenderId).datepicker({
format: "dd/mm/yyyy",
autoclose: true,
changeMonth: true,
changeYear: true,
yearRange: '1900:+0'
});
But it still shows the year earlier than 1900:
Is there any other way available to limit this?

startDate: '-30y',
endDate: '+0y'
This will help you to restrict year
eg: if current year is is 2020 then
it will allow to select start year as 2020-30 = 1990
and end year as 2020
here is the code:
$("#year").datepicker({
autoclose: !0,
yearHighlight: !0,
format: "yyyy",
viewMode: "years",
minViewMode: "years",
startDate: '-30y',
endDate: '+0y'
})

The yearRange is only for the list of years. To limit the entered date itself, you need to use minDate and maxDate. Example:
yearRange: "-150Y:-10Y",
minDate: "-150Y",
maxDate: "-10Y",
Using yearRange: "1900:+0" will only give you years 1900+.

Can jQuery datepicker select more than 10 years ago? [duplicate]

This question already has answers here:
Can I make the jQuery datepicker display more year when using the changeYear option?
(2 answers)
Closed 5 years ago.
I'm trying to use jQuery-UI's datepicker to select a birthday, however it only allows me to go back 10 years, i.e. I cannot have users that are older than 10 years :)
I tried to set the minDate as follows:
<script>
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
//minDate: "-100Y",
minDate: new Date(1971, 2 - 1, 26),
maxDate: "+1D" // this works.
});
} );
</script>
However I couldn't manage to make it work, the earliest possible selection is always 2007. -How- can I go further back?
Thanks,

It does go further back, it's just that the dropdown for years is limited to ten years by default.
You can set this using the yearRange option
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
//minDate: "-100Y",
minDate: new Date(1971, 2 - 1, 26),
maxDate: "+1D",
yearRange: '1971:2017',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="datepicker"></div>

You can use YearRange...
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
//minDate: "-100Y",
minDate: new Date(1950, 2 - 1, 26),
maxDate: "+1D" // this works.
});

How to change year range in jquery DateTimePicker?

I am using jquery DateTimePicker plugin and I have to change year range form 2008 to 2018.I am using this plugin, Please help me in this.
jQuery('#datetimepicker1').datetimepicker({
timepicker:false,
format:'d-m-Y',
changeMonth: true,
changeYear: true,
yearRange: '2008:2018'
});

Try following code.
$('#datetimepicker').datetimepicker({
timepicker:false,
format:'d-m-Y',
changeMonth: true,
changeYear: true,
yearStart : '2008',
yearEnd :'2018'
});

You can try yearEnd: 2018,yearStart: 2008.

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