javascript - Display Default Date Value HTML Form iOS

Question

Is there a way to display the current date inside the button which launches the date picker in a HTML form on an iOS device?

---

Here is what loads currently:

Here is what I would like it to automatically load:

---

Here is the code I am using in my HTML form:

<input name="date" type="date" autofocus="autofocus" id="date" autocomplete="on" value="09-21-13"/>

---

Any ideas?

Thanks.

Answer 1

You need to find out the current date using the Date() method in JavaScript and convert it to ISO 8601 notation, yyyy-mm-dd, which is what input type=date must use internally (so the attribute value="09-21-13" is invalid and gets ignored – it would refer to day 13 in month 21 in year 9, and it is even formally invalid since the month number is too large).

Example:

<input name="date" type="date" autofocus="autofocus" id="date" autocomplete="on" />
<script>
function ISO8601(date) {
  var d = date.getDate();
  if(d < 10) d = '0' + d;
  var m = date.getMonth() + 1;
  if(m < 10) m = '0' + m;
  return date.getFullYear() + '-' + m + '-' + d;
}
document.getElementById('date').value = ISO8601(new Date());
</script>

If you use JavaScript libraries, some of them might have a function for converting a date to ISO 8601 notation, but the simple function above does the job, too.