We Keep Coding

Set a datepicker maxDate from another datepicker

In my app I have a form with 3 datepicker objects; from, to, and apply_to. I tried in JavaScript to set the control input to and apply_to
$("#from").datepicker({
dateFormat: 'dd.mm.yy',
onSelect: function(selected) {
$("#to").datepicker("option","minDate", selected);
$("#apply_to").datepicker("option","maxDate", selected)
}
});
But I need to set maxDate in apply_to to the selected date minus one.
$("#apply_to").datepicker("option","maxDate", selected-1d)
But my code is not working.

In your onSelect, the selected parameter is a string so you must first convert it to a javascript date object, then subtract one day using setDate / getDate, and finally update the corresponding datepicker maxDate option
onSelect: (selected) => {
var pieces = selected.split('.');
var dt = new Date(pieces[2], parseInt(pieces[1])-1, pieces[0]);
dt.setDate(dt.getDate() - 1);
$("#to" ).datepicker( "option", "maxDate", dt);
}

why jquery-ui-datepicker accepts invalid values from keyboard

I am using jquery UI date-picker to get the date with min and max date range value, it's working on selecting the date using the date-picker widget, but it gets invalid values using the keyboard. I want to get the date by keyboard as well as mouse. Please help me to get valid date value or to show an error message of the invalid date value.
datepicker

You can use code as below :
<script type="text/javascript">
$(".datePicker").datepicker({
dateFormat: 'd/mm/yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
minDate: Date.parse("1900-01-01"),
maxDate: Date.parse("2100-01-01"),
yearRange: "c-90:c+150"
});
$(function () {
$.validator.addMethod(
"date",
function (value, element) {
// Here you can set date range
var minDate = Date.parse("1900-01-01");
var maxDate = Date.parse("2100-01-01");
var valueEntered = Date.parse(value);
if (valueEntered < minDate || valueEntered > maxDate) {
return false;
}
return !/Invalid|NaN/.test(new Date(minDate));
},
"Please enter a valid date!"
);
});
</script>

Jquery datepicker. 2 datepickers. Restrict range. Default date current date

I am using the jQuery Datepicker widget with two input boxes, one for the "From" date and the second with the "To" date. I am using the jQuery Datepicker but I need these additional restrictions:
Both "From" date and "To" date have to show current date highlighted in the calendar by default.
If a "To" date is selected first, then the "From" date can only be within the range of 31 days before the "To" date. If "From" date is selected first then "To" date can only be within the range of 31 days after "From" date. Rest of the dates should be disabled in either case.
I need the dates in dd-mm-yyyy format.

Please use the following code.
$( function() {
$("#fromDate").datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
onSelect: function(date, inst) {
var selDate = new Date(date);
var newDate = new Date(selDate.getFullYear(), selDate.getMonth(), selDate.getDate()+31);
$('#toDate').datepicker('option', 'minDate', selDate );
$('#toDate').datepicker('option', 'maxDate', newDate );
}
});
$("#fromDate").datepicker('setDate', new Date());
$( "#toDate" ).datepicker({
dateFormat: 'yy-mm-dd',
inline: true,
onSelect: function(date, inst) {
var selDate = new Date(date);
var newDate = new Date(selDate.getFullYear(), selDate.getMonth(), selDate.getDate()-31);
$('#fromDate').datepicker('option', 'minDate', newDate );
$('#fromDate').datepicker('option', 'maxDate', selDate );
}
});
$("#toDate").datepicker('setDate', new Date());
} );
Refer Fiddle

onselect is not working in jquery datepicker in AdminLTE-master template

$('#date_of_birth').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
yearRange:"-60:+0",
onSelect: function (date) {
alert("dateofbirth");
var dob = new Date(date);
var today = new Date();
var age = today.getFullYear() - dob.getFullYear();
$('.getage').val(age);
}
});
onSelect function is not working.I cant get the value of the date selected from the datepicker in AdminLTE-master template only.I can get the answer in some other template.

AdminLTE template doesn't use jQuery Datepicker. It uses bootstrap datepicker.
Please have a look at bootstrap datepicker documentation: https://bootstrap-datepicker.readthedocs.org/en/release/

Hidden value changed, datepicker will reload

I have a question on how to make sure whenever this hidden value changed, the datepicker will reload. Because the datepicker will used the hidden value to highlight the days. So whenever the hidden value changed, the highlighted days in datepicker also will change.
Here my code so far. $("#dates").val() is a hidden value. sample of the value is 2013/11/11-2013/11/17. This value will highlight the whole week (mon-sun). There's a previous and next button, which will changed the $("#dates").val() by week eg:
2013/11/18-2013/11/24, 2013/11/25-2013/12/1
I have no problem to trigger if the hidden value is changed, the problem is I want the datepicker to reload once the hidden value changed. so that the highlighted week while changed accordingly. currently whenever the hidden value change, the highlighted week will remain the same.
I did try to used $( "#datepicker" ).datepicker( "refresh" ); whenever the hidden value changed, but still no luck. Please help me. Thanks
$(document).ready(function() {
var dates = $("#dates").val();
var lt = dates.split("-");
var ts = lt[0].split("/");
var te = lt[1].split("/");
var date1 = new Date(ts[0], ts[1]-1, ts[2]);
var date2 = new Date(te[0], te[1]-1, te[2]);
$(function(){
$('#datepicker').datepicker({
dateFormat: 'yy/mm/dd',
beforeShowDay: highlightDays,
onSelect: function(dateText, inst) {
$("#showdaybtn").addClass("fcurrent");
$("#showweekbtn").removeClass("fcurrent");
$("#showmonthbtn").removeClass("fcurrent");
$('#type').val('1');
var p = $("#gridcontainer").swtichView("day").BcalGetOp();
if (p && p.datestrshow) {
$("#txtdatetimeshow").text(dateText);
$("#hdnTempData").val(dateText);
}
showhideToday('day');
glbView = "day";
}
});
function highlightDays(date) {
if (date >= date1 && date <= date2) {
return [true, 'highlight', 'tooltipText'];
}
return [true, ''];
}
});
});
//to check if the hidden value changed
$(document).on('change', '#dates', function () {
$( "#datepicker" ).datepicker( "refresh" );
});