React, JSX | input 오늘 날짜, 현재 시각으로 defaultValue 설정하기

 

오늘 날짜, 현재 시각 가져오기

const getDefaultDate = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = (today.getMonth() + 1).toString().padStart(2, '0');
  const day = today.getDate().toString().padStart(2, '0');
  const hours = today.getHours().toString().padStart(2, '0');
  const minutes = today.getMinutes().toString().padStart(2, '0');
  const seconds = today.getSeconds().toString().padStart(2, '0');
  return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
};

const [defaultDate, setDefaultDate] = useState(getDafaultDate());

1. `getDefaultDate` 함수:
   - 현재 날짜와 시간 정보를 문자열로 포맷팅하여 반환하는 함수
   - `new Date()`를 사용하여 현재 날짜와 시간을 생성하고, `getFullYear()`, `getMonth()`, `getDate()`, `getHours()`, `getMinutes()`, `getSeconds()` 등의 메서드를 사용하여 해당 정보를 추출한다.
   - `padStart(2, '0')` 메서드를 사용하여 일정한 길이(2자리)로 표시되도록 각 값을 포맷팅한다.

2. `useState` 훅을 사용하여 React 상태 정의:
   - `const [defaultDate, setDefaultDate] = useState(getDafaultDate());` 라인에서 `useState` 훅을 사용하여 `defaultDate`라는 상태 변수를 정의
   - `getDafaultDate()` 함수를 호출하여 현재 날짜 및 시간 정보를 초기 상태 값으로 설정

 

 

오늘 날짜 가져오기, 시간은 00:00:00으로 설정

 const getDafaultDate = () => {
    const today = new Date();
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2, '0');
    const day = today.getDate().toString().padStart(2, '0');
    const hours = '00';
    const minutes = '00';
    const seconds = '00';
    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
  };
  
  const [defaultDate, setDefaultDate] = useState(getDafaultDate());

위와 같이 오늘 날짜를 가져오면서 시간만 고정해줄 수 있다. 

 

 

JSX 에서 사용

                <input
                  defaultValue={defaultDate}
                  type='datetime-local'
                  step='1'
                  max={maxDate}
                  style={{ marginRight: '5px', width: '230px' }}
                  className='form-control'
                  {...register('selectedDate', {
                    required: {
                      value: true,
                      message: t('text.file.dateIsRequired'),
                    },
                  })}
                />

JSX 안 input 태그 defaultValue 속성에 defaultDate를 넣어줌으로써 사용할 수 있다.

 

 

 

함께 보면 좋은 글

https://yesolz.tistory.com/44

JSX | input 태그 시간 초까지 입력 받기