@mngh/jalali-datepicker 1.0.6 → 1.1.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 +122 -162
- package/dist/components/DayCell.d.ts +3 -7
- package/dist/components/DayCell.d.ts.map +1 -1
- package/dist/components/Header.d.ts +5 -0
- package/dist/components/Header.d.ts.map +1 -1
- package/dist/components/JalaliDatePicker.d.ts +14 -2
- package/dist/components/JalaliDatePicker.d.ts.map +1 -1
- package/dist/components/MonthYearPicker.d.ts +6 -1
- package/dist/components/MonthYearPicker.d.ts.map +1 -1
- package/dist/components/Weekdays.d.ts +2 -2
- package/dist/components/Weekdays.d.ts.map +1 -1
- package/dist/components/dual-calendar/DualMonthCalendar.d.ts.map +1 -1
- package/dist/components/dual-calendar/types.d.ts +7 -0
- package/dist/components/dual-calendar/types.d.ts.map +1 -1
- package/dist/components/footer/CalendarFooter.d.ts +1 -13
- package/dist/components/footer/CalendarFooter.d.ts.map +1 -1
- package/dist/components/footer/types.d.ts +7 -0
- package/dist/components/footer/types.d.ts.map +1 -1
- package/dist/components/masked-input/MaskedDateInput.d.ts.map +1 -1
- package/dist/components/masked-input/types.d.ts +6 -0
- package/dist/components/masked-input/types.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +887 -551
- package/dist/index.mjs.map +1 -1
- package/dist/plugins/time-picker/TimePicker.d.ts +1 -4
- package/dist/plugins/time-picker/TimePicker.d.ts.map +1 -1
- package/dist/plugins/time-picker/types.d.ts +10 -0
- package/dist/plugins/time-picker/types.d.ts.map +1 -1
- package/dist/theme/style-slots.d.ts +54 -0
- package/dist/theme/style-slots.d.ts.map +1 -1
- package/dist/theme/style-utils.d.ts +2 -0
- package/dist/theme/style-utils.d.ts.map +1 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -63,7 +63,6 @@ import {
|
|
|
63
63
|
JalaliDatePicker,
|
|
64
64
|
DatePickerThemeProvider,
|
|
65
65
|
} from "@mngh/jalali-datepicker";
|
|
66
|
-
import "@mngh/jalali-datepicker/styles.css";
|
|
67
66
|
|
|
68
67
|
export default function App() {
|
|
69
68
|
const [date, setDate] = useState<Date | null>(null);
|
|
@@ -83,6 +82,7 @@ export default function App() {
|
|
|
83
82
|
```
|
|
84
83
|
|
|
85
84
|
That's it — `date` is always a plain JavaScript `Date` object (or `null`). No conversion helpers, no adapters.
|
|
85
|
+
The package ships with self-contained component styles, so there is no separate CSS file to import.
|
|
86
86
|
|
|
87
87
|
---
|
|
88
88
|
|
|
@@ -158,7 +158,6 @@ Opens the calendar in a full-screen dialog with a backdrop blur, scroll locking
|
|
|
158
158
|
mode="single"
|
|
159
159
|
value={date}
|
|
160
160
|
onChange={setDate}
|
|
161
|
-
modalTitle="Choose a date"
|
|
162
161
|
/>
|
|
163
162
|
```
|
|
164
163
|
|
|
@@ -246,9 +245,11 @@ When `enableTime` is set, the resolved `Date` passed to `onChange` already has t
|
|
|
246
245
|
| -------------- | --------------------------------------------------- | ----------- | ----------------------------------------------- |
|
|
247
246
|
| `enableTime` | `boolean` | `false` | Shows the time picker panel below the calendar. |
|
|
248
247
|
| `timeValue` | `{ hour: number; minute: number; second?: number }` | `undefined` | Controlled time value. |
|
|
248
|
+
| `defaultTimeValue` | `{ hour: number; minute: number; second?: number }` | Date/current time | Initial uncontrolled time. |
|
|
249
249
|
| `onTimeChange` | `(time) => void` | `undefined` | Fires when the time inputs change. |
|
|
250
250
|
| `hourStep` | `number` | `1` | Increment for the hour control. |
|
|
251
251
|
| `minuteStep` | `number` | `1` | Increment for the minute control. |
|
|
252
|
+
| `secondStep` | `number` | `1` | Increment for the seconds control. |
|
|
252
253
|
| `showSeconds` | `boolean` | `false` | Shows a seconds column. |
|
|
253
254
|
|
|
254
255
|
### Live masked input
|
|
@@ -260,36 +261,11 @@ When `enableTime` is set, the resolved `Date` passed to `onChange` already has t
|
|
|
260
261
|
value={date}
|
|
261
262
|
onChange={setDate}
|
|
262
263
|
useMaskedInput
|
|
263
|
-
maskFormat="YYYY/MM/DD"
|
|
264
264
|
/>
|
|
265
265
|
```
|
|
266
266
|
|
|
267
267
|
`useMaskedInput` turns the trigger `<input>` into a real-time Persian date mask: digits are inserted into the correct segment as the user types, slashes are auto-inserted, and an invalid segment (e.g. month `13`) is rejected without corrupting the rest of the string.
|
|
268
268
|
|
|
269
|
-
### Shortcuts & presets bar
|
|
270
|
-
|
|
271
|
-
```tsx
|
|
272
|
-
<JalaliDatePicker
|
|
273
|
-
mode="range"
|
|
274
|
-
value={range}
|
|
275
|
-
onChange={setRange}
|
|
276
|
-
enablePresets
|
|
277
|
-
presetsOrientation="horizontal"
|
|
278
|
-
presets={[
|
|
279
|
-
{ label: "Today", getValue: () => [new Date(), new Date()] },
|
|
280
|
-
{ label: "This week", getValue: () => getThisWeekRange() },
|
|
281
|
-
{ label: "This month", getValue: () => getThisMonthRange() },
|
|
282
|
-
{ label: "Last 30 days", getValue: () => getLastNDaysRange(30) },
|
|
283
|
-
]}
|
|
284
|
-
/>
|
|
285
|
-
```
|
|
286
|
-
|
|
287
|
-
| Prop | Type | Default | Description |
|
|
288
|
-
| -------------------- | ---------------------------- | ------------ | ------------------------------------------------------------ |
|
|
289
|
-
| `enablePresets` | `boolean` | `false` | Shows the presets sidebar/bar. |
|
|
290
|
-
| `presetsOrientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Layout of the presets list relative to the calendar. |
|
|
291
|
-
| `presets` | `DatePickerPreset[]` | `[]` | Custom preset buttons; each computes its own value on click. |
|
|
292
|
-
|
|
293
269
|
### Iranian solar holidays & Fridays
|
|
294
270
|
|
|
295
271
|
```tsx
|
|
@@ -298,7 +274,13 @@ When `enableTime` is set, the resolved `Date` passed to `onChange` already has t
|
|
|
298
274
|
value={date}
|
|
299
275
|
onChange={setDate}
|
|
300
276
|
showHolidays
|
|
301
|
-
customHolidays={[
|
|
277
|
+
customHolidays={[
|
|
278
|
+
{
|
|
279
|
+
date: { year: 1405, month: 0, day: 1 },
|
|
280
|
+
title: "شرکت تعطیل است",
|
|
281
|
+
isOff: true,
|
|
282
|
+
},
|
|
283
|
+
]}
|
|
302
284
|
/>
|
|
303
285
|
```
|
|
304
286
|
|
|
@@ -312,13 +294,23 @@ When `showHolidays` is enabled, official Iranian solar-calendar holidays and eve
|
|
|
312
294
|
value={date}
|
|
313
295
|
onChange={setDate}
|
|
314
296
|
events={[
|
|
315
|
-
{
|
|
316
|
-
|
|
297
|
+
{
|
|
298
|
+
id: "standup",
|
|
299
|
+
date: { year: 1405, month: 0, day: 1 },
|
|
300
|
+
color: "blue",
|
|
301
|
+
title: "Team standup",
|
|
302
|
+
},
|
|
303
|
+
{
|
|
304
|
+
id: "deadline",
|
|
305
|
+
date: { year: 1405, month: 0, day: 5 },
|
|
306
|
+
color: "red",
|
|
307
|
+
title: "Deadline",
|
|
308
|
+
},
|
|
317
309
|
]}
|
|
318
310
|
/>
|
|
319
311
|
```
|
|
320
312
|
|
|
321
|
-
Each entry in `events` renders a small colored dot
|
|
313
|
+
Each entry in `events` renders a small colored dot under the corresponding day cell. Its title is included in the cell's accessible label and native tooltip. Up to three event dots are shown per day.
|
|
322
314
|
|
|
323
315
|
### Footer status & action buttons
|
|
324
316
|
|
|
@@ -355,19 +347,12 @@ function CustomCalendar() {
|
|
|
355
347
|
viewYear,
|
|
356
348
|
viewMonth,
|
|
357
349
|
grid,
|
|
358
|
-
selected,
|
|
359
|
-
hoverDate,
|
|
360
350
|
goToPrevMonth,
|
|
361
351
|
goToNextMonth,
|
|
362
|
-
goToPrevYear,
|
|
363
|
-
goToNextYear,
|
|
364
352
|
goToToday,
|
|
365
353
|
selectDate,
|
|
366
354
|
setHoverDate,
|
|
367
355
|
clear,
|
|
368
|
-
isSelected,
|
|
369
|
-
isToday,
|
|
370
|
-
isDisabled,
|
|
371
356
|
} = useJalaliDatePicker({
|
|
372
357
|
mode: "single",
|
|
373
358
|
value: null,
|
|
@@ -391,15 +376,16 @@ function CustomCalendar() {
|
|
|
391
376
|
<div className="grid grid-cols-7">
|
|
392
377
|
{grid.map((cell) => (
|
|
393
378
|
<button
|
|
394
|
-
key={cell.
|
|
379
|
+
key={`${cell.jalali.year}-${cell.jalali.month}-${cell.jalali.day}`}
|
|
395
380
|
role="gridcell"
|
|
396
|
-
disabled={isDisabled
|
|
397
|
-
aria-selected={
|
|
398
|
-
data-today={
|
|
399
|
-
onMouseEnter={() => setHoverDate(cell.
|
|
400
|
-
|
|
381
|
+
disabled={cell.isDisabled || !cell.isCurrentMonth}
|
|
382
|
+
aria-selected={cell.isSelected}
|
|
383
|
+
data-today={cell.isToday}
|
|
384
|
+
onMouseEnter={() => setHoverDate(cell.jalali)}
|
|
385
|
+
onMouseLeave={() => setHoverDate(null)}
|
|
386
|
+
onClick={() => selectDate(cell.jalali)}
|
|
401
387
|
>
|
|
402
|
-
{cell.
|
|
388
|
+
{cell.dayNumber}
|
|
403
389
|
</button>
|
|
404
390
|
))}
|
|
405
391
|
</div>
|
|
@@ -419,18 +405,15 @@ function CustomCalendar() {
|
|
|
419
405
|
| --------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------ |
|
|
420
406
|
| `viewYear` | `number` | The Jalali year currently displayed. |
|
|
421
407
|
| `viewMonth` | `number` | The Jalali month (0-indexed) currently displayed. |
|
|
422
|
-
| `grid` | `
|
|
423
|
-
| `selected` | `
|
|
424
|
-
| `hoverDate` | `
|
|
408
|
+
| `grid` | `JalaliCalendarCell[]` | Flattened 42-cell array, including leading/trailing adjacent-month days. |
|
|
409
|
+
| `selected` | `InternalSelectedValue` | Current Jalali selection, shaped according to `mode`. |
|
|
410
|
+
| `hoverDate` | `JalaliDate \| null` | Date currently under the pointer, used for range-preview rendering. |
|
|
425
411
|
| `goToPrevMonth` / `goToNextMonth` | `() => void` | Step the view by one month. |
|
|
426
|
-
| `goToPrevYear` / `goToNextYear` | `() => void` | Step the view by one year. |
|
|
427
412
|
| `goToToday` | `() => void` | Reset the view to the month containing today. |
|
|
428
|
-
| `
|
|
429
|
-
| `
|
|
413
|
+
| `setView` | `(year, month) => void` | Jump to a specific Jalali year and zero-based month. |
|
|
414
|
+
| `selectDate` | `(date: JalaliDate) => void` | Commit a date into the current selection according to `mode`. |
|
|
415
|
+
| `setHoverDate` | `(date: JalaliDate \| null) => void` | Update the hover-preview date (used for range mode). |
|
|
430
416
|
| `clear` | `() => void` | Reset the selection to its empty state (`null`, `[null, null]`, or `[]`). |
|
|
431
|
-
| `isSelected` | `(date: Date) => boolean` | Whether a given date is part of the current selection. |
|
|
432
|
-
| `isToday` | `(date: Date) => boolean` | Whether a given date is today. |
|
|
433
|
-
| `isDisabled` | `(date: Date) => boolean` | Whether a given date falls outside `minDate`/`maxDate` or matches a custom `disabledDates` rule. |
|
|
434
417
|
|
|
435
418
|
---
|
|
436
419
|
|
|
@@ -440,27 +423,28 @@ function CustomCalendar() {
|
|
|
440
423
|
|
|
441
424
|
| Prop | Type | Default | Description |
|
|
442
425
|
| -------------------- | -------------------------------------------------------- | ------------------------------ | ----------------------------------------------------------- |
|
|
443
|
-
| `variant` | `'inline' \| 'popover' \| 'modal'` | `'
|
|
426
|
+
| `variant` | `'inline' \| 'popover' \| 'modal'` | `'inline'` | How the calendar is presented. |
|
|
444
427
|
| `mode` | `'single' \| 'range' \| 'multiple'` | `'single'` | Selection strategy. |
|
|
445
428
|
| `value` | `Date \| null \| [Date \| null, Date \| null] \| Date[]` | — | Controlled value, shaped by `mode`. |
|
|
446
429
|
| `defaultValue` | same as `value` | `null` / `[null, null]` / `[]` | Uncontrolled initial value. |
|
|
447
430
|
| `onChange` | `(value) => void` | — | Fires whenever the selection changes. |
|
|
448
431
|
| `minDate` | `Date` | `undefined` | Earliest selectable date. |
|
|
449
432
|
| `maxDate` | `Date` | `undefined` | Latest selectable date. |
|
|
450
|
-
| `
|
|
433
|
+
| `isDateDisabled` | `(date: Date) => boolean` | `undefined` | Custom predicate to disable arbitrary dates. |
|
|
451
434
|
| `digitType` | `'persian' \| 'latin'` | `'persian'` | Digit glyphs used throughout the UI. |
|
|
435
|
+
| `direction` | `'rtl' \| 'ltr'` | `'rtl'` | Layout and horizontal keyboard direction. |
|
|
436
|
+
| `firstDayOfWeek` | `0 \| 1 \| ... \| 6` | `0` (Saturday) | First day shown in each week. |
|
|
437
|
+
| `initialViewDate` | `Date \| JalaliDate` | selected date / today | Initial visible Jalali month. |
|
|
452
438
|
| `numberOfMonths` | `1 \| 2` | `1` | Number of side-by-side month grids. |
|
|
453
439
|
| `enableTime` | `boolean` | `false` | Enables the time picker panel. |
|
|
454
|
-
| `timeValue` | `JalaliTime`
|
|
440
|
+
| `timeValue` | `JalaliTime \| null` | `undefined` | Controlled time-of-day value; `null` resolves to `00:00`. |
|
|
441
|
+
| `defaultTimeValue` | `JalaliTime` | date time / current time | Initial uncontrolled time value. |
|
|
455
442
|
| `onTimeChange` | `(time: JalaliTime) => void` | `undefined` | Fires when the time changes. |
|
|
456
443
|
| `hourStep` | `number` | `1` | Hour increment step. |
|
|
457
444
|
| `minuteStep` | `number` | `1` | Minute increment step. |
|
|
445
|
+
| `secondStep` | `number` | `1` | Second increment step. |
|
|
458
446
|
| `showSeconds` | `boolean` | `false` | Show a seconds column in the time picker. |
|
|
459
447
|
| `useMaskedInput` | `boolean` | `false` | Enables the live typing mask on the trigger input. |
|
|
460
|
-
| `maskFormat` | `string` | `'YYYY/MM/DD'` | Mask pattern for `useMaskedInput`. |
|
|
461
|
-
| `enablePresets` | `boolean` | `false` | Shows the presets bar. |
|
|
462
|
-
| `presetsOrientation` | `'horizontal' \| 'vertical'` | `'vertical'` | Presets bar layout. |
|
|
463
|
-
| `presets` | `DatePickerPreset[]` | `[]` | Custom preset definitions. |
|
|
464
448
|
| `showHolidays` | `boolean` | `false` | Highlights official holidays and Fridays. |
|
|
465
449
|
| `customHolidays` | `CustomHolidayRule[]` | `[]` | Additional holiday rules to highlight. |
|
|
466
450
|
| `events` | `CalendarEvent[]` | `[]` | Event dots/badges rendered on matching day cells. |
|
|
@@ -468,39 +452,34 @@ function CustomCalendar() {
|
|
|
468
452
|
| `showStatusText` | `boolean` | `true` | Shows the selection-summary text in the footer. |
|
|
469
453
|
| `showActions` | `boolean` | `true` | Shows Today/Clear/Confirm buttons in the footer. |
|
|
470
454
|
| `onConfirm` | `(value) => void` | `undefined` | Fires when Confirm is pressed. |
|
|
471
|
-
| `placeholder` | `string` | `''`
|
|
472
|
-
| `
|
|
473
|
-
| `
|
|
474
|
-
| `
|
|
475
|
-
| `
|
|
476
|
-
| `
|
|
477
|
-
| `
|
|
478
|
-
| `weekStartsOn` | `0 \| 1 \| ... \| 6` | `6` (Saturday) | First day of the week in the grid. |
|
|
455
|
+
| `placeholder` | `string` | `'انتخاب تاریخ...'` | Placeholder text for the trigger input (`popover`/`modal`). |
|
|
456
|
+
| `closeOnOutsideClick`| `boolean` | `true` | Closes popover/modal when its outside area is clicked. |
|
|
457
|
+
| `closeOnEscape` | `boolean` | `true` | Closes popover/modal when Escape is pressed. |
|
|
458
|
+
| `onOpenChange` | `(open: boolean) => void` | `undefined` | Reports open-state changes. |
|
|
459
|
+
| `className` / `style`| `string` / `CSSProperties` | `undefined` | Root wrapper overrides. |
|
|
460
|
+
| `classNames` | `DatePickerClassNames` | `{}` | Per-slot class names. |
|
|
461
|
+
| `styles` | `DatePickerStyles` | `{}` | Per-slot inline style overrides. |
|
|
479
462
|
|
|
480
463
|
### Style slots (`classNames` & `styles`)
|
|
481
464
|
|
|
482
465
|
Both `classNames` and `styles` accept the same set of slot keys, letting you target any part of the picker with Tailwind classes or inline styles respectively.
|
|
483
466
|
|
|
484
|
-
| Slot key
|
|
485
|
-
|
|
|
486
|
-
| `root`
|
|
487
|
-
| `input`
|
|
488
|
-
| `calendar`
|
|
489
|
-
| `header`
|
|
490
|
-
| `grid`
|
|
491
|
-
| `
|
|
492
|
-
| `
|
|
493
|
-
| `
|
|
494
|
-
| `
|
|
495
|
-
| `
|
|
496
|
-
| `
|
|
497
|
-
| `
|
|
498
|
-
| `
|
|
499
|
-
| `
|
|
500
|
-
| `footer` | The footer row (status text + actions). |
|
|
501
|
-
| `modalBackdrop` | The backdrop overlay behind the `modal` variant. |
|
|
502
|
-
| `presetsBar` | The presets sidebar/bar container. |
|
|
503
|
-
| `timePicker` | The time picker panel. |
|
|
467
|
+
| Slot key | Targets |
|
|
468
|
+
| -------- | ------- |
|
|
469
|
+
| `root` | Outermost wrapper element. |
|
|
470
|
+
| `input`, `inputWrapper`, `inputClearButton` | Trigger input and masked-input controls. |
|
|
471
|
+
| `calendar`, `calendarBody`, `calendarPanes`, `calendarPane`, `paneDivider` | Calendar panel and one/two-month layout. |
|
|
472
|
+
| `header`, `headerTitle`, `navButton` | Month/year header controls. |
|
|
473
|
+
| `weekdays`, `weekdayCell`, `grid` | Weekday row and date grid. |
|
|
474
|
+
| `dayCell`, `outsideMonthCell`, `todayCell`, `selectedCell`, `disabledCell`, `holidayCell` | Base and state-specific day cells. |
|
|
475
|
+
| `rangeBetweenCell`, `rangeStartCell`, `rangeEndCell` | Range-selection states. |
|
|
476
|
+
| `eventBadges`, `eventBadge` | Event indicator wrapper and dots. |
|
|
477
|
+
| `monthYearPicker`, `yearList`, `yearButton`, `selectedYearButton` | Year picker elements. |
|
|
478
|
+
| `monthGrid`, `monthButton`, `selectedMonthButton` | Month picker elements. |
|
|
479
|
+
| `timePicker`, `timeLabel`, `timeControls`, `timeSelect`, `timeSeparator` | Time-picker elements. |
|
|
480
|
+
| `footer`, `footerStatus`, `footerActions` | Footer layout and status. |
|
|
481
|
+
| `todayButton`, `clearButton`, `confirmButton` | Footer action buttons. |
|
|
482
|
+
| `modalBackdrop`, `closeButton` | Modal backdrop and close control. |
|
|
504
483
|
|
|
505
484
|
```tsx
|
|
506
485
|
<JalaliDatePicker
|
|
@@ -523,9 +502,12 @@ export type SelectedDateValue =
|
|
|
523
502
|
| [Date | null, Date | null]
|
|
524
503
|
| Date[];
|
|
525
504
|
|
|
526
|
-
export
|
|
527
|
-
|
|
528
|
-
|
|
505
|
+
export type DateRange = [Date | null, Date | null];
|
|
506
|
+
|
|
507
|
+
export interface JalaliDate {
|
|
508
|
+
year: number;
|
|
509
|
+
month: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
|
|
510
|
+
day: number;
|
|
529
511
|
}
|
|
530
512
|
|
|
531
513
|
export interface JalaliTime {
|
|
@@ -535,55 +517,34 @@ export interface JalaliTime {
|
|
|
535
517
|
}
|
|
536
518
|
|
|
537
519
|
export interface CalendarEvent {
|
|
538
|
-
|
|
520
|
+
id: string;
|
|
521
|
+
date: JalaliDate;
|
|
522
|
+
title: string;
|
|
523
|
+
description?: string;
|
|
539
524
|
color?: string;
|
|
540
|
-
label?: string;
|
|
541
525
|
}
|
|
542
526
|
|
|
543
527
|
export interface CustomHolidayRule {
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
day: number;
|
|
548
|
-
label?: string;
|
|
528
|
+
date: JalaliDate;
|
|
529
|
+
title: string;
|
|
530
|
+
isOff?: boolean;
|
|
549
531
|
}
|
|
550
532
|
|
|
551
|
-
export interface
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
export interface CalendarCell {
|
|
557
|
-
key: string;
|
|
558
|
-
date: Date;
|
|
559
|
-
dayOfMonth: number;
|
|
533
|
+
export interface JalaliCalendarCell {
|
|
534
|
+
jalali: JalaliDate;
|
|
535
|
+
gregorianDate: Date;
|
|
536
|
+
dayNumber: number;
|
|
560
537
|
isCurrentMonth: boolean;
|
|
538
|
+
isToday: boolean;
|
|
539
|
+
isSelected: boolean;
|
|
540
|
+
isDisabled: boolean;
|
|
541
|
+
isInRange?: boolean;
|
|
542
|
+
isRangeStart?: boolean;
|
|
543
|
+
isRangeEnd?: boolean;
|
|
561
544
|
}
|
|
562
545
|
|
|
563
|
-
export
|
|
564
|
-
|
|
565
|
-
input?: string;
|
|
566
|
-
calendar?: string;
|
|
567
|
-
header?: string;
|
|
568
|
-
grid?: string;
|
|
569
|
-
weekdays?: string;
|
|
570
|
-
dayCell?: string;
|
|
571
|
-
selectedCell?: string;
|
|
572
|
-
todayCell?: string;
|
|
573
|
-
holidayCell?: string;
|
|
574
|
-
inRangeCell?: string;
|
|
575
|
-
rangeStartCell?: string;
|
|
576
|
-
rangeEndCell?: string;
|
|
577
|
-
disabledCell?: string;
|
|
578
|
-
footer?: string;
|
|
579
|
-
modalBackdrop?: string;
|
|
580
|
-
presetsBar?: string;
|
|
581
|
-
timePicker?: string;
|
|
582
|
-
}
|
|
583
|
-
|
|
584
|
-
export type JalaliDatePickerStyles = {
|
|
585
|
-
[K in keyof JalaliDatePickerClassNames]?: React.CSSProperties;
|
|
586
|
-
};
|
|
546
|
+
export type DatePickerClassNames = DatePickerSlots<string>;
|
|
547
|
+
export type DatePickerStyles = DatePickerSlots<React.CSSProperties>;
|
|
587
548
|
```
|
|
588
549
|
|
|
589
550
|
---
|
|
@@ -602,39 +563,39 @@ import { DatePickerThemeProvider } from "@mngh/jalali-datepicker";
|
|
|
602
563
|
</DatePickerThemeProvider>;
|
|
603
564
|
```
|
|
604
565
|
|
|
605
|
-
| Prop
|
|
606
|
-
|
|
|
607
|
-
| `mode`
|
|
566
|
+
| Prop | Type | Default | Description |
|
|
567
|
+
| ------------- | -------------------- | --------- | ---------------------------------------- |
|
|
568
|
+
| `mode` | `'light' \| 'dark'` | `'light'` | Selects the built-in color palette. |
|
|
569
|
+
| `customTheme` | `DeepPartial<Theme>` | `undefined` | Overrides colors, radii, or shadows. |
|
|
608
570
|
|
|
609
|
-
###
|
|
571
|
+
### Sizing variables
|
|
610
572
|
|
|
611
|
-
|
|
573
|
+
The root exposes three layout variables. Override them with `style` or `styles.root` to resize the date grid without breaking its column math:
|
|
612
574
|
|
|
613
575
|
```css
|
|
614
|
-
|
|
615
|
-
--pdp-
|
|
616
|
-
--pdp-
|
|
617
|
-
--pdp-
|
|
618
|
-
--pdp-text-muted: #6b7280;
|
|
619
|
-
--pdp-accent: #2563eb;
|
|
620
|
-
--pdp-accent-contrast: #ffffff;
|
|
621
|
-
--pdp-holiday-color: #dc2626;
|
|
622
|
-
--pdp-cell-size: 2.25rem;
|
|
623
|
-
--pdp-radius: 0.5rem;
|
|
624
|
-
--pdp-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.15);
|
|
576
|
+
.large-picker {
|
|
577
|
+
--pdp-cell-size: 42px;
|
|
578
|
+
--pdp-cell-gap: 5px;
|
|
579
|
+
--pdp-calendar-pane-width: 324px; /* 7 × 42 + 6 × 5 */
|
|
625
580
|
}
|
|
581
|
+
```
|
|
626
582
|
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
}
|
|
583
|
+
Use `customTheme` for palette changes:
|
|
584
|
+
|
|
585
|
+
```tsx
|
|
586
|
+
<DatePickerThemeProvider
|
|
587
|
+
customTheme={{
|
|
588
|
+
colors: { primary: "#0f766e", primaryHover: "#115e59" },
|
|
589
|
+
radii: { lg: "12px" },
|
|
590
|
+
}}
|
|
591
|
+
>
|
|
592
|
+
<JalaliDatePicker className="large-picker" />
|
|
593
|
+
</DatePickerThemeProvider>
|
|
633
594
|
```
|
|
634
595
|
|
|
635
596
|
### Tailwind CSS via `classNames`
|
|
636
597
|
|
|
637
|
-
|
|
598
|
+
Every meaningful element has a class slot for Tailwind or regular CSS. Built-in defaults are inline styles, so use `styles` when overriding the same CSS property; use `classNames` for selectors, states, and properties not already set inline.
|
|
638
599
|
|
|
639
600
|
```tsx
|
|
640
601
|
<JalaliDatePicker
|
|
@@ -651,20 +612,19 @@ Because every slot accepts a plain class string, Tailwind utility classes compos
|
|
|
651
612
|
|
|
652
613
|
## 8. Accessibility & Keyboard Shortcuts
|
|
653
614
|
|
|
654
|
-
The calendar grid uses `role="grid"` / `role="gridcell"` with a roving `tabindex
|
|
615
|
+
The calendar grid uses `role="grid"` / `role="gridcell"` with a roving `tabindex`. Escape closes popover/modal variants and restores focus to the trigger.
|
|
655
616
|
|
|
656
617
|
| Key | Action |
|
|
657
618
|
| ----------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
658
|
-
| `Arrow Left` / `Arrow Right` | Move focus one day (respects `
|
|
619
|
+
| `Arrow Left` / `Arrow Right` | Move focus one day (respects the `direction` prop). |
|
|
659
620
|
| `Arrow Up` / `Arrow Down` | Move focus one week. |
|
|
660
621
|
| `Page Up` / `Page Down` | Move focus to the same day in the previous/next month. |
|
|
661
|
-
| `
|
|
662
|
-
| `
|
|
663
|
-
| `End` | Move focus to the last day of the current week. |
|
|
622
|
+
| `Home` | Move focus to the first day of the current month. |
|
|
623
|
+
| `End` | Move focus to the last day of the current month. |
|
|
664
624
|
| `Enter` / `Space` | Select the focused date. |
|
|
665
625
|
| `Escape` | Close the `popover` or `modal` panel and return focus to the trigger. |
|
|
666
|
-
| `Tab` / `Shift + Tab` | Move focus
|
|
626
|
+
| `Tab` / `Shift + Tab` | Move focus through the available controls in document order. |
|
|
667
627
|
|
|
668
|
-
> **Note:**
|
|
628
|
+
> **Note:** With `direction="rtl"`, `Arrow Left`/`Arrow Right` are swapped automatically so the keys match visual travel.
|
|
669
629
|
|
|
670
630
|
> **Tip:** `modal` variant applies `aria-modal="true"` and `role="dialog"`, and locks background scroll via a `overflow: hidden` toggle on `<body>` while open.
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { JalaliCalendarCell, JalaliDate } from '../core/types';
|
|
3
3
|
import { CalendarEvent } from '../events/types';
|
|
4
4
|
import { DatePickerClassNames, DatePickerStyles } from '../theme/style-slots';
|
|
5
5
|
export interface DayCellProps {
|
|
6
|
-
cell?: JalaliCalendarCell
|
|
7
|
-
day?: number;
|
|
8
|
-
isHoliday?: boolean;
|
|
9
|
-
isDisabled?: boolean;
|
|
10
|
-
});
|
|
6
|
+
cell?: JalaliCalendarCell;
|
|
11
7
|
day?: number;
|
|
12
8
|
isCurrentMonth?: boolean;
|
|
13
9
|
isSelected?: boolean;
|
|
@@ -17,9 +13,9 @@ export interface DayCellProps {
|
|
|
17
13
|
isRangeStart?: boolean;
|
|
18
14
|
isRangeEnd?: boolean;
|
|
19
15
|
disabled?: boolean;
|
|
20
|
-
digitType?: "persian" | "latin";
|
|
21
16
|
holidayTitle?: string;
|
|
22
17
|
events?: CalendarEvent[];
|
|
18
|
+
digitType?: "persian" | "latin";
|
|
23
19
|
tabIndex?: number;
|
|
24
20
|
classNames?: DatePickerClassNames;
|
|
25
21
|
styles?: DatePickerStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DayCell.d.ts","sourceRoot":"","sources":["../../src/components/DayCell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DayCell.d.ts","sourceRoot":"","sources":["../../src/components/DayCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAI9B,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiK1C,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { DatePickerClassNames, DatePickerStyles } from '../theme/style-slots';
|
|
2
3
|
export interface HeaderProps {
|
|
3
4
|
year: number;
|
|
4
5
|
monthName: string;
|
|
@@ -6,6 +7,10 @@ export interface HeaderProps {
|
|
|
6
7
|
onNextMonth: () => void;
|
|
7
8
|
onTitleClick?: () => void;
|
|
8
9
|
isPickerOpen?: boolean;
|
|
10
|
+
digitType?: "persian" | "latin";
|
|
11
|
+
direction?: "rtl" | "ltr";
|
|
12
|
+
classNames?: DatePickerClassNames;
|
|
13
|
+
styles?: DatePickerStyles;
|
|
9
14
|
}
|
|
10
15
|
export declare const Header: React.FC<HeaderProps>;
|
|
11
16
|
//# sourceMappingURL=Header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAG9B,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwJxC,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { SelectionMode, SelectedDateValue } from '../hooks/types';
|
|
3
|
+
import { JalaliDate } from '../core/types';
|
|
3
4
|
import { JalaliTime } from '../plugins/time-picker/types';
|
|
4
5
|
import { CalendarEvent } from '../events/types';
|
|
5
6
|
import { CustomHolidayRule } from '../holidays/types';
|
|
@@ -27,6 +28,10 @@ export interface JalaliDatePickerProps<M extends SelectionMode = "single"> {
|
|
|
27
28
|
placeholder?: string;
|
|
28
29
|
/** شروع هفته (۰ = شنبه) */
|
|
29
30
|
firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
31
|
+
/** تاریخ اولیه برای ماه قابل مشاهده */
|
|
32
|
+
initialViewDate?: Date | JalaliDate;
|
|
33
|
+
/** جهت چیدمان و رفتار کلیدهای افقی */
|
|
34
|
+
direction?: "rtl" | "ltr";
|
|
30
35
|
className?: string;
|
|
31
36
|
style?: React.CSSProperties;
|
|
32
37
|
classNames?: DatePickerClassNames;
|
|
@@ -34,19 +39,26 @@ export interface JalaliDatePickerProps<M extends SelectionMode = "single"> {
|
|
|
34
39
|
showFooter?: boolean;
|
|
35
40
|
showStatusText?: boolean;
|
|
36
41
|
showActions?: boolean;
|
|
37
|
-
onConfirm?: () => void;
|
|
42
|
+
onConfirm?: (value: SelectedDateValue<M>) => void;
|
|
38
43
|
enableTime?: boolean;
|
|
39
44
|
timeValue?: JalaliTime | null;
|
|
40
45
|
defaultTimeValue?: JalaliTime;
|
|
41
46
|
onTimeChange?: (time: JalaliTime) => void;
|
|
42
47
|
minuteStep?: number;
|
|
43
48
|
hourStep?: number;
|
|
49
|
+
secondStep?: number;
|
|
44
50
|
showSeconds?: boolean;
|
|
45
51
|
numberOfMonths?: 1 | 2;
|
|
46
52
|
useMaskedInput?: boolean;
|
|
47
53
|
events?: CalendarEvent[];
|
|
48
54
|
showHolidays?: boolean;
|
|
49
55
|
customHolidays?: CustomHolidayRule[];
|
|
56
|
+
/** بستن popover با کلیک بیرون */
|
|
57
|
+
closeOnOutsideClick?: boolean;
|
|
58
|
+
/** بستن popover/modal با Escape */
|
|
59
|
+
closeOnEscape?: boolean;
|
|
60
|
+
/** اعلان تغییر وضعیت باز/بسته */
|
|
61
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
50
62
|
}
|
|
51
|
-
export declare function JalaliDatePicker<M extends SelectionMode = "single">({ mode, value, defaultValue, onChange, minDate, maxDate, isDateDisabled, firstDayOfWeek, variant, placeholder, digitType, className, style, classNames, styles, showFooter, showStatusText, showActions, onConfirm, enableTime, timeValue, defaultTimeValue, onTimeChange, minuteStep, hourStep, showSeconds, numberOfMonths, useMaskedInput, events, showHolidays, customHolidays, }: JalaliDatePickerProps<M>): React.JSX.Element;
|
|
63
|
+
export declare function JalaliDatePicker<M extends SelectionMode = "single">({ mode, value, defaultValue, onChange, minDate, maxDate, isDateDisabled, firstDayOfWeek, initialViewDate, direction, variant, placeholder, digitType, className, style, classNames, styles, showFooter, showStatusText, showActions, onConfirm, enableTime, timeValue, defaultTimeValue, onTimeChange, minuteStep, hourStep, secondStep, showSeconds, numberOfMonths, useMaskedInput, events, showHolidays, customHolidays, closeOnOutsideClick, closeOnEscape, onOpenChange, }: JalaliDatePickerProps<M>): React.JSX.Element;
|
|
52
64
|
//# sourceMappingURL=JalaliDatePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JalaliDatePicker.d.ts","sourceRoot":"","sources":["../../src/components/JalaliDatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EACV,aAAa,EAGb,iBAAiB,EAElB,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"JalaliDatePicker.d.ts","sourceRoot":"","sources":["../../src/components/JalaliDatePicker.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { JalaliMonthIndex } from '../core/types';
|
|
3
|
+
import { DatePickerClassNames, DatePickerStyles } from '../theme/style-slots';
|
|
2
4
|
export interface MonthYearPickerProps {
|
|
3
5
|
currentYear: number;
|
|
4
6
|
currentMonth: number;
|
|
5
|
-
|
|
7
|
+
yearRangeCount?: number;
|
|
8
|
+
onSelectMonth: (month: JalaliMonthIndex) => void;
|
|
6
9
|
onSelectYear: (year: number) => void;
|
|
10
|
+
classNames?: DatePickerClassNames;
|
|
11
|
+
styles?: DatePickerStyles;
|
|
7
12
|
}
|
|
8
13
|
export declare const MonthYearPicker: React.FC<MonthYearPickerProps>;
|
|
9
14
|
//# sourceMappingURL=MonthYearPicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthYearPicker.d.ts","sourceRoot":"","sources":["../../src/components/MonthYearPicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MonthYearPicker.d.ts","sourceRoot":"","sources":["../../src/components/MonthYearPicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEnF,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgM1D,CAAC"}
|