Search code examples
javascriptjquery

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


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>


Solution

  • 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>