The Eternal Problem of date pickers and calendar controls - the year
simon gray — 2023-04-03, 19:09:30A friend earlier today shared this amusing image on Facebook:
This is a common problem with date calendar pickers on apps and websites - we want to make it easy for users to enter dates by a calendar, but if the date needing to be entered is more than a couple of years in the past it's a complete nightmare to scroll back.
If only there was a solution which could make this easier for users?
<script>
function updateYear(year)
{
theYear = year + "-01-01";
document.getElementById('theDate').value=theYear
}
</script>
<label for="theYear">Year:</label><input type="number" id="theYear" name="theYear" onblur="updateYear(this.value)" /><br />
<label for="theDate">Date:</label><input type="date" id="theDate" name="theDate" />
Feel free to use, adapt, and share yourself!
<script>
function updateYear(year)
{
theYear = year + "-01-01";
document.getElementById('theDate').value=theYear
}
</script>
<label for="theYear">Year:</label><input type="number" id="theYear" name="theYear" onblur="updateYear(this.value)" /><br />
<label for="theDate">Date:</label><input type="date" id="theDate" name="theDate" />
Feel free to use, adapt, and share yourself!
";