Home > Enterprise >  How to restrict the selection of end date before the start date in javascript / jquery
How to restrict the selection of end date before the start date in javascript / jquery

Time:10-14

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>

  • Related