most efficient way to set length restrictions on input type number in React


I have 3 inputs for a user to enter some values that end up being a date format

for my inputs ‘day’ and ‘month’ i want the user to enter 2 integers and no more
for my input ‘year’ i want the user to enter 4 integers.

What is the best way to do this?

        <input
          name="month"
          value={values.dateOfBirth.month}
          onChange={(e) => handleDateChange(e)}
          type="number"
          placeholder={"MM"}
          className={dateErr ? "error" : ""}
        />
        <br />
        <input
          name="day"
          value={values.dateOfBirth.day}
          onChange={(e) => handleDateChange(e)}
          type="number"
          placeholder={"DD"}
          className={dateErr ? "error" : ""}
        />
        <br />
        <input
          name="year"
          value={values.dateOfBirth.year}
          onChange={(e) => handleDateChange(e)}
          type="number"
          placeholder={"YYYY"}
          className={dateErr ? "error" : ""}
        />

Source: React – Stack Overflow

November 20, 2021
Category : News
Tags: forms | input | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.