MVC validate bootstrap date time picker

Dorababu Meka

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
From Date
@Html.TextBoxFor(m => m.FromDate, new { @class = "form-control", @tabindex = "2" })
@Html.ValidationMessageFor(m => m.FromDate, "", new { @class = "label-danger" })
div>
div>
div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
To Date
@Html.TextBoxFor(m => m.ToDate, new { @class = "form-control", @tabindex = "2" })
@Html.ValidationMessageFor(m => m.ToDate, "", new { @class = "label-danger" })
div>
div>
div>

I need to validate like to date should be greater than or equal to from date, or if user select from date I need to block all the dates which are less than to date. I tried the following code to disable the dates before from date, but it is not working

$("#FromDate").on("change.dp", function (e) {
$("#ToDate").datepicker("option", "minDate", e.date);
});

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Shraddha Patel6y ago
You can try this function:

var startdate = new Date();

startdate.setDate(startdate.getDate());

$('#ToDate').datepicker({

startDate: startdate

});
Dorababu Meka10y ago
It is working on the fiddle but when I am integrating it my application it is not working well as expected
$('#FromDate').datepicker({
format:"dd/mm/yyyy",
autoclose:true,
onSelect:function(dateText,inst){
$("#datepicker2").prop('disabled',false);
$("#datepicker2").datepicker({minDate:dateText});
}
})
Milan Prajapati10y ago
http://jsfiddle.net/ZL2Bc/2169/
here is the updated jsfiddel.
Milan Prajapati10y ago
First of all you have to select date from daterangepicker1 and then select datarangepicker2.
Dorababu Meka10y ago
Hi Ifour milan the given fiddler is not working are u missing any references? When I enter in to datepicker2 I couldn't see any date picker control coming
http://jsfiddle.net/ZL2Bc/2168/
Milan Prajapati10y ago
Try this....
$(function() {
$("#FromDate").datepicker({
onSelect: function(dateText, inst) {
$("#ToDate").datepicker({ minDate: dateText});
}
});

});
it'll disabale past dates.

you can check related on jsfiddle @ http://jsfiddle.net/ZL2Bc/2166/