@daryasidorovich/modsen-datepicker 1.0.22 → 1.0.23
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 +302 -302
- package/dist/index.cjs +6 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/package.json +120 -120
package/README.md
CHANGED
|
@@ -1,302 +1,302 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
|
|
3
|
-
# Modsen DatePicker Library
|
|
4
|
-
|
|
5
|
-
**Three calendar components for React: BaseCalendar, DatePicker and RangePicker**
|
|
6
|
-
|
|
7
|
-
[Installation](#installation) • [Usage](#usage) • [API](#api) • [Types](#types) • [Demo](https://6a88497b3bbc2742a15109b2-cxguycdfyi.chromatic.com/)
|
|
8
|
-
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
---
|
|
12
|
-
|
|
13
|
-
## Features
|
|
14
|
-
|
|
15
|
-
- **BaseCalendar** — a simple calendar for viewing and selecting dates
|
|
16
|
-
- **DatePicker** — single date selection via `selectedDate`
|
|
17
|
-
- **RangePicker** — range selection via `rangeStart` / `rangeEnd`
|
|
18
|
-
- **Flexible configuration** — `minDate`, `maxDate`, first day of week, display modes
|
|
19
|
-
- **Hide weekends** — `hideWeekends`
|
|
20
|
-
- **Holidays** — `showHolidays`, highlights public holidays based on the region (browser language)
|
|
21
|
-
- **Tasks** — `enableTasks`, shows task indicators on dates and enables the built-in task manager- **Light and dark themes** — via CSS class on `<html>`
|
|
22
|
-
- **TypeScript** — fully typed props out of the box
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
## Installation
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
npm install @daryasidorovich/modsen-datepicker
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
Or via yarn:
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
yarn add @daryasidorovich/mmodsen-datepicker
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
Requires **React 19+**.
|
|
39
|
-
|
|
40
|
-
---
|
|
41
|
-
|
|
42
|
-
## API
|
|
43
|
-
|
|
44
|
-
### Shared props (all components)
|
|
45
|
-
|
|
46
|
-
| Prop | Type | Default | Description |
|
|
47
|
-
| ---------------- | ------------------------- | ------------ | -------------------------------------------------- |
|
|
48
|
-
| `monthDate` | `Date` | `new Date()` | **Required.** The month being displayed |
|
|
49
|
-
| `minDate` | `Date` | — | Minimum selectable date |
|
|
50
|
-
| `maxDate` | `Date` | — | Maximum selectable date |
|
|
51
|
-
| `firstDayOfWeek` | `FIRST_DAY_OF_WEEK_TYPES` | `0` | First day of the week (`0` — Sunday, `1` — Monday) |
|
|
52
|
-
| `mode` | `MODES_TYPES` | `'month'` | Display mode: `'week'` or `'month'` |
|
|
53
|
-
| `hideWeekends` | `boolean` | `false` | Hide Saturday and Sunday |
|
|
54
|
-
| `showHolidays` | `boolean` | `false` | Highlight holidays |
|
|
55
|
-
| `enableTasks` | `boolean` | `false` | Enable task indicators and tasks manager |
|
|
56
|
-
|
|
57
|
-
---
|
|
58
|
-
|
|
59
|
-
## Usage
|
|
60
|
-
|
|
61
|
-
### DatePicker
|
|
62
|
-
|
|
63
|
-
Single date selection. Extends the shared props with:
|
|
64
|
-
|
|
65
|
-
| Prop | Type | Description |
|
|
66
|
-
| -------------- | ----------------------------------- | ----------------------------------------- |
|
|
67
|
-
| `selectedDate` | `Date` | The selected date |
|
|
68
|
-
| `onChange` | `(date: Date \| undefined) => void` | Called when a date is selected or cleared |
|
|
69
|
-
|
|
70
|
-
```tsx
|
|
71
|
-
import { useState } from 'react';
|
|
72
|
-
import { DatePicker } from 'modsen-datepicker';
|
|
73
|
-
|
|
74
|
-
const Example = () => {
|
|
75
|
-
const [selectedDate, setSelectedDate] = useState<Date | undefined>();
|
|
76
|
-
|
|
77
|
-
return (
|
|
78
|
-
<DatePicker
|
|
79
|
-
monthDate={new Date()}
|
|
80
|
-
selectedDate={selectedDate}
|
|
81
|
-
onChange={(date) => setSelectedDate(date)}
|
|
82
|
-
/>
|
|
83
|
-
);
|
|
84
|
-
};
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
<div align="center">
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</div>
|
|
91
|
-
|
|
92
|
-
### RangePicker
|
|
93
|
-
|
|
94
|
-
Range selection. Extends the shared props with:
|
|
95
|
-
|
|
96
|
-
| Prop | Type | Description |
|
|
97
|
-
| --------------- | ----------------------- | -------------------------------------------------- |
|
|
98
|
-
| `rangeStart` | `Date` | Start of the range |
|
|
99
|
-
| `rangeEnd` | `Date` | End of the range |
|
|
100
|
-
| `onChangeStart` | `(date?: Date) => void` | Called when the start of the range changes |
|
|
101
|
-
| `onChangeEnd` | `(date?: Date) => void` | Called when the end of the range changes or clears |
|
|
102
|
-
|
|
103
|
-
```tsx
|
|
104
|
-
import { useState } from 'react';
|
|
105
|
-
import { RangePicker } from 'modsen-datepicker';
|
|
106
|
-
|
|
107
|
-
const Example = () => {
|
|
108
|
-
const [rangeStart, setRangeStart] = useState<Date | undefined>();
|
|
109
|
-
const [rangeEnd, setRangeEnd] = useState<Date | undefined>();
|
|
110
|
-
|
|
111
|
-
return (
|
|
112
|
-
<RangePicker
|
|
113
|
-
monthDate={new Date()}
|
|
114
|
-
rangeStart={rangeStart}
|
|
115
|
-
rangeEnd={rangeEnd}
|
|
116
|
-
onChangeStart={setRangeStart}
|
|
117
|
-
onChangeEnd={setRangeEnd}
|
|
118
|
-
/>
|
|
119
|
-
);
|
|
120
|
-
};
|
|
121
|
-
```
|
|
122
|
-
|
|
123
|
-
<div align="center">
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
</div>
|
|
127
|
-
|
|
128
|
-
### BaseCalendar
|
|
129
|
-
|
|
130
|
-
A simple calendar for viewing and selecting dates. It has no built-in selection logic — you control everything through `onDateClick`. Accepts `selectedDate`, `rangeStart` and `rangeEnd` purely for display.
|
|
131
|
-
|
|
132
|
-
| Prop | Type | Description |
|
|
133
|
-
| -------------- | -------------------------------------- | ----------------------------------------------------------------- |
|
|
134
|
-
| `selectedDate` | `Date` | The date to highlight as selected |
|
|
135
|
-
| `rangeStart` | `Date` | Start of the range to highlight |
|
|
136
|
-
| `rangeEnd` | `Date` | End of the range to highlight |
|
|
137
|
-
| `onDateClick` | `(e: MouseEvent) => void, date: Date)` | Called on every date click — define your own selection logic here |
|
|
138
|
-
|
|
139
|
-
```tsx
|
|
140
|
-
import { BaseCalendar, FIRST_DAY_OF_WEEK } from 'modsen-datepicker';
|
|
141
|
-
|
|
142
|
-
const Example = () => {
|
|
143
|
-
return (
|
|
144
|
-
<BaseCalendar
|
|
145
|
-
monthDate={new Date()}
|
|
146
|
-
selectedDate={new Date()}
|
|
147
|
-
firstDayOfWeek={FIRST_DAY_OF_WEEK.MONDAY}
|
|
148
|
-
onDateClick={(date, e) => {
|
|
149
|
-
if (e.ctrlKey) {
|
|
150
|
-
console.log('Ctrl + click', date);
|
|
151
|
-
} else {
|
|
152
|
-
console.log('Click', date);
|
|
153
|
-
}
|
|
154
|
-
}}
|
|
155
|
-
/>
|
|
156
|
-
);
|
|
157
|
-
};
|
|
158
|
-
```
|
|
159
|
-
|
|
160
|
-
<div align="center">
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
## Callbacks
|
|
166
|
-
|
|
167
|
-
All callbacks receive the **final, validated** value — never an intermediate state.
|
|
168
|
-
|
|
169
|
-
| Component | Callback | Signature | When it fires |
|
|
170
|
-
| ------------- | --------------- | ----------------------- | ----------------------------------------------- |
|
|
171
|
-
| `DatePicker` | `onChange` | `(date: Date | undefined) => void` | On date select or clear |
|
|
172
|
-
| `RangePicker` | `onChangeStart` | `(date?: Date) => void` | When the start of the range changes |
|
|
173
|
-
| `RangePicker` | `onChangeEnd` | `(date?: Date) => void` | When the end of the range changes or is cleared |
|
|
174
|
-
|
|
175
|
-
## Input validation
|
|
176
|
-
|
|
177
|
-
The input is `masked` (dd/mm/yyyy) and validated:
|
|
178
|
-
|
|
179
|
-
- **Mask** — accepts only digits and inserts separators automatically.
|
|
180
|
-
|
|
181
|
-
- **Invalid date**- — if the value cannot be parsed, the input shows Invalid date and the selection is cleared.
|
|
182
|
-
|
|
183
|
-
- **Out of range** — if minDate or maxDate is set and the value falls outside, the input shows the corresponding error and the value is rejected.
|
|
184
|
-
|
|
185
|
-
<div align="center">
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
</div>
|
|
189
|
-
|
|
190
|
-
## Interaction
|
|
191
|
-
|
|
192
|
-
### Single date (DatePicker)
|
|
193
|
-
|
|
194
|
-
A regular click selects a date and calls `onChange` with the new value.
|
|
195
|
-
|
|
196
|
-
```tsx
|
|
197
|
-
<DatePicker
|
|
198
|
-
monthDate={new Date()}
|
|
199
|
-
selectedDate={selectedDate}
|
|
200
|
-
onChange={(date) => setSelectedDate(date)}
|
|
201
|
-
/>
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
Clicking the same date again clears the selection and calls `onChange(undefined)`.
|
|
205
|
-
|
|
206
|
-
### Range (RangePicker)
|
|
207
|
-
|
|
208
|
-
Clicks build the range step by step:
|
|
209
|
-
|
|
210
|
-
1. First click sets `rangeStart` — `onChangeStart(date)` is called.
|
|
211
|
-
2. Second click sets `rangeEnd` — `onChangeEnd(date)` is called.
|
|
212
|
-
3. If the second click is earlier than `rangeStart`, the values are swapped and both callbacks receive the corrected pair.
|
|
213
|
-
4. If the range is already complete, the next click starts a new range — `onChangeStart(date)` and `onChangeEnd(undefined)`.
|
|
214
|
-
|
|
215
|
-
```tsx
|
|
216
|
-
<RangePicker
|
|
217
|
-
monthDate={new Date()}
|
|
218
|
-
rangeStart={rangeStart}
|
|
219
|
-
rangeEnd={rangeEnd}
|
|
220
|
-
onChangeStart={setRangeStart}
|
|
221
|
-
onChangeEnd={setRangeEnd}
|
|
222
|
-
/>
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
### Ctrl + click
|
|
226
|
-
|
|
227
|
-
If the range is already selected and the user holds **Ctrl** while clicking, the end of the range is reset to the clicked date. The start stays the same. Only `onChangeEnd(date)` is called.
|
|
228
|
-
|
|
229
|
-
## Tasks
|
|
230
|
-
|
|
231
|
-
Tasks are disabled by default. Enable them with the `enableTasks` prop:
|
|
232
|
-
|
|
233
|
-
```tsx
|
|
234
|
-
<DatePicker enableTasks />
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
When `enableTasks` is on, a **double click** on any date opens a dialog where you can add, edit and delete tasks for that day.
|
|
238
|
-
|
|
239
|
-
Tasks are stored in `localStorage`, so they persist between sessions without any backend.
|
|
240
|
-
|
|
241
|
-
## Types
|
|
242
|
-
|
|
243
|
-
All types are exported from the package:
|
|
244
|
-
|
|
245
|
-
```ts
|
|
246
|
-
import type { FIRST_DAY_OF_WEEK_TYPES, MODES_TYPES } from 'modsen-datepicker';
|
|
247
|
-
|
|
248
|
-
import { FIRST_DAY_OF_WEEK, MODES } from 'modsen-datepicker';
|
|
249
|
-
```
|
|
250
|
-
|
|
251
|
-
### `FIRST_DAY_OF_WEEK`
|
|
252
|
-
|
|
253
|
-
Defines which day the week starts on.
|
|
254
|
-
|
|
255
|
-
| Constant | Value | Day |
|
|
256
|
-
| -------------------------- | ----- | ------ |
|
|
257
|
-
| `FIRST_DAY_OF_WEEK.SUNDAY` | `0` | Sunday |
|
|
258
|
-
| `FIRST_DAY_OF_WEEK.MONDAY` | `1` | Monday |
|
|
259
|
-
|
|
260
|
-
```ts
|
|
261
|
-
export type FIRST_DAY_OF_WEEK_TYPES = 0 | 1;
|
|
262
|
-
```
|
|
263
|
-
|
|
264
|
-
**Example:**
|
|
265
|
-
|
|
266
|
-
```tsx
|
|
267
|
-
<BaseCalendar
|
|
268
|
-
monthDate={new Date()}
|
|
269
|
-
firstDayOfWeek={FIRST_DAY_OF_WEEK.MONDAY}
|
|
270
|
-
/>
|
|
271
|
-
```
|
|
272
|
-
|
|
273
|
-
### `MODES`
|
|
274
|
-
|
|
275
|
-
Defines the calendar display mode.
|
|
276
|
-
|
|
277
|
-
| Constant | Value | Description |
|
|
278
|
-
| ------------- | --------- | ----------- |
|
|
279
|
-
| `MODES.WEEK` | `'week'` | Week view |
|
|
280
|
-
| `MODES.MONTH` | `'month'` | Month view |
|
|
281
|
-
|
|
282
|
-
```ts
|
|
283
|
-
export type MODES_TYPES = 'week' | 'month';
|
|
284
|
-
```
|
|
285
|
-
|
|
286
|
-
**Example:**
|
|
287
|
-
|
|
288
|
-
```tsx
|
|
289
|
-
<BaseCalendar monthDate={new Date()} mode={MODES.WEEK} />
|
|
290
|
-
```
|
|
291
|
-
|
|
292
|
-
## Theming
|
|
293
|
-
|
|
294
|
-
The library ships with light and dark themes out of the box — no extra configuration is required. The theme is applied automatically via a class on the `<html>` element:
|
|
295
|
-
|
|
296
|
-
- `theme-light` — light theme
|
|
297
|
-
- `theme-dark` — dark theme
|
|
298
|
-
|
|
299
|
-
<div align="center">
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
</div>
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# Modsen DatePicker Library
|
|
4
|
+
|
|
5
|
+
**Three calendar components for React: BaseCalendar, DatePicker and RangePicker**
|
|
6
|
+
|
|
7
|
+
[Installation](#installation) • [Usage](#usage) • [API](#api) • [Types](#types) • [Demo](https://6a88497b3bbc2742a15109b2-cxguycdfyi.chromatic.com/)
|
|
8
|
+
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Features
|
|
14
|
+
|
|
15
|
+
- **BaseCalendar** — a simple calendar for viewing and selecting dates
|
|
16
|
+
- **DatePicker** — single date selection via `selectedDate`
|
|
17
|
+
- **RangePicker** — range selection via `rangeStart` / `rangeEnd`
|
|
18
|
+
- **Flexible configuration** — `minDate`, `maxDate`, first day of week, display modes
|
|
19
|
+
- **Hide weekends** — `hideWeekends`
|
|
20
|
+
- **Holidays** — `showHolidays`, highlights public holidays based on the region (browser language)
|
|
21
|
+
- **Tasks** — `enableTasks`, shows task indicators on dates and enables the built-in task manager- **Light and dark themes** — via CSS class on `<html>`
|
|
22
|
+
- **TypeScript** — fully typed props out of the box
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
## Installation
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install @daryasidorovich/modsen-datepicker
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Or via yarn:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
yarn add @daryasidorovich/mmodsen-datepicker
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Requires **React 19+**.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
## API
|
|
43
|
+
|
|
44
|
+
### Shared props (all components)
|
|
45
|
+
|
|
46
|
+
| Prop | Type | Default | Description |
|
|
47
|
+
| ---------------- | ------------------------- | ------------ | -------------------------------------------------- |
|
|
48
|
+
| `monthDate` | `Date` | `new Date()` | **Required.** The month being displayed |
|
|
49
|
+
| `minDate` | `Date` | — | Minimum selectable date |
|
|
50
|
+
| `maxDate` | `Date` | — | Maximum selectable date |
|
|
51
|
+
| `firstDayOfWeek` | `FIRST_DAY_OF_WEEK_TYPES` | `0` | First day of the week (`0` — Sunday, `1` — Monday) |
|
|
52
|
+
| `mode` | `MODES_TYPES` | `'month'` | Display mode: `'week'` or `'month'` |
|
|
53
|
+
| `hideWeekends` | `boolean` | `false` | Hide Saturday and Sunday |
|
|
54
|
+
| `showHolidays` | `boolean` | `false` | Highlight holidays |
|
|
55
|
+
| `enableTasks` | `boolean` | `false` | Enable task indicators and tasks manager |
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Usage
|
|
60
|
+
|
|
61
|
+
### DatePicker
|
|
62
|
+
|
|
63
|
+
Single date selection. Extends the shared props with:
|
|
64
|
+
|
|
65
|
+
| Prop | Type | Description |
|
|
66
|
+
| -------------- | ----------------------------------- | ----------------------------------------- |
|
|
67
|
+
| `selectedDate` | `Date` | The selected date |
|
|
68
|
+
| `onChange` | `(date: Date \| undefined) => void` | Called when a date is selected or cleared |
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { useState } from 'react';
|
|
72
|
+
import { DatePicker } from 'modsen-datepicker';
|
|
73
|
+
|
|
74
|
+
const Example = () => {
|
|
75
|
+
const [selectedDate, setSelectedDate] = useState<Date | undefined>();
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<DatePicker
|
|
79
|
+
monthDate={new Date()}
|
|
80
|
+
selectedDate={selectedDate}
|
|
81
|
+
onChange={(date) => setSelectedDate(date)}
|
|
82
|
+
/>
|
|
83
|
+
);
|
|
84
|
+
};
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
<div align="center">
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
### RangePicker
|
|
93
|
+
|
|
94
|
+
Range selection. Extends the shared props with:
|
|
95
|
+
|
|
96
|
+
| Prop | Type | Description |
|
|
97
|
+
| --------------- | ----------------------- | -------------------------------------------------- |
|
|
98
|
+
| `rangeStart` | `Date` | Start of the range |
|
|
99
|
+
| `rangeEnd` | `Date` | End of the range |
|
|
100
|
+
| `onChangeStart` | `(date?: Date) => void` | Called when the start of the range changes |
|
|
101
|
+
| `onChangeEnd` | `(date?: Date) => void` | Called when the end of the range changes or clears |
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import { useState } from 'react';
|
|
105
|
+
import { RangePicker } from 'modsen-datepicker';
|
|
106
|
+
|
|
107
|
+
const Example = () => {
|
|
108
|
+
const [rangeStart, setRangeStart] = useState<Date | undefined>();
|
|
109
|
+
const [rangeEnd, setRangeEnd] = useState<Date | undefined>();
|
|
110
|
+
|
|
111
|
+
return (
|
|
112
|
+
<RangePicker
|
|
113
|
+
monthDate={new Date()}
|
|
114
|
+
rangeStart={rangeStart}
|
|
115
|
+
rangeEnd={rangeEnd}
|
|
116
|
+
onChangeStart={setRangeStart}
|
|
117
|
+
onChangeEnd={setRangeEnd}
|
|
118
|
+
/>
|
|
119
|
+
);
|
|
120
|
+
};
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
<div align="center">
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
### BaseCalendar
|
|
129
|
+
|
|
130
|
+
A simple calendar for viewing and selecting dates. It has no built-in selection logic — you control everything through `onDateClick`. Accepts `selectedDate`, `rangeStart` and `rangeEnd` purely for display.
|
|
131
|
+
|
|
132
|
+
| Prop | Type | Description |
|
|
133
|
+
| -------------- | -------------------------------------- | ----------------------------------------------------------------- |
|
|
134
|
+
| `selectedDate` | `Date` | The date to highlight as selected |
|
|
135
|
+
| `rangeStart` | `Date` | Start of the range to highlight |
|
|
136
|
+
| `rangeEnd` | `Date` | End of the range to highlight |
|
|
137
|
+
| `onDateClick` | `(e: MouseEvent) => void, date: Date)` | Called on every date click — define your own selection logic here |
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
import { BaseCalendar, FIRST_DAY_OF_WEEK } from 'modsen-datepicker';
|
|
141
|
+
|
|
142
|
+
const Example = () => {
|
|
143
|
+
return (
|
|
144
|
+
<BaseCalendar
|
|
145
|
+
monthDate={new Date()}
|
|
146
|
+
selectedDate={new Date()}
|
|
147
|
+
firstDayOfWeek={FIRST_DAY_OF_WEEK.MONDAY}
|
|
148
|
+
onDateClick={(date, e) => {
|
|
149
|
+
if (e.ctrlKey) {
|
|
150
|
+
console.log('Ctrl + click', date);
|
|
151
|
+
} else {
|
|
152
|
+
console.log('Click', date);
|
|
153
|
+
}
|
|
154
|
+
}}
|
|
155
|
+
/>
|
|
156
|
+
);
|
|
157
|
+
};
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
<div align="center">
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
## Callbacks
|
|
166
|
+
|
|
167
|
+
All callbacks receive the **final, validated** value — never an intermediate state.
|
|
168
|
+
|
|
169
|
+
| Component | Callback | Signature | When it fires |
|
|
170
|
+
| ------------- | --------------- | ----------------------- | ----------------------------------------------- |
|
|
171
|
+
| `DatePicker` | `onChange` | `(date: Date | undefined) => void` | On date select or clear |
|
|
172
|
+
| `RangePicker` | `onChangeStart` | `(date?: Date) => void` | When the start of the range changes |
|
|
173
|
+
| `RangePicker` | `onChangeEnd` | `(date?: Date) => void` | When the end of the range changes or is cleared |
|
|
174
|
+
|
|
175
|
+
## Input validation
|
|
176
|
+
|
|
177
|
+
The input is `masked` (dd/mm/yyyy) and validated:
|
|
178
|
+
|
|
179
|
+
- **Mask** — accepts only digits and inserts separators automatically.
|
|
180
|
+
|
|
181
|
+
- **Invalid date**- — if the value cannot be parsed, the input shows Invalid date and the selection is cleared.
|
|
182
|
+
|
|
183
|
+
- **Out of range** — if minDate or maxDate is set and the value falls outside, the input shows the corresponding error and the value is rejected.
|
|
184
|
+
|
|
185
|
+
<div align="center">
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
## Interaction
|
|
191
|
+
|
|
192
|
+
### Single date (DatePicker)
|
|
193
|
+
|
|
194
|
+
A regular click selects a date and calls `onChange` with the new value.
|
|
195
|
+
|
|
196
|
+
```tsx
|
|
197
|
+
<DatePicker
|
|
198
|
+
monthDate={new Date()}
|
|
199
|
+
selectedDate={selectedDate}
|
|
200
|
+
onChange={(date) => setSelectedDate(date)}
|
|
201
|
+
/>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
Clicking the same date again clears the selection and calls `onChange(undefined)`.
|
|
205
|
+
|
|
206
|
+
### Range (RangePicker)
|
|
207
|
+
|
|
208
|
+
Clicks build the range step by step:
|
|
209
|
+
|
|
210
|
+
1. First click sets `rangeStart` — `onChangeStart(date)` is called.
|
|
211
|
+
2. Second click sets `rangeEnd` — `onChangeEnd(date)` is called.
|
|
212
|
+
3. If the second click is earlier than `rangeStart`, the values are swapped and both callbacks receive the corrected pair.
|
|
213
|
+
4. If the range is already complete, the next click starts a new range — `onChangeStart(date)` and `onChangeEnd(undefined)`.
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
<RangePicker
|
|
217
|
+
monthDate={new Date()}
|
|
218
|
+
rangeStart={rangeStart}
|
|
219
|
+
rangeEnd={rangeEnd}
|
|
220
|
+
onChangeStart={setRangeStart}
|
|
221
|
+
onChangeEnd={setRangeEnd}
|
|
222
|
+
/>
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
### Ctrl + click
|
|
226
|
+
|
|
227
|
+
If the range is already selected and the user holds **Ctrl** while clicking, the end of the range is reset to the clicked date. The start stays the same. Only `onChangeEnd(date)` is called.
|
|
228
|
+
|
|
229
|
+
## Tasks
|
|
230
|
+
|
|
231
|
+
Tasks are disabled by default. Enable them with the `enableTasks` prop:
|
|
232
|
+
|
|
233
|
+
```tsx
|
|
234
|
+
<DatePicker enableTasks />
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
When `enableTasks` is on, a **double click** on any date opens a dialog where you can add, edit and delete tasks for that day.
|
|
238
|
+
|
|
239
|
+
Tasks are stored in `localStorage`, so they persist between sessions without any backend.
|
|
240
|
+
|
|
241
|
+
## Types
|
|
242
|
+
|
|
243
|
+
All types are exported from the package:
|
|
244
|
+
|
|
245
|
+
```ts
|
|
246
|
+
import type { FIRST_DAY_OF_WEEK_TYPES, MODES_TYPES } from 'modsen-datepicker';
|
|
247
|
+
|
|
248
|
+
import { FIRST_DAY_OF_WEEK, MODES } from 'modsen-datepicker';
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### `FIRST_DAY_OF_WEEK`
|
|
252
|
+
|
|
253
|
+
Defines which day the week starts on.
|
|
254
|
+
|
|
255
|
+
| Constant | Value | Day |
|
|
256
|
+
| -------------------------- | ----- | ------ |
|
|
257
|
+
| `FIRST_DAY_OF_WEEK.SUNDAY` | `0` | Sunday |
|
|
258
|
+
| `FIRST_DAY_OF_WEEK.MONDAY` | `1` | Monday |
|
|
259
|
+
|
|
260
|
+
```ts
|
|
261
|
+
export type FIRST_DAY_OF_WEEK_TYPES = 0 | 1;
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
**Example:**
|
|
265
|
+
|
|
266
|
+
```tsx
|
|
267
|
+
<BaseCalendar
|
|
268
|
+
monthDate={new Date()}
|
|
269
|
+
firstDayOfWeek={FIRST_DAY_OF_WEEK.MONDAY}
|
|
270
|
+
/>
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
### `MODES`
|
|
274
|
+
|
|
275
|
+
Defines the calendar display mode.
|
|
276
|
+
|
|
277
|
+
| Constant | Value | Description |
|
|
278
|
+
| ------------- | --------- | ----------- |
|
|
279
|
+
| `MODES.WEEK` | `'week'` | Week view |
|
|
280
|
+
| `MODES.MONTH` | `'month'` | Month view |
|
|
281
|
+
|
|
282
|
+
```ts
|
|
283
|
+
export type MODES_TYPES = 'week' | 'month';
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
**Example:**
|
|
287
|
+
|
|
288
|
+
```tsx
|
|
289
|
+
<BaseCalendar monthDate={new Date()} mode={MODES.WEEK} />
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
## Theming
|
|
293
|
+
|
|
294
|
+
The library ships with light and dark themes out of the box — no extra configuration is required. The theme is applied automatically via a class on the `<html>` element:
|
|
295
|
+
|
|
296
|
+
- `theme-light` — light theme
|
|
297
|
+
- `theme-dark` — dark theme
|
|
298
|
+
|
|
299
|
+
<div align="center">
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
</div>
|
package/dist/index.cjs
CHANGED
|
@@ -6453,8 +6453,8 @@ const WeekDay = ({ firstDayOfWeek = 1, className = '', hideWeekends = false, })
|
|
|
6453
6453
|
}) }));
|
|
6454
6454
|
};
|
|
6455
6455
|
|
|
6456
|
-
var css$3 = ".
|
|
6457
|
-
var modules_efc4e723$3 = {"calendarGrid":"
|
|
6456
|
+
var css$3 = ".styles_module_calendarGrid__a4a27900 {\n border-style: solid;\n border-width: 1px;\n}\n.theme-light .styles_module_calendarGrid__a4a27900 {\n border-color: #e1e1e1;\n background-color: #ffffff;\n}\n.theme-dark .styles_module_calendarGrid__a4a27900 {\n border-color: #aaaaaa;\n background-color: #333333;\n}\n.styles_module_calendarGrid__a4a27900 {\n padding: 10px;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n width: 262px;\n}";
|
|
6457
|
+
var modules_efc4e723$3 = {"calendarGrid":"styles_module_calendarGrid__a4a27900"};
|
|
6458
6458
|
n(css$3,{});
|
|
6459
6459
|
|
|
6460
6460
|
const BaseCalendar = ({ mode = MODES.MONTH, monthDate, firstDayOfWeek = 1, hideWeekends = false, ...props }) => {
|
|
@@ -6573,8 +6573,8 @@ function useValidate(selectedDate) {
|
|
|
6573
6573
|
};
|
|
6574
6574
|
}
|
|
6575
6575
|
|
|
6576
|
-
var css$2 = ".
|
|
6577
|
-
var modules_efc4e723$2 = {"datepicker":"
|
|
6576
|
+
var css$2 = ".styles_module_datepicker__56a414ad {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 8px;\n width: 262px;\n}\n.theme-light .styles_module_datepicker__56a414ad {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_datepicker__56a414ad {\n background-color: #333333;\n}";
|
|
6577
|
+
var modules_efc4e723$2 = {"datepicker":"styles_module_datepicker__56a414ad"};
|
|
6578
6578
|
n(css$2,{});
|
|
6579
6579
|
|
|
6580
6580
|
const DatePicker = ({ selectedDate, monthDate = new Date(), onChange, ...props }) => {
|
|
@@ -6604,8 +6604,8 @@ const Clear = ({ onClick }) => {
|
|
|
6604
6604
|
return (jsxRuntime.jsx("button", { className: modules_efc4e723$1.clear, type: "button", onClick: onClick, children: "Clear" }));
|
|
6605
6605
|
};
|
|
6606
6606
|
|
|
6607
|
-
var css = ".
|
|
6608
|
-
var modules_efc4e723 = {"rangePicker":"
|
|
6607
|
+
var css = ".styles_module_rangePicker__2a1e1dc4 {\n display: flex;\n flex-direction: column;\n padding: 8px;\n width: 262px;\n}\n.theme-light .styles_module_rangePicker__2a1e1dc4 {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_rangePicker__2a1e1dc4 {\n background-color: #333333;\n}\n\n.styles_module_calendar__2a1e1dc4 {\n margin-top: 15px;\n}\n\n.styles_module_inputs__2a1e1dc4 {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}";
|
|
6608
|
+
var modules_efc4e723 = {"rangePicker":"styles_module_rangePicker__2a1e1dc4","calendar":"styles_module_calendar__2a1e1dc4","inputs":"styles_module_inputs__2a1e1dc4"};
|
|
6609
6609
|
n(css,{});
|
|
6610
6610
|
|
|
6611
6611
|
const RangePicker = ({ rangeStart, rangeEnd, monthDate = new Date(), onChangeStart, onChangeEnd, ...props }) => {
|