Datetimepicker Validation

Question

1. Purchase Date and dates before Purchase Date disabled while selecting Installlation date

2.same as Installlation date and dates before Start Date disabled while selecting Expire date

Means If I select Purchase Date 3/28/2017 then Installlation date shcalender should disable before 3/28/2017 same as expaire date should disable before the selection of installation date

Note: is there any other javascript code you have that will be consider

 

Thanks 

 

<script src="~/Content/assets/bootstrap3-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>    

<script src="~/Content/assets/bootstrap-daterangepicker/daterangepicker.js"></script>    

<script src="~/Content/assets/mjaalnir-bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

 

 

 

View Code:

<div class="form-group">                       

<label class="col-sm-2 control-label" for="purchase-date-input"><b>Purchase Date:b>label>

<div class="col-sm-10">                           

<input id="purchase-date-input" name="Conf_Pur_Date" type="datetime" placeholder="ddmmyyyy" class="form-control align-validation" value=@Model.Conf_Pur_Date>

<span class="help-inline">                               

@Html.ValidationMessageFor(Model => Model.Conf_Pur_Date, "", new { @class = "validation-error" })                           

span>div></div>                   

<div class="form-group">                       

<label class="col-sm-2 control-label" for="install-date-input"><b>Install Date:b>label>                       

<div class="col-sm-10">                           

<input id="install-date-input" name="Conf_Inst_Date" type="datetime" placeholder="ddmmyyyy" class="form-control align-validation" value=@Model.Conf_Inst_Date>

<span class="help-inline">                               

@Html.ValidationMessageFor(Model => Model.Conf_Inst_Date, "", new { @class = "validation-error" })                           

span>div>div>                   

<div class="form-group">                       

<label class="col-sm-2 control-label" for="expire-date-input"><b>Expire Date:b>label>                       

<div class="col-sm-10">                           

<input id="expire-date-input" name="Conf_Exip_Date" type="datetime" placeholder="ddmmyyyy" class="form-control align-validation" value=@Model.Conf_Exip_Date>                           

<span class="help-inline">                               

@Html.ValidationMessageFor(Model => Model.Conf_Exip_Date, "", new { @class = "validation-error" })                           

span>div>div>

JavaScriptCode:

$('#purchase-date-input').datetimepicker({     
icons: {         
time: 'icon ion-ios7-clock-outline',         
date: 'icon ion-ios7-calendar-outline',         
up: 'icon ion-ios7-arrow-up',         
down: 'icon ion-ios7-arrow-down'     
},    
onSelect: function (selected) {         
var dt = new Date(selected);                
dt.setDate(dt.getDate() + 1);         
$("#install-date-input").datepicker("option", "minDate", dt);     
} });

$('#install-date-input').datetimepicker({         
icons: {             
time: 'icon ion-ios7-clock-outline',             
date: 'icon ion-ios7-calendar-outline',             
up: 'icon ion-ios7-arrow-up',             
down: 'icon ion-ios7-arrow-down'         
},         
onSelect: function (selected) {             
var dt = new Date(selected);                         
dt.setDate(dt.getDate() - 1);             
$("#purchase-date-input").datepicker("option", "maxDate", dt);        
}     
}); 
 
$('#expire-date-input').datetimepicker({         
icons: {            
time: 'icon ion-ios7-clock-outline',             
date: 'icon ion-ios7-calendar-outline',             
up: 'icon ion-ios7-arrow-up',             
down: 'icon ion-ios7-arrow-down'        
},
 
onSelect: function (selected) {         
var dt = new Date(selected);         
dt.setDate(dt.getDate() - 1);         
$("#Install-date-input").datepicker("option", "maxDate", dt);     
}
   
});