Checking startDate and endDate
I am trying to make validation between 2 dates, startDate and endDate, 2 inputs using jquery, my code is 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 it doesn't even come in onSelect
, dont know what i am doing wrong, thanks in advance for help.
source to share
The text string selected
passed to the function onSelect
is not in the jQuery UI datepicker format minDate
.
You can use text to create a new object Date()
from this string that will be supported for minDate
( here is the documentation ).
Also, I believe you probably want to set a parameter maxDate
for the start date when the end date is selected (in your example, you are setting minDate
in both cases)
Excerpt:
$('#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>
source to share
Try this: With this user, it will not be possible to select 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>
source to share