The Perfect Curve

▶️⏸️⏹️ Read this article aloud — 197 words

A 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?

Year:
Date:

    <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" />