@lani.ground/react-picker

1import { dateKit } from '@lani.ground/kits';
2import { Calendar, TimePicker } from '@lani.ground/react-picker';
3import '@lani.ground/react-picker/styles/Calendar.css';
4
5
6const { formatDate } = dateKit;
7const [range, setRange] = useState<[Date | null, Date | null]>(range);
8const [timePickerOpen, setTimePickerOpen] = useState(false);
9const [editingDateType, setEditingDateType] = useState<'start' | 'end' | null>(null);
10
11const handleTimePickerOpen = (type: 'start' | 'end') => {
12  setEditingDateType(type);
13  setTimePickerOpen(true);
14};
15
16const handleTimeChange = (value: Date | null) => {
17  const updatedRange = {
18    start: [value, localRange[1]] as [Date | null, Date | null],
19    end: [localRange[0], value] as [Date | null, Date | null],
20  };
21
22  if (editingDateType && updatedRange[editingDateType]) {
23    setLocalRange(updatedRange[editingDateType]);
24  }
25};
26
27const getCurrentTimeValue = () => {
28  const valueMap = {
29    start: localRange[0],
30    end: localRange[1],
31  };
32
33  return editingDateType ? valueMap[editingDateType] : null;
34};
35
36<div>
37  <Calendar
38    type="range"
39    range={range}
40    onRangeChange={(newRange: [Date | null, Date | null]) => {
41      setRange(newRange);
42    }}
43    calendarType="scroll"
44    weekendColor="#6B8EFF"
45    holidayColor="#FF8B8B"
46    quickSelectOptions={[
47      { label: '7일', days: 7 },
48      { label: '14일', days: 14 },
49      { label: '28일', days: 28 },
50    ]}
51    enableReset
52  />
53
54  <div>
55    <p>시작 날짜</p>
56    {range[0] ? (
57      <>
58        <p>
59          {formatDate(range[0], 'MM월 DD일')}
60        </p>
61        <button
62          type="button"
63          onClick={() => handleTimePickerOpen('start')}
64        >
65          {formatDate(range[0], 'HH시 mm분')}
66        </button>
67      </>
68    ) : (
69      <p>날짜를 선택해주세요</p>
70    )}
71  </div>
72  <div>
73    <p>종료 날짜</p>
74    {range[1] ? (
75      <>
76        <p>{formatDate(range[1], 'MM월 DD일')}</p>
77        <button
78          type="button"
79          onClick={() => handleTimePickerOpen('end')}
80        >
81          {formatDate(range[1], 'HH시 mm분')}
82        </button>
83      </>
84    ) : (
85      <p>날짜를 선택해주세요</p>
86    )}
87  </div>
88
89  <TimePicker
90    mode="panel"
91    value={getCurrentTimeValue()}
92    onChange={handleTimeChange}
93    isOpen={timePickerOpen}
94    timeUnits={['hour', 'minute']}
95    onOpenChange={setTimePickerOpen}
96    enableSnap
97  />
98</div>