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

how to change date related to another date input without select event in datepicker

i have two inputs #date and #date2 and i was in the edit page..so date
come from database . i want if someone click in #date2 input the popup
date picker window hide all dates before #date input.how to do this without use select event in the first input?
example : input date 08/04//2014
input date2 should be 08/04/2014
//// stat date
$("#date").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
onSelect: function(selectedDate) {
$("#date2").datepicker("option", "minDate", selectedDate);
}
});
/// end date
$("#date2").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
minDate: // first input date value will be here //
});

I think it can be helpful for you! Try this
$("#date2").datepicker({
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear: true,
minDate: $('#date').val(),
onSelect:function(date){
var start_date = new Date($('#date').val());
var end_date = new Date(date);
if(start_date > end_date ){
alert('date start should be less than date end');
$(this).val('');
//$('#date').val(''); // add if you want
}
}
});

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

Jquery function not working on the first click

i have added function for datepicker. but my date picker is not open on the first click.
here is my jsp code..
To
here is my query functions..
function addDate(idName) {
$(idName).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
}function addTime(idName) {
$(idName).timepicker({`
ampm: true,
timeFormat: "hh:mmtt"
});
}
please help me.. thanks.

DatePickers and TimePickers are assigned to focus events automatically. You do not need to call $(object).datepicker() every time, just at initialization and it will open properly when focused.
A good approach is to assign the .datepicker class to every object you want to have the DatePicker assigned and, then, assign the DatePicker to all elements of that class.
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat: "dd/mm/yy"
});
});
Do the same thing with TimePickers.

Try this bellow and i don know what language your using?
#Html.TextBoxFor(model=> model.Filters.EndTime,new { #class = "date" })
$('.date').datepicker({ dateFormat: "yy/mm/dd", maxDate: '+0d', minDate: '-600d'});
above code is written in asp.net mvc

You need to call
addDate(idName)
on document ready like this
$(function() {
addDate(idName)
});

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.