@midseelee/date-fns-buddhist-adapter 1.0.81 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +301 -6
- package/dist/date-range-picker/DateRangePicker.d.ts +7 -0
- package/dist/date-range-picker/DateRangePicker.js +13 -0
- package/dist/date-range-picker/DateRangePicker.js.map +1 -0
- package/dist/date-range-picker/PickerBase.d.ts +2 -0
- package/dist/date-range-picker/PickerBase.js +6 -0
- package/dist/date-range-picker/PickerBase.js.map +1 -0
- package/dist/date-range-picker/PickerInput.d.ts +33 -0
- package/dist/date-range-picker/PickerInput.js +79 -0
- package/dist/date-range-picker/PickerInput.js.map +1 -0
- package/dist/date-range-picker/PickerModal.d.ts +2 -0
- package/dist/date-range-picker/PickerModal.js +13 -0
- package/dist/date-range-picker/PickerModal.js.map +1 -0
- package/dist/date-range-picker/components/Actions.d.ts +7 -0
- package/dist/date-range-picker/components/Actions.js +27 -0
- package/dist/date-range-picker/components/Actions.js.map +1 -0
- package/dist/date-range-picker/components/Calendars.d.ts +39 -0
- package/dist/date-range-picker/components/Calendars.js +30 -0
- package/dist/date-range-picker/components/Calendars.js.map +1 -0
- package/dist/date-range-picker/components/Day.d.ts +16 -0
- package/dist/date-range-picker/components/Day.js +44 -0
- package/dist/date-range-picker/components/Day.js.map +1 -0
- package/dist/date-range-picker/components/DefinedRanges.d.ts +9 -0
- package/dist/date-range-picker/components/DefinedRanges.js +40 -0
- package/dist/date-range-picker/components/DefinedRanges.js.map +1 -0
- package/dist/date-range-picker/components/Footer.d.ts +14 -0
- package/dist/date-range-picker/components/Footer.js +50 -0
- package/dist/date-range-picker/components/Footer.js.map +1 -0
- package/dist/date-range-picker/components/Month.d.ts +27 -0
- package/dist/date-range-picker/components/Month.js +53 -0
- package/dist/date-range-picker/components/Month.js.map +1 -0
- package/dist/date-range-picker/components/MonthHeader.d.ts +15 -0
- package/dist/date-range-picker/components/MonthHeader.js +128 -0
- package/dist/date-range-picker/components/MonthHeader.js.map +1 -0
- package/dist/date-range-picker/components/Sections.d.ts +34 -0
- package/dist/date-range-picker/components/Sections.js +129 -0
- package/dist/date-range-picker/components/Sections.js.map +1 -0
- package/dist/date-range-picker/constants.d.ts +8 -0
- package/dist/date-range-picker/constants.js +11 -0
- package/dist/date-range-picker/constants.js.map +1 -0
- package/dist/date-range-picker/defaults.d.ts +7 -0
- package/dist/date-range-picker/defaults.js +82 -0
- package/dist/date-range-picker/defaults.js.map +1 -0
- package/dist/date-range-picker/icons.d.ts +7 -0
- package/dist/date-range-picker/icons.js +17 -0
- package/dist/date-range-picker/icons.js.map +1 -0
- package/dist/date-range-picker/index.d.ts +7 -0
- package/dist/date-range-picker/index.js +6 -0
- package/dist/date-range-picker/index.js.map +1 -0
- package/dist/date-range-picker/types.d.ts +144 -0
- package/dist/date-range-picker/types.js +7 -0
- package/dist/date-range-picker/types.js.map +1 -0
- package/dist/date-range-picker/useDateRangePicker.d.ts +26 -0
- package/dist/date-range-picker/useDateRangePicker.js +167 -0
- package/dist/date-range-picker/useDateRangePicker.js.map +1 -0
- package/dist/date-range-picker/utils.d.ts +43 -0
- package/dist/date-range-picker/utils.js +86 -0
- package/dist/date-range-picker/utils.js.map +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -3
- package/dist/index.js.map +1 -1
- package/package.json +36 -15
package/README.md
CHANGED
|
@@ -7,20 +7,20 @@ date-fns adapter with Buddhist years functionality compatible with [MUI-X](https
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
```shell
|
|
10
|
-
npm install @midseelee/date-fns-buddhist-adapter date-fns@4.
|
|
10
|
+
npm install @midseelee/date-fns-buddhist-adapter date-fns@4.4.0 @date-io/date-fns@3.2.1
|
|
11
11
|
# or
|
|
12
|
-
pnpm add @midseelee/date-fns-buddhist-adapter date-fns@4.
|
|
12
|
+
pnpm add @midseelee/date-fns-buddhist-adapter date-fns@4.4.0 @date-io/date-fns@3.2.1
|
|
13
13
|
# or
|
|
14
|
-
bun add @midseelee/date-fns-buddhist-adapter date-fns@4.
|
|
14
|
+
bun add @midseelee/date-fns-buddhist-adapter date-fns@4.4.0 @date-io/date-fns@3.2.1
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## Peer Dependencies
|
|
18
18
|
|
|
19
19
|
This package requires the following peer dependencies:
|
|
20
20
|
|
|
21
|
-
- `@mui/material` ^9.0
|
|
22
|
-
- `@mui/x-date-pickers` ^9.
|
|
23
|
-
- `react` ^19.
|
|
21
|
+
- `@mui/material` ^9.4.0
|
|
22
|
+
- `@mui/x-date-pickers` ^9.14.0 (only if you use the MUI X Date Pickers adapter; the `date-range-picker` subpath works without it)
|
|
23
|
+
- `react` ^19.3.0
|
|
24
24
|
|
|
25
25
|
## Usage
|
|
26
26
|
|
|
@@ -42,6 +42,301 @@ function App() {
|
|
|
42
42
|
}
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
+
## Date Range Picker
|
|
46
|
+
|
|
47
|
+
A standalone, MUI-styled date range picker under the `date-range-picker` subpath (adapted from [mui-daterange-picker-plus](https://github.com/miyushan/mui-daterange-picker-plus)), with Buddhist Era rendering built in. It needs nothing beyond the package peers (`@mui/material`, `react`) — icons are inlined.
|
|
48
|
+
|
|
49
|
+
### Components
|
|
50
|
+
|
|
51
|
+
| Component | When to use |
|
|
52
|
+
| ------------- | ------------------------------------------------------------------------------------------------ |
|
|
53
|
+
| `PickerInput` | Basic usage — a read-only `TextField` with a calendar icon that opens the picker popover |
|
|
54
|
+
| `PickerModal` | Custom trigger (button, chip, …) — anchored `Popover` on desktop, full-screen `Dialog` on mobile |
|
|
55
|
+
| `PickerBase` | Always-visible inline picker for filter panels / dashboards; applies selections immediately |
|
|
56
|
+
|
|
57
|
+
The value follows the [MUI controlled/uncontrolled convention](https://mui.com/x/react-date-pickers/date-range-picker/): the picker is **controlled** when the parent provides `value`, and **uncontrolled** when it manages its own state initialized by `defaultValue` (`initialDateRange` remains as a deprecated alias of `defaultValue`). Every selection is reported through `onChange` in both modes.
|
|
58
|
+
|
|
59
|
+
### Basic usage (`PickerInput`)
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
import { useState } from 'react'
|
|
63
|
+
import { PickerInput } from '@midseelee/date-fns-buddhist-adapter/date-range-picker'
|
|
64
|
+
import type { DateRange } from '@midseelee/date-fns-buddhist-adapter/date-range-picker'
|
|
65
|
+
|
|
66
|
+
function Example() {
|
|
67
|
+
const [range, setRange] = useState<DateRange>({})
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<PickerInput
|
|
71
|
+
value={range}
|
|
72
|
+
onChange={setRange}
|
|
73
|
+
label="ช่วงวันที่"
|
|
74
|
+
fullWidth
|
|
75
|
+
/>
|
|
76
|
+
)
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
The field displays the selected range in Buddhist Era (`format`, default `'dd/MM/yyyy'`) with a `DD/MM/YYYY – DD/MM/YYYY` placeholder when empty, and opens the picker popover on click.
|
|
81
|
+
|
|
82
|
+
### `PickerModal`
|
|
83
|
+
|
|
84
|
+
#### Uncontrolled (`defaultValue`)
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
import { useState } from 'react'
|
|
88
|
+
import { Button } from '@mui/material'
|
|
89
|
+
import { PickerModal } from '@midseelee/date-fns-buddhist-adapter/date-range-picker'
|
|
90
|
+
import type { DateRange } from '@midseelee/date-fns-buddhist-adapter/date-range-picker'
|
|
91
|
+
|
|
92
|
+
function Example() {
|
|
93
|
+
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<>
|
|
97
|
+
<Button onClick={(e) => setAnchorEl(e.currentTarget)}>
|
|
98
|
+
Pick a range
|
|
99
|
+
</Button>
|
|
100
|
+
<PickerModal
|
|
101
|
+
defaultValue={{ startDate: new Date(), endDate: undefined }}
|
|
102
|
+
minDate="2026-01-01"
|
|
103
|
+
modalProps={{
|
|
104
|
+
open: Boolean(anchorEl),
|
|
105
|
+
anchorEl,
|
|
106
|
+
onClose: () => setAnchorEl(null),
|
|
107
|
+
}}
|
|
108
|
+
customProps={{
|
|
109
|
+
onSubmit: (range: DateRange) => {
|
|
110
|
+
console.log(range)
|
|
111
|
+
setAnchorEl(null)
|
|
112
|
+
},
|
|
113
|
+
onCloseCallback: () => setAnchorEl(null),
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
</>
|
|
117
|
+
)
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
#### Controlled (`value` + `onChange`)
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
function Example() {
|
|
125
|
+
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
|
|
126
|
+
const [range, setRange] = useState<DateRange>({})
|
|
127
|
+
|
|
128
|
+
return (
|
|
129
|
+
<>
|
|
130
|
+
<Button onClick={(e) => setAnchorEl(e.currentTarget)}>
|
|
131
|
+
{range.startDate
|
|
132
|
+
? range.startDate.toLocaleDateString()
|
|
133
|
+
: 'Pick a range'}
|
|
134
|
+
</Button>
|
|
135
|
+
<PickerModal
|
|
136
|
+
value={range}
|
|
137
|
+
onChange={setRange}
|
|
138
|
+
modalProps={{
|
|
139
|
+
open: Boolean(anchorEl),
|
|
140
|
+
anchorEl,
|
|
141
|
+
onClose: () => setAnchorEl(null),
|
|
142
|
+
}}
|
|
143
|
+
customProps={{
|
|
144
|
+
onSubmit: () => setAnchorEl(null),
|
|
145
|
+
onCloseCallback: () => setAnchorEl(null),
|
|
146
|
+
}}
|
|
147
|
+
/>
|
|
148
|
+
</>
|
|
149
|
+
)
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Inline (`PickerBase`)
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
import { PickerBase } from '@midseelee/date-fns-buddhist-adapter/date-range-picker'
|
|
157
|
+
|
|
158
|
+
function Filters() {
|
|
159
|
+
const [range, setRange] = useState<DateRange>({})
|
|
160
|
+
|
|
161
|
+
return (
|
|
162
|
+
<PickerBase
|
|
163
|
+
value={range}
|
|
164
|
+
onChange={setRange}
|
|
165
|
+
locale={th}
|
|
166
|
+
hideOutsideMonthDays={false}
|
|
167
|
+
/>
|
|
168
|
+
)
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
`PickerBase` renders no footer — every selection is committed through `onChange` immediately.
|
|
173
|
+
|
|
174
|
+
## Date Range Picker API
|
|
175
|
+
|
|
176
|
+
### Shared props (`PickerProps`)
|
|
177
|
+
|
|
178
|
+
Accepted by all three components.
|
|
179
|
+
|
|
180
|
+
| Prop | Type | Default | Description |
|
|
181
|
+
| ---------------------- | ---------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
182
|
+
| `value` | `DateRange` | — | Controlled range. When provided the picker ignores its internal state and reports selections through `onChange` |
|
|
183
|
+
| `defaultValue` | `DateRange` | `{}` | Initial range of the uncontrolled picker. Ignored when `value` is provided |
|
|
184
|
+
| `initialDateRange` | `DateRange` | — | **Deprecated** alias of `defaultValue` |
|
|
185
|
+
| `onChange` | `(range: DateRange) => void` | — | Called on every selection: picking a start, completing a range, choosing a preset |
|
|
186
|
+
| `minDate` | `Date \| string` | start of the year, 10 years back | Earliest selectable day. ISO strings (e.g. `'2026-01-01'`) are parsed with date-fns |
|
|
187
|
+
| `maxDate` | `Date \| string` | end of the year, 10 years ahead | Latest selectable day |
|
|
188
|
+
| `locale` | `Locale` (date-fns) | en-US | Drives week start, weekday/month names and preset math |
|
|
189
|
+
| `buddhistEra` | `boolean` | `true` | Render years as Buddhist Era (Christian + 543) in calendar headers, the footer preview and `PickerInput`. Internal `Date` values stay in Christian years |
|
|
190
|
+
| `definedRanges` | `DefinedRange[]` | `getDefaultRanges(new Date(), locale)` | Replaces the built-in quick-select presets |
|
|
191
|
+
| `hideDefaultRanges` | `boolean` | `false` | Removes the presets list / dropdown entirely |
|
|
192
|
+
| `hideOutsideMonthDays` | `boolean` | `true` | Renders days of neighboring months as invisible placeholders |
|
|
193
|
+
|
|
194
|
+
### `PickerInput` props
|
|
195
|
+
|
|
196
|
+
Extends the shared props.
|
|
197
|
+
|
|
198
|
+
| Prop | Type | Default | Description |
|
|
199
|
+
| ------------- | --------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
200
|
+
| `format` | `string` | `'dd/MM/yyyy'` | date-fns display format applied to both ends of the range |
|
|
201
|
+
| `separator` | `string` | `'–'` | Text rendered between the two dates |
|
|
202
|
+
| `placeholder` | `string` | uppercased `format` | Placeholder of each empty end, e.g. `DD/MM/YYYY – DD/MM/YYYY` |
|
|
203
|
+
| `label` | `string` | — | `TextField` label |
|
|
204
|
+
| `size` | `'small' \| 'medium'` | `'small'` | `TextField` density |
|
|
205
|
+
| `fullWidth` | `boolean` | `false` | Stretch to the container; default width is fixed (`315px`) |
|
|
206
|
+
| `disabled` | `boolean` | `false` | Disables the field and blocks opening the picker |
|
|
207
|
+
| `modalProps` | `Partial<PopoverProps>` | — | Merged into the internal popover props; `open`, `anchorEl` and `onClose` are managed by the input |
|
|
208
|
+
| `customProps` | `Partial<ModalCustomProps>` | — | Merged into the internal modal behavior; `onSubmit` / `onCloseCallback` close the popover by default |
|
|
209
|
+
|
|
210
|
+
### `PickerModal` props
|
|
211
|
+
|
|
212
|
+
Extends the shared props.
|
|
213
|
+
|
|
214
|
+
| Prop | Type | Description |
|
|
215
|
+
| ------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
216
|
+
| `modalProps` | `PopoverProps` | Forwarded to the MUI `Popover` (desktop) — provide `open`, `anchorEl`, `onClose`. On mobile viewports only `open` / `onClose` are used, rendered inside a full-screen `Dialog` |
|
|
217
|
+
| `customProps` | `ModalCustomProps` | Modal behavior, see below |
|
|
218
|
+
|
|
219
|
+
`ModalCustomProps`:
|
|
220
|
+
|
|
221
|
+
| Prop | Type | Default | Description |
|
|
222
|
+
| --------------------- | ---------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
223
|
+
| `onSubmit` | `(range: DateRange) => void` | — | Called when the user presses Apply with a complete range |
|
|
224
|
+
| `onCloseCallback` | `() => void` | — | Called when the user presses Cancel |
|
|
225
|
+
| `hideActionButtons` | `boolean` | `false` | Hides the footer Cancel/Apply buttons |
|
|
226
|
+
| `RangeSeparatorIcons` | `{ xs?, md? }` | built-in double arrows | Icon components (`SvgIconProps`) between the footer date previews — `xs` below the `md` breakpoint, `md` from `md` up |
|
|
227
|
+
|
|
228
|
+
### `Labels`
|
|
229
|
+
|
|
230
|
+
Customize every picker text:
|
|
231
|
+
|
|
232
|
+
| Key | Default |
|
|
233
|
+
| ------------------ | ---------------- |
|
|
234
|
+
| `predefinedRanges` | `'Quick Select'` |
|
|
235
|
+
| `actions.apply` | `'Apply'` |
|
|
236
|
+
| `actions.cancel` | `'Cancel'` |
|
|
237
|
+
| `footer.startDate` | `'Start Date'` |
|
|
238
|
+
| `footer.endDate` | `'End Date'` |
|
|
239
|
+
|
|
240
|
+
### Functions
|
|
241
|
+
|
|
242
|
+
```ts
|
|
243
|
+
getDefaultRanges(date?: Date, locale?: Locale): DefinedRange[]
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
Returns the built-in presets — `Today`, `Yesterday`, `This Week`, `Last Week`, `Last 7 Days`, `This Month`, `Last Month`, `This Year`, `Last Year` — computed from `date` and the locale's week start. Labels are **localized by the locale's code** when supported (Thai `th` → `วันนี้`, `เมื่อวาน`, `สัปดาห์นี้`, `สัปดาห์ที่แล้ว`, `7 วันล่าสุด`, `เดือนนี้`, `เดือนที่แล้ว`, `ปีนี้`, `ปีที่แล้ว`); other locales fall back to English. Useful as a base when adding custom ranges.
|
|
247
|
+
|
|
248
|
+
### Types
|
|
249
|
+
|
|
250
|
+
```ts
|
|
251
|
+
type DateRange = {
|
|
252
|
+
startDate?: Date
|
|
253
|
+
endDate?: Date
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
type DefinedRange = {
|
|
257
|
+
startDate: Date
|
|
258
|
+
endDate: Date
|
|
259
|
+
label: string
|
|
260
|
+
}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
All `Date` values are plain Christian-year `Date` objects; Buddhist Era is rendering-only.
|
|
264
|
+
|
|
265
|
+
(`Marker`, `Setter` and `NavigationAction` are also exported from the subpath for advanced use — they describe calendar markers and navigation directions and are rarely needed directly.)
|
|
266
|
+
|
|
267
|
+
### Behavior notes
|
|
268
|
+
|
|
269
|
+
- The first click sets the start date, the second click completes the range (clicking before the start restarts the selection); presets commit instantly.
|
|
270
|
+
- A controlled picker opens on the month of its `value`; an uncontrolled one on `defaultValue`'s month or the current month.
|
|
271
|
+
- Days outside `minDate` / `maxDate` are disabled and the month navigation is clamped.
|
|
272
|
+
- `PickerModal` switches to a full-screen `Dialog` below the `md` breakpoint.
|
|
273
|
+
|
|
274
|
+
### Recipes
|
|
275
|
+
|
|
276
|
+
Thai labels and locale:
|
|
277
|
+
|
|
278
|
+
```tsx
|
|
279
|
+
import { th } from 'date-fns/locale'
|
|
280
|
+
|
|
281
|
+
function Example() {
|
|
282
|
+
return (
|
|
283
|
+
<PickerInput
|
|
284
|
+
value={range}
|
|
285
|
+
onChange={setRange}
|
|
286
|
+
locale={th}
|
|
287
|
+
labels={{
|
|
288
|
+
predefinedRanges: 'ช่วงเวลายอดนิยม',
|
|
289
|
+
actions: { apply: 'ตกลง', cancel: 'ยกเลิก' },
|
|
290
|
+
footer: { startDate: 'วันเริ่มต้น', endDate: 'วันสิ้นสุด' },
|
|
291
|
+
}}
|
|
292
|
+
/>
|
|
293
|
+
)
|
|
294
|
+
}
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
Custom quick-select presets:
|
|
298
|
+
|
|
299
|
+
```tsx
|
|
300
|
+
import { addDays, endOfMonth, startOfMonth } from 'date-fns'
|
|
301
|
+
|
|
302
|
+
function Example() {
|
|
303
|
+
const today = new Date()
|
|
304
|
+
const definedRanges: DefinedRange[] = [
|
|
305
|
+
{ label: '7 วันล่าสุด', startDate: addDays(today, -6), endDate: today },
|
|
306
|
+
{
|
|
307
|
+
label: 'เดือนนี้',
|
|
308
|
+
startDate: startOfMonth(today),
|
|
309
|
+
endDate: endOfMonth(today),
|
|
310
|
+
},
|
|
311
|
+
]
|
|
312
|
+
|
|
313
|
+
return (
|
|
314
|
+
<PickerModal
|
|
315
|
+
value={range}
|
|
316
|
+
onChange={setRange}
|
|
317
|
+
definedRanges={definedRanges}
|
|
318
|
+
modalProps={/* … */}
|
|
319
|
+
customProps={/* … */}
|
|
320
|
+
/>
|
|
321
|
+
)
|
|
322
|
+
}
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
Christian years instead of Buddhist Era:
|
|
326
|
+
|
|
327
|
+
```tsx
|
|
328
|
+
function Example() {
|
|
329
|
+
return (
|
|
330
|
+
<PickerInput
|
|
331
|
+
value={range}
|
|
332
|
+
onChange={setRange}
|
|
333
|
+
buddhistEra={false}
|
|
334
|
+
format="yyyy-MM-dd"
|
|
335
|
+
/>
|
|
336
|
+
)
|
|
337
|
+
}
|
|
338
|
+
```
|
|
339
|
+
|
|
45
340
|
## Credits
|
|
46
341
|
|
|
47
342
|
This package is forked from [ascendcorp/date-fns-buddhist-adapter](https://github.com/ascendcorp/date-fns-buddhist-adapter)
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ModalCustomProps, PickerProps } from './types';
|
|
2
|
+
type PickerAvailableProps = PickerProps & {
|
|
3
|
+
customProps?: ModalCustomProps;
|
|
4
|
+
footerRequired?: boolean;
|
|
5
|
+
};
|
|
6
|
+
export declare const DateRangePicker: (props: PickerAvailableProps) => import("react").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useDateRangePicker } from './useDateRangePicker';
|
|
3
|
+
import { Sections } from './components/Sections';
|
|
4
|
+
export const DateRangePicker = (props) => {
|
|
5
|
+
const { customProps, ...dateRangePickerProps } = props;
|
|
6
|
+
const onSubmit = customProps?.onSubmit;
|
|
7
|
+
const { ...computedProps } = useDateRangePicker({
|
|
8
|
+
...dateRangePickerProps,
|
|
9
|
+
onSubmit,
|
|
10
|
+
});
|
|
11
|
+
return (_jsx(Sections, { ...dateRangePickerProps, ...computedProps, ...customProps }));
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=DateRangePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../src/date-range-picker/DateRangePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,EAAE,WAAW,EAAE,GAAG,oBAAoB,EAAE,GAAG,KAAK,CAAA;IACtD,MAAM,QAAQ,GAAG,WAAW,EAAE,QAAQ,CAAA;IAEtC,MAAM,EAAE,GAAG,aAAa,EAAE,GAAG,kBAAkB,CAAC;QAC9C,GAAG,oBAAoB;QACvB,QAAQ;KACT,CAAC,CAAA;IACF,OAAO,CACL,KAAC,QAAQ,OAAK,oBAAoB,KAAM,aAAa,KAAM,WAAW,GAAI,CAC3E,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PickerBase.js","sourceRoot":"","sources":["../../src/date-range-picker/PickerBase.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGnD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAsB,EAAE,EAAE;IACnD,OAAO,KAAC,eAAe,OAAK,KAAK,GAAI,CAAA;AACvC,CAAC,CAAA"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { PopoverProps } from '@mui/material/Popover';
|
|
2
|
+
import type { ModalCustomProps, PickerProps } from './types';
|
|
3
|
+
export type PickerInputProps = PickerProps & {
|
|
4
|
+
/**
|
|
5
|
+
* date-fns display format for both ends of the range.
|
|
6
|
+
* @default 'dd/MM/yyyy'
|
|
7
|
+
*/
|
|
8
|
+
format?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Separator rendered between the two dates.
|
|
11
|
+
* @default '–'
|
|
12
|
+
*/
|
|
13
|
+
separator?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Placeholder of each empty end of the range; defaults to the uppercased `format`.
|
|
16
|
+
*/
|
|
17
|
+
placeholder?: string;
|
|
18
|
+
label?: string;
|
|
19
|
+
size?: 'small' | 'medium';
|
|
20
|
+
fullWidth?: boolean;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Props merged into the internal `PickerModal` popover props. `open`,
|
|
24
|
+
* `anchorEl` and `onClose` are managed by the input.
|
|
25
|
+
*/
|
|
26
|
+
modalProps?: Partial<PopoverProps>;
|
|
27
|
+
/**
|
|
28
|
+
* Props merged into the internal `PickerModal` custom props. `onSubmit` and
|
|
29
|
+
* `onCloseCallback` close the popover by default.
|
|
30
|
+
*/
|
|
31
|
+
customProps?: Partial<ModalCustomProps>;
|
|
32
|
+
};
|
|
33
|
+
export declare const PickerInput: ({ format, separator, placeholder, label, size, fullWidth, disabled, modalProps, customProps, ...pickerProps }: PickerInputProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, InputAdornment, TextField } from '@mui/material';
|
|
3
|
+
import { useRef, useState } from 'react';
|
|
4
|
+
import { CalendarIcon } from './icons';
|
|
5
|
+
import { PickerModal } from './PickerModal';
|
|
6
|
+
import { formatWithEra } from './utils';
|
|
7
|
+
export const PickerInput = ({ format = 'dd/MM/yyyy', separator = '–', placeholder, label, size = 'small', fullWidth = false, disabled = false, modalProps, customProps, ...pickerProps }) => {
|
|
8
|
+
const anchorRef = useRef(null);
|
|
9
|
+
const [open, setOpen] = useState(false);
|
|
10
|
+
// Mirror the same controlled/uncontrolled contract as the picker itself so
|
|
11
|
+
// the input can render the range while the modal owns the selection state
|
|
12
|
+
const isControlled = pickerProps.value !== undefined;
|
|
13
|
+
const [internalRange, setInternalRange] = useState(pickerProps.defaultValue ?? pickerProps.initialDateRange ?? {});
|
|
14
|
+
const dateRange = isControlled
|
|
15
|
+
? (pickerProps.value ?? {})
|
|
16
|
+
: internalRange;
|
|
17
|
+
const handleChange = (range) => {
|
|
18
|
+
if (!isControlled) {
|
|
19
|
+
setInternalRange(range);
|
|
20
|
+
}
|
|
21
|
+
pickerProps.onChange?.(range);
|
|
22
|
+
};
|
|
23
|
+
const { startDate, endDate } = dateRange;
|
|
24
|
+
const sectionPlaceholder = placeholder ?? format.toUpperCase();
|
|
25
|
+
const renderDate = (date) => date
|
|
26
|
+
? formatWithEra(date, format, {
|
|
27
|
+
locale: pickerProps.locale,
|
|
28
|
+
buddhistEra: pickerProps.buddhistEra,
|
|
29
|
+
})
|
|
30
|
+
: sectionPlaceholder;
|
|
31
|
+
const displayValue = startDate || endDate
|
|
32
|
+
? `${renderDate(startDate)} ${separator} ${renderDate(endDate)}`
|
|
33
|
+
: '';
|
|
34
|
+
const inputPlaceholder = `${sectionPlaceholder} ${separator} ${sectionPlaceholder}`;
|
|
35
|
+
const handleOpen = () => {
|
|
36
|
+
if (!disabled) {
|
|
37
|
+
setOpen(true);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
const handleClose = (event, reason) => {
|
|
41
|
+
setOpen(false);
|
|
42
|
+
modalProps?.onClose?.(event, reason);
|
|
43
|
+
};
|
|
44
|
+
const handleSubmit = (range) => {
|
|
45
|
+
customProps?.onSubmit?.(range);
|
|
46
|
+
setOpen(false);
|
|
47
|
+
};
|
|
48
|
+
const handleCloseCallback = () => {
|
|
49
|
+
customProps?.onCloseCallback?.();
|
|
50
|
+
setOpen(false);
|
|
51
|
+
};
|
|
52
|
+
return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: anchorRef, onClick: handleOpen, sx: {
|
|
53
|
+
display: fullWidth ? 'flex' : 'inline-flex',
|
|
54
|
+
width: fullWidth ? '100%' : 'auto',
|
|
55
|
+
cursor: disabled ? 'default' : 'pointer',
|
|
56
|
+
}, children: _jsx(TextField, { fullWidth: fullWidth, size: size, label: label, disabled: disabled, value: displayValue, placeholder: inputPlaceholder,
|
|
57
|
+
// Clicks must land on the wrapping Box so the input never takes
|
|
58
|
+
// focus (which would close the popover on blur)
|
|
59
|
+
sx: {
|
|
60
|
+
pointerEvents: 'none',
|
|
61
|
+
width: fullWidth ? '100%' : '315px',
|
|
62
|
+
'& .MuiInputBase-root': { cursor: 'pointer' },
|
|
63
|
+
'& .MuiInputBase-input': { cursor: 'pointer' },
|
|
64
|
+
}, slotProps: {
|
|
65
|
+
input: {
|
|
66
|
+
endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(CalendarIcon, { fontSize: "small", sx: { color: 'action.active' } }) })),
|
|
67
|
+
},
|
|
68
|
+
} }) }), _jsx(PickerModal, { ...pickerProps, onChange: handleChange, modalProps: {
|
|
69
|
+
...modalProps,
|
|
70
|
+
open: open && Boolean(anchorRef.current),
|
|
71
|
+
anchorEl: anchorRef.current,
|
|
72
|
+
onClose: handleClose,
|
|
73
|
+
}, customProps: {
|
|
74
|
+
...customProps,
|
|
75
|
+
onSubmit: handleSubmit,
|
|
76
|
+
onCloseCallback: handleCloseCallback,
|
|
77
|
+
} })] }));
|
|
78
|
+
};
|
|
79
|
+
//# sourceMappingURL=PickerInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PickerInput.js","sourceRoot":"","sources":["../../src/date-range-picker/PickerInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Dialog, Popover, useMediaQuery, useTheme } from '@mui/material';
|
|
3
|
+
import { DateRangePicker } from './DateRangePicker';
|
|
4
|
+
export const PickerModal = ({ modalProps, customProps, ...dateRangePickerProps }) => {
|
|
5
|
+
const theme = useTheme();
|
|
6
|
+
const isMobileView = useMediaQuery(theme.breakpoints.down('md'));
|
|
7
|
+
if (isMobileView) {
|
|
8
|
+
const { open, onClose } = modalProps;
|
|
9
|
+
return (_jsx(Dialog, { open: open, onClose: onClose, children: _jsx(DateRangePicker, { ...dateRangePickerProps, customProps: customProps, footerRequired: true }) }));
|
|
10
|
+
}
|
|
11
|
+
return (_jsx(Popover, { ...modalProps, children: _jsx(DateRangePicker, { ...dateRangePickerProps, customProps: customProps, footerRequired: true }) }));
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=PickerModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PickerModal.js","sourceRoot":"","sources":["../../src/date-range-picker/PickerModal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGnD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,WAAW,EACX,GAAG,oBAAoB,EACN,EAAE,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAEhE,IAAI,YAAY,EAAE,CAAC;QACjB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,UAAU,CAAA;QACpC,OAAO,CACL,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,YAClC,KAAC,eAAe,OACV,oBAAoB,EACxB,WAAW,EAAE,WAAW,EACxB,cAAc,SACd,GACK,CACV,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,OAAO,OAAK,UAAU,YACrB,KAAC,eAAe,OACV,oBAAoB,EACxB,WAAW,EAAE,WAAW,EACxB,cAAc,SACd,GACM,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Labels, ModalCustomProps } from '../types';
|
|
2
|
+
type ActionsProps = Omit<ModalCustomProps, 'onSubmit'> & {
|
|
3
|
+
labels?: Labels['actions'];
|
|
4
|
+
onSubmit: () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const Actions: ({ onCloseCallback, onSubmit, labels, }: ActionsProps) => import("react").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Button, styled } from '@mui/material';
|
|
3
|
+
const CancelButtonStyled = styled(Button)(({ theme }) => ({
|
|
4
|
+
textTransform: 'none',
|
|
5
|
+
fontSize: 13,
|
|
6
|
+
fontWeight: 400,
|
|
7
|
+
borderRadius: '8px',
|
|
8
|
+
marginRight: '8px',
|
|
9
|
+
padding: '0 16px',
|
|
10
|
+
height: '36px',
|
|
11
|
+
color: theme.palette.grey[600],
|
|
12
|
+
'&:hover': {
|
|
13
|
+
backgroundColor: theme.palette.grey[100],
|
|
14
|
+
},
|
|
15
|
+
}));
|
|
16
|
+
const ApplyButtonStyled = styled(Button)({
|
|
17
|
+
fontSize: 13,
|
|
18
|
+
fontWeight: 400,
|
|
19
|
+
borderRadius: '8px',
|
|
20
|
+
textTransform: 'none',
|
|
21
|
+
height: '36px',
|
|
22
|
+
padding: '0 16px',
|
|
23
|
+
});
|
|
24
|
+
export const Actions = ({ onCloseCallback, onSubmit, labels, }) => {
|
|
25
|
+
return (_jsxs(_Fragment, { children: [_jsx(Box, { children: _jsx(CancelButtonStyled, { disableRipple: true, disableElevation: true, variant: "text", onClick: onCloseCallback, children: labels?.cancel || 'Cancel' }) }), _jsx(Box, { children: _jsx(ApplyButtonStyled, { disableRipple: true, disableElevation: true, type: "submit", variant: "contained", color: "primary", onClick: onSubmit, children: labels?.apply || 'Apply' }) })] }));
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=Actions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/date-range-picker/components/Actions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAInD,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,aAAa,EAAE,MAAM;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,KAAK;IAClB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC9B,SAAS,EAAE;QACT,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;KACzC;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,iBAAiB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,GAAG;IACf,YAAY,EAAE,KAAK;IACnB,aAAa,EAAE,MAAM;IACrB,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAA;AAOF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,eAAe,EACf,QAAQ,EACR,MAAM,GACO,EAAE,EAAE;IACjB,OAAO,CACL,8BACE,KAAC,GAAG,cACF,KAAC,kBAAkB,IACjB,aAAa,QACb,gBAAgB,QAChB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,eAAe,YAEvB,MAAM,EAAE,MAAM,IAAI,QAAQ,GACR,GACjB,EAEN,KAAC,GAAG,cACF,KAAC,iBAAiB,IAChB,aAAa,QACb,gBAAgB,QAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,QAAQ,YAEhB,MAAM,EAAE,KAAK,IAAI,OAAO,GACP,GAChB,IACL,CACJ,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { Locale } from 'date-fns';
|
|
3
|
+
import type { DateRange } from '../types';
|
|
4
|
+
import { NavigationAction } from '../types';
|
|
5
|
+
type CommonProps = {
|
|
6
|
+
dateRange: DateRange;
|
|
7
|
+
minDate: Date;
|
|
8
|
+
maxDate: Date;
|
|
9
|
+
helpers: {
|
|
10
|
+
isInHoverRange: (day: Date) => boolean;
|
|
11
|
+
};
|
|
12
|
+
handlers: {
|
|
13
|
+
handleClickDateNumber: (day: Date) => void;
|
|
14
|
+
handleClickSubmit: () => void;
|
|
15
|
+
handleHoverDateNumber: (day: Date) => void;
|
|
16
|
+
handleClickNavIcon: (marker: symbol, action: NavigationAction) => void;
|
|
17
|
+
};
|
|
18
|
+
locale?: Locale;
|
|
19
|
+
buddhistEra?: boolean;
|
|
20
|
+
hideOutsideMonthDays?: boolean;
|
|
21
|
+
};
|
|
22
|
+
type DualCalendarProps = {
|
|
23
|
+
firstMonth: Date;
|
|
24
|
+
secondMonth: Date;
|
|
25
|
+
handleSetFirstMonth: (date: Date) => void;
|
|
26
|
+
handleSetSecondMonth: (date: Date) => void;
|
|
27
|
+
canNavigateCloser: boolean;
|
|
28
|
+
commonProps: CommonProps;
|
|
29
|
+
};
|
|
30
|
+
export declare const DualCalendar: ({ firstMonth, secondMonth, handleSetFirstMonth, handleSetSecondMonth, canNavigateCloser, commonProps, }: DualCalendarProps) => ReactElement;
|
|
31
|
+
type SingleCalendarProps = {
|
|
32
|
+
firstMonth: Date;
|
|
33
|
+
secondMonth: Date;
|
|
34
|
+
handleSetSingleMonth: (date: Date) => void;
|
|
35
|
+
canNavigateCloser: boolean;
|
|
36
|
+
commonProps: CommonProps;
|
|
37
|
+
};
|
|
38
|
+
export declare const SingleCalendar: ({ firstMonth, secondMonth, handleSetSingleMonth, commonProps, }: SingleCalendarProps) => ReactElement;
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Divider } from '@mui/material';
|
|
3
|
+
import { isSameMonth } from 'date-fns';
|
|
4
|
+
import { MARKERS } from '../constants';
|
|
5
|
+
import { Month } from './Month';
|
|
6
|
+
export const DualCalendar = ({ firstMonth, secondMonth, handleSetFirstMonth, handleSetSecondMonth, canNavigateCloser, commonProps, }) => {
|
|
7
|
+
const canNavigateBack = !isSameMonth(firstMonth, commonProps.minDate);
|
|
8
|
+
const canNavigateForward = !isSameMonth(secondMonth, commonProps.maxDate);
|
|
9
|
+
return (_jsxs(Box, { sx: {
|
|
10
|
+
display: 'flex',
|
|
11
|
+
flexDirection: {
|
|
12
|
+
xs: 'column',
|
|
13
|
+
md: 'row',
|
|
14
|
+
},
|
|
15
|
+
justifyContent: 'center',
|
|
16
|
+
}, children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: _jsx(Month, { dateRange: commonProps.dateRange, minDate: commonProps.minDate, maxDate: commonProps.maxDate, helpers: commonProps.helpers, handlers: commonProps.handlers, locale: commonProps.locale, buddhistEra: commonProps.buddhistEra, hideOutsideMonthDays: commonProps.hideOutsideMonthDays, currentDate: firstMonth, otherDate: secondMonth, setMonth: handleSetFirstMonth, navState: [canNavigateBack, canNavigateCloser], marker: MARKERS.FIRST_MONTH }) }), _jsx(Box, { children: _jsx(Divider, { orientation: "vertical" }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: _jsx(Month, { dateRange: commonProps.dateRange, minDate: commonProps.minDate, maxDate: commonProps.maxDate, helpers: commonProps.helpers, handlers: commonProps.handlers, locale: commonProps.locale, buddhistEra: commonProps.buddhistEra, hideOutsideMonthDays: commonProps.hideOutsideMonthDays, currentDate: secondMonth, otherDate: firstMonth, setMonth: handleSetSecondMonth, navState: [canNavigateCloser, canNavigateForward], marker: MARKERS.SECOND_MONTH }) })] }));
|
|
17
|
+
};
|
|
18
|
+
export const SingleCalendar = ({ firstMonth, secondMonth, handleSetSingleMonth, commonProps, }) => {
|
|
19
|
+
const canNavigateBack = !isSameMonth(firstMonth, commonProps.minDate);
|
|
20
|
+
const canNavigateForward = !isSameMonth(firstMonth, commonProps.maxDate);
|
|
21
|
+
return (_jsx(Box, { sx: {
|
|
22
|
+
display: 'flex',
|
|
23
|
+
flexDirection: {
|
|
24
|
+
xs: 'column',
|
|
25
|
+
md: 'row',
|
|
26
|
+
},
|
|
27
|
+
justifyContent: 'center',
|
|
28
|
+
}, children: _jsx(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: _jsx(Month, { dateRange: commonProps.dateRange, minDate: commonProps.minDate, maxDate: commonProps.maxDate, helpers: commonProps.helpers, handlers: commonProps.handlers, locale: commonProps.locale, buddhistEra: commonProps.buddhistEra, hideOutsideMonthDays: commonProps.hideOutsideMonthDays, currentDate: firstMonth, otherDate: secondMonth, setMonth: handleSetSingleMonth, navState: [canNavigateBack, canNavigateForward], marker: MARKERS.SINGLE_MONTH }) }) }));
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=Calendars.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendars.js","sourceRoot":"","sources":["../../../src/date-range-picker/components/Calendars.tsx"],"names":[],"mappings":"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"}
|