[ React ] react-datepicker, dateFormat

 

react-datepicker  , dateformat 

 

 

1. react-datepicker

 

react-datepicker

 

 

https://www.npmjs.com/package/react-datepicker

react-datepicker

 

 

설치

 

npm install react-datepicker --save


yarn add react-datepicker

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const DateSelector = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <div>
      <h2>날짜 선택</h2>
      <DatePicker
        selected={selectedDate}
        onChange={handleDateChange}
        dateFormat="yyyy-MM-dd"
        placeholderText="날짜를 선택하세요"
      />
      {selectedDate && (
        <div>
          <h3>선택된 날짜: {selectedDate.toLocaleDateString()}</h3>
        </div>
      )}
    </div>
  );
};

export default DateSelector;

 

1. DatePicker 컴포넌트 사용: react-datepicker에서 제공하는 DatePicker 컴포넌트를 사용하여 날짜 선택 기능을 구현합니다.
2. State 관리: useState 훅을 사용하여 선택된 날짜를 관리합니다. selectedDate는 선택된 날짜를 저장하며, setSelectedDate는 선택된 날짜를 업데이트하는 함수입니다.
3. onChange 핸들러: 사용자가 날짜를 선택할 때마다 handleDateChange 함수가 호출되어 selectedDate 상태를 업데이트합니다.
4. dateFormat: dateFormat 속성을 사용하여 날짜 형식을 지정합니다. 예제에서는 yyyy-MM-dd 형식을 사용합니다.
5. placeholderText: placeholderText 속성을 사용하여 날짜를 선택하지 않았을 때 보여줄 텍스트를 지정합니다.

 

 

시간 선택 포함: 시간 선택을 포함하려면 showTimeSelect 속성을 추가합니다.

 

dateFormat 속성: dateFormat="Pp"는 date-fns 라이브러리의 형식을 따르며, P는 날짜 형식을, p는 시간 형식을 의미합니다.

 <DatePicker
    selected={selectedDate}
    onChange={handleDateChange}
    showTimeSelect
    dateFormat="Pp"
    placeholderText="날짜와 시간을 선택하세요"
    />

 

 

최소/최대 날짜 설정: 사용자가 선택할 수 있는 날짜의 범위를 제한하려면 minDate와 maxDate 속성을 사용합니다.

 

<DatePicker
        selected={selectedDate}
        onChange={handleDateChange}
        minDate={new Date()}
        maxDate={new Date('2024-12-31')}
        dateFormat="yyyy-MM-dd"
        placeholderText="날짜를 선택하세요"
        />

 

 

 

2. dateformat

 

https://www.npmjs.com/package/dateformat

dateformat

 

 

DateFormatter

 

 

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { format } from 'date-fns';

const DateFormatter = () => {
    const [selectedDate, setSelectedDate] = useState(null);

    const handleDateChange = (date) => {
      setSelectedDate(date);
    };
  

  return (
    <div>
      <h2>날짜 선택</h2>
      <DatePicker
        selected={selectedDate}
        onChange={handleDateChange}
        dateFormat="yyyy-MM-dd"
        placeholderText="날짜를 선택하세요"
      />
      {selectedDate && (
        <div>
          <h3>ISO 형식: {format(selectedDate, "yyyy-MM-dd'T'HH:mm:ssXXX")}</h3>
          <h3>긴 날짜 형식: {format(selectedDate, 'EEEE, MMMM do, yyyy')}</h3>
          <h3>짧은 날짜 형식: {format(selectedDate, 'MM/dd/yyyy')}</h3>
          <h3>시간 형식: {format(selectedDate, 'hh:mm a')}</h3>
        </div>
      )}
    </div>
  );
};

export default DateFormatter;

 

 

시간

 

시간

 

시간

 

 

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { format } from 'date-fns';

const DateFormatter = () => {
    const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };
  

  return (
    <div>
       
      <h2>시간 선택</h2>
      <DatePicker
        selected={selectedDate}
        onChange={handleDateChange}
        showTimeSelect
        showTimeSelectOnly
        timeIntervals={15}
        timeCaption="Time"
        dateFormat="HH:mm"
        placeholderText="시간을 선택하세요"
      />
      {selectedDate && (
        <div>
          <h3>선택된 시간 (24시간 형식): {format(selectedDate, 'HH:mm')}</h3>
          <h3>선택된 시간 (12시간 형식): {format(selectedDate, 'hh:mm a')}</h3>
          <h3>초 포함 시간 (24시간 형식): {format(selectedDate, 'HH:mm:ss')}</h3>
          <h3>초 포함 시간 (12시간 형식): {format(selectedDate, 'hh:mm:ss a')}</h3>
        </div>
      )}
    </div>
  );
};

export default DateFormatter;

 

 

1. DatePicker 컴포넌트 사용: react-datepicker의 DatePicker 컴포넌트를 사용하여 시간 선택 기능을 구현합니다.
2. State 관리: useState 훅을 사용하여 선택된 시간을 관리합니다. selectedDate는 선택된 시간을 저장하며, setSelectedDate는 이를 업데이트하는 함수입니다.
3. onChange 핸들러: 사용자가 시간을 선택할 때마다 handleDateChange 함수가 호출되어 selectedDate 상태를 업데이트합니다.
4. showTimeSelect 및 showTimeSelectOnly 속성: showTimeSelect와 showTimeSelectOnly 속성을 추가하여 시간 선택 기능만 활성화합니다.
5. timeIntervals 속성: timeIntervals 속성을 사용하여 시간 선택 간격을 15분으로 설정합니다.
6. dateFormat 속성: dateFormat 속성을 사용하여 시간을 24시간 형식으로 표시합니다. 예제에서는 HH:mm 형식을 사용합니다.
7. format 함수 사용: date-fns의 format 함수를 사용하여 선택된 시간을 다양한 형식으로 변환합니다. 예제에서는 24시간 형식(HH:mm), 12시간 형식(hh:mm a), 초 포함 24시간 형식(HH:mm:ss), 초 포함 12시간 형식(hh:mm:ss a)을 사용합니다.

 

 

시간

 

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { format } from 'date-fns';

const DateFormatter = () => {
    const [selectedDate, setSelectedDate] = useState(null);

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <div>
      <h2>시간 선택</h2>
      <DatePicker
        selected={selectedDate}
        onChange={handleDateChange}
        showTimeSelect
        showTimeSelectOnly
        timeIntervals={15}
        timeCaption="Time"
        dateFormat="HH:mm"
        placeholderText="시간을 선택하세요"
      />
      {selectedDate && (
        <div>
          <h3>선택된 시간: {format(selectedDate, 'HH:mm')}</h3>
          <h3>오전/오후 포함 시간: {format(selectedDate, 'hh:mm a')}</h3>
          <h3>초 포함 시간: {format(selectedDate, 'HH:mm:ss')}</h3>
          <h3>타임존 포함 시간: {format(selectedDate, "HH:mm:ss 'GMT'XXX")}</h3>
        </div>
      )}
    </div>
  );
};

export default DateFormatter;