Search code examples
javascripthtmldatepickerbootstrap-5

bootstrap 5 datepicker set as default current date and dont let set a past one


I found and refactor this code to use a datepicker with bootstrap 5, now i want to set as default the current date but I can't figure how to do that.

this is my code:

<div class="form-group">
  <label for="startDate">Start</label>
  <input id="startDate" class="form-control" type="date" />
</div>

and the script to handle it

<script>

        
     let startDate = document.getElementById('startDate')
     let endDate = document.getElementById('endDate')

     startDate.addEventListener('change',(e)=>{
     let startDateVal = e.target.value
     document.getElementById('startDateSelected').innerText = startDateVal
     })

     endDate.addEventListener('change',(e)=>{
     let endDateVal = e.target.value
     document.getElementById('endDateSelected').innerText = endDateVal
     })  
</script>

how could I set as default the current date and also don't let user to pick a past date as today?


Solution

  • Try something like this:

    window.onload = function () {
      const myDate = document.getElementById("startDate");
      const today = new Date();
      myDate.value = today.toISOString().slice(0, 10);
    };