0

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

1 Answers1

1

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>
Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • That worked exactly, thank you. Need another small help, how can I restrict the start date should start from the current date ? – user10742586 Oct 14 '21 at 07:53
  • You can use `let d = new Date()` and `d.getFullYear(); d.getMonth()+1; d.getDay()` to make a date string from the current date. – Liftoff Oct 14 '21 at 07:59
  • Note that the `min` attribute must be in the correct format (yyyy-mm-dd) which you can get using `toISOString()` - see https://stackoverflow.com/a/29774197/2181514 `new Date().toISOString().split("T")[0]` – freedomn-m Oct 14 '21 at 08:07
  • Ok but how can I assign this to my **startDate id** to get the start date should be selectable from today ? – user10742586 Oct 14 '21 at 08:07
  • Same way as you do to the end date... `$("#startDate").attr("min", new Date().toISOString().split("T")[0]);` – freedomn-m Oct 14 '21 at 08:10