Menu
I'm trying to make a validation between 2 dates, startDate and endDate, 2 inputs using jquery, my code from js
$('#start').datepicker({
onSelect: function(selected) {
$("#end").datepicker("option", "minDate", selected)
}
});
$('#end').datepicker({
onSelect: function(selected) {
$("#start").datepicker("option", "minDate", selected)
});
HTML
<input type="text" class="form-control form-fixer noEmpty" value="" id="start">
<input type="text" class="form-control form-fixer noEmpty" value="" id="end">
when i try to debug it doesn't even enter into onSelect, don't know what am i doing wrong, thank you in advance for the help.
702
asked Oct 25 '25 05:10
The selected text string being passed to the onSelect function isn't in the proper format for jQuery UI datepicker minDate.
You can use the text to create a new Date() object from this string that will be supported type for minDate (here is the documentation).
Also, I believe that you probably want to be setting the maxDate option for the start date when the end date is selected (in your example, you are setting minDate in both instances)
Snippet:
$('#start').datepicker({
onSelect: function(dateText, inst){
$('#end').datepicker('option', 'minDate', new Date(dateText));
},
});
$('#end').datepicker({
onSelect: function(dateText, inst){
$('#start').datepicker('option', 'maxDate', new Date(dateText));
}
});div{
padding: 15px;
border: solid 2px steelblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div>Start: <input type="text" id="start" /></div>
<div>End: <input type="text" id="end" /></div>Try this: With this user wont be able to pick a date before the start date
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet"type="text/css"/>
<style>
.mySelect {
width: 300px;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
From:
</td>
<td>
<input type="text" id="txtFrom" />
</td>
<td>
</td>
<td>
To:
</td>
<td>
<input type="text" id="txtTo" />
</td>
</tr>
</table>
<script>
$(function () {
$("#txtFrom").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
numberOfMonths: 2,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFrom").datepicker("option", "maxDate", dt);
}
});
});
</script>
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
