How to set the default as today for input type html

November 29, 2022

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>

<form action="" method="post">
  {% csrf_token %}
  <label for="from_date">From Date:</label>
  <input type="date" id="from_date" name="from_date" value="getDate()">
   <label for="to_date">To Date:</label>
  <input type="date" id="to_date" name="to_date" value="getDate()">
  <input type="submit">&nbsp
  <input type="checkbox" name="new_records" value="new_records" checked>
  <label for="new_records"> New Records</label>&nbsp
  <input type="checkbox" name="error_records" value="error_records" checked>
  <label for="error_records"> Error Records</label><br><br>
  <label for="field">Choose your required field:</label>
  <select name="field" id="field">
    <option value="">--Please choose an option--</option>
    <option value="started">Started</option>
    <option value="completed">Completed</option>
  </select>
</form>

<script>
  function getDate(){
  document.getElementById('from_date').value = new Date().toDateInputValue();
}
</script>
</body>
</html>

I have used javascript document.getElementById(‘datePicker’).value = new Date().toDateInputValue(); to get todays value and called the function in form value value="getDate()". But I didnt get result. Is there any solution my date format is dd/mm/yyyy

>Solution :

There are multiple ways to do this (See: How to set input type date's default value to today?) but in order to make your example work with the minimum of changes I suggest the following.

var datePickers = document.querySelectorAll("input[type=date]"), i;
for (i = 0; i < datePickers.length; ++i) {
  datePickers[i].valueAsDate = new Date();
}

<form action="" method="post">
  {% csrf_token %}
  <label for="from_date">From Date:</label>
  <input type="date" id="from_date" name="from_date">
   <label for="to_date">To Date:</label>
  <input type="date" id="to_date" name="to_date">
  <input type="submit">&nbsp
  <input type="checkbox" name="new_records" value="new_records" checked>
  <label for="new_records"> New Records</label>&nbsp
  <input type="checkbox" name="error_records" value="error_records" checked>
  <label for="error_records"> Error Records</label><br><br>
  <label for="field">Choose your required field:</label>
  <select name="field" id="field">
    <option value="">--Please choose an option--</option>
    <option value="started">Started</option>
    <option value="completed">Completed</option>
  </select>
</form>