I need a functionality which we should not be able to select (disable) the end date before the start date using javascript or jquery but without depending on any jquery-ui or datepicker plugins. Please help me in getting this, thanks in advance.
I have done online search but everything is dependent on other plugins, is there any chance to get it done without plugins.
<div class="row">
<div class="col-md-6">
<label for="startDate">Start date</label>
<input type="date" class="inputdata" id="startDate">
</div>
<div class="col-md-6">
<label for="endDate">End date</label>
<input type="date" class="inputdata" id="endDate">
</div>
</div>
CodePudding user response:
Date inputs have a min
attribute which specifies the minimum date you can select. Mozilla docs
$("#startDate").on("change", function(){
$("#endDate").attr("min", $(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<label for="startDate">Start date</label>
<input type="date" class="inputdata" id="startDate">
</div>
<div class="col-md-6">
<label for="endDate">End date</label>
<input type="date" class="inputdata" id="endDate">
</div>
</div>