Question 273556 in Html Question posted in
Some basic documentation can be found here.

Html – ReactJS Date Input Component – Issues with Year Input

I’m working on a ReactJS project where I have a date input component. I’m facing two issues with this component that I need help with:

Issue 1: Year Input Length
The first issue is that the year input allows six digits. I want to limit it to just four digits (e.g., ‘YYYY’). Currently, users can input a date like ’01/04/202222′ in the year section, which isn’t ideal. Here’s the relevant part of my code:

<input
    data-form-user="birth_date"
    value={userInfo?.birth_date && moment(userInfo?.birth_date).format('YYYY-MM-DD')}
    // ...
    type="date"
    // ...
/>

Issue 2: Modifying Year in Date Format
The second issue is related to modifying the year. When I input a date like ’01/04/2008′ and try to change the year to a date in the 1900s, it doesn’t allow me to modify the first two digits of the year (e.g., ’01/04/19XX’ won’t work). Only the last two digits of the year (2000s) can be updated. I want to be able to change the full year. Here’s the code for the onChange event:

onChange={(event) => {
    const selectedDate = event.target.value;
    const parsedDate = new Date(selectedDate);
    setStartDate(parsedDate);
    const formattedDate = moment(selectedDate).format('MM/DD/YY');
    setUserInfo((prev) => {
        return {
            ...prev,
            "birth_date": formattedDate
        };
    });
}}

If you’re looking for the complete input code:

```<input
    data-form-user="birth_date"
    value={userInfo?.birth_date && moment(userInfo?.birth_date).format('YYYY-MM-DD')}
    required
    type="date"
    id="birth_date"
    name="birth_date"
    class="form-control font-weight-bold rounded-0 border-[#000000]"
    placeholder="Date of Birth"
    onChange={(event) => {
        // Get the selected date as a string (format: YYYY-MM-DD)
        const selectedDate = event.target.value;
        // Example: Thu Sep 28 2023 08:00:00 GMT+0800 (Philippine Standard Time)
        const parsedDate = new Date(selectedDate);
        setStartDate(parsedDate);
        // Format the date as 'MM/DD/YY'
        const formattedDate = moment(selectedDate).format('MM/DD/YY')
        setUserInfo(prev => {
            return {
                ...prev,
                "birth_date": formattedDate
            }
        });
    }}
    autoComplete="off"
/>

I would greatly appreciate any insights or suggestions on how to address these issues. Thanks in advance for your help!

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Issue #1: Since this is birth date it should be max only of today's year so what i did is get the date today and set it as max.

    const today = moment().format('YYYY-MM-DD');
<input
//other attributes..
max={today} 
/>

    Issue #2: The issue is the attribute for value should be defaultValue= and not value=.

    <input
//other attributes..
defaultValue={userInfo?.birth_date && moment(userInfo?.birth_date).format('YYYY-MM-DD')}
/>

  2. 0

    To address your two issues with the date input component in your ReactJS project:

    Issue 1: Year Input Length

    To limit the year input to four digits, you can use the maxLength attribute. This will prevent users from typing more than four characters in the year field.

    <input
  data-form-user="birth_date"
  value={userInfo?.birth_date && moment(userInfo?.birth_date).format('YYYY-MM-DD')}
  // ...
  type="date"
  maxLength={4}
  // ...
/>

    Issue 2: Modifying Year in Date Format

    To be able to change the full year, you need to parse the date string as a Date object before formatting it. This will give you access to all of the date components, including the year.

    onChange={(event) => {
  const selectedDate = event.target.value;
  const parsedDate = new Date(selectedDate);
  // Set the year to the desired value
  parsedDate.setFullYear(1908);

  // Format the date as 'MM/DD/YY'
  const formattedDate = moment(parsedDate).format('MM/DD/YY');

  setStartDate(parsedDate);
  setUserInfo((prev) => {
    return {
      ...prev,
      "birth_date": formattedDate,
    };
  });
}}

    With this change, you should be able to enter a date like ’01/04/2008′ and change the year to a date in the 1900s.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search