@progress/kendo-react-dateinputs 10.1.1-develop.1 → 10.2.0-develop.10
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/calendar/components/ViewList.js +1 -1
- package/calendar/components/ViewList.mjs +3 -1
- package/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +1 -1
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +6 -2
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +1 -1
- package/daterangepicker/DateRangePicker.js +1 -1
- package/daterangepicker/DateRangePicker.mjs +6 -6
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +1 -1
- package/datetimepicker/DateTimeSelector.js +1 -1
- package/datetimepicker/DateTimeSelector.mjs +6 -2
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/index.d.mts +263 -26
- package/index.d.ts +263 -26
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +1 -1
package/index.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ import { FormComponentProps } from '@progress/kendo-react-common';
|
|
|
20
20
|
import { FormComponentValidity } from '@progress/kendo-react-common';
|
|
21
21
|
import { ForwardRefExoticComponent } from 'react';
|
|
22
22
|
import { IntlService } from '@progress/kendo-react-intl';
|
|
23
|
-
import { JSX
|
|
23
|
+
import { JSX } from 'react/jsx-runtime';
|
|
24
24
|
import { LocalizationService } from '@progress/kendo-react-intl';
|
|
25
25
|
import { NumberFormatOptions } from '@progress/kendo-intl';
|
|
26
26
|
import { PopupProps } from '@progress/kendo-react-popup';
|
|
@@ -89,7 +89,7 @@ export declare class CalendarCell extends React_2.Component<CalendarCellProps> {
|
|
|
89
89
|
* @hidden
|
|
90
90
|
*/
|
|
91
91
|
shouldComponentUpdate(nextProps: CalendarCellProps): boolean;
|
|
92
|
-
render():
|
|
92
|
+
render(): JSX.Element;
|
|
93
93
|
private handleClick;
|
|
94
94
|
private handleMouseEnter;
|
|
95
95
|
private handleMouseLeave;
|
|
@@ -164,7 +164,7 @@ declare interface CalendarHeaderProps {
|
|
|
164
164
|
* * [Customizing the title for the current Calendar view]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)
|
|
165
165
|
* * [Customizing the title for the current MultiViewCalendar view]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-view)
|
|
166
166
|
*/
|
|
167
|
-
export declare const CalendarHeaderTitle: (props: CalendarHeaderTitleProps) =>
|
|
167
|
+
export declare const CalendarHeaderTitle: (props: CalendarHeaderTitleProps) => JSX.Element;
|
|
168
168
|
|
|
169
169
|
/**
|
|
170
170
|
* The props which will be received by the custom header title of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-headertitle) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-headertitle).
|
|
@@ -185,7 +185,7 @@ export declare interface CalendarHeaderTitleProps {
|
|
|
185
185
|
* Also used as a custom navigation item for the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem)
|
|
186
186
|
* ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
|
|
187
187
|
*/
|
|
188
|
-
export declare const CalendarNavigationItem: (props: CalendarNavigationItemProps) =>
|
|
188
|
+
export declare const CalendarNavigationItem: (props: CalendarNavigationItemProps) => JSX.Element;
|
|
189
189
|
|
|
190
190
|
/**
|
|
191
191
|
* The props which will be received by the custom navigation item of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-navigationitem).
|
|
@@ -246,109 +246,232 @@ export declare const CalendarPropsContext: React_2.Context<(p: CalendarProps<any
|
|
|
246
246
|
export declare interface CalendarSettings {
|
|
247
247
|
/**
|
|
248
248
|
* Defines the bottommost view to which the user can navigate.
|
|
249
|
+
*
|
|
250
|
+
** @example
|
|
251
|
+
* ```jsx
|
|
252
|
+
* <Calendar bottomView="month" />
|
|
253
|
+
* ```
|
|
249
254
|
*/
|
|
250
255
|
bottomView?: ActiveView;
|
|
251
256
|
/**
|
|
252
257
|
* Sets the `className` of the Calendar.
|
|
258
|
+
*
|
|
259
|
+
** @example
|
|
260
|
+
* ```jsx
|
|
261
|
+
* <Calendar className="custom-class" />
|
|
262
|
+
* ```
|
|
253
263
|
*/
|
|
254
264
|
className?: string;
|
|
255
265
|
/**
|
|
256
266
|
* Sets the default active view of the Calendar.
|
|
257
267
|
* If not set, the Calendar will display the month view.
|
|
268
|
+
*
|
|
269
|
+
** @example
|
|
270
|
+
* ```jsx
|
|
271
|
+
* <Calendar defaultActiveView="year" />
|
|
272
|
+
* ```
|
|
258
273
|
*/
|
|
259
274
|
defaultActiveView?: ActiveView;
|
|
260
275
|
/**
|
|
261
276
|
* Determines whether the Calendar is disabled.
|
|
277
|
+
* ([see example]({% slug disabled_calendar %})).
|
|
278
|
+
*
|
|
279
|
+
** @example
|
|
280
|
+
* ```jsx
|
|
281
|
+
* <Calendar disabled={true} />
|
|
282
|
+
* ```
|
|
262
283
|
*/
|
|
263
284
|
disabled?: boolean;
|
|
264
285
|
/**
|
|
265
286
|
* Sets the initial focused date of the Calendar.
|
|
287
|
+
*
|
|
288
|
+
** @example
|
|
289
|
+
* ```jsx
|
|
290
|
+
* <Calendar focusedDate={new Date()} />
|
|
291
|
+
* ```
|
|
266
292
|
*/
|
|
267
293
|
focusedDate?: Date;
|
|
268
294
|
/**
|
|
269
295
|
* Sets the `id` of the Calendar.
|
|
296
|
+
*
|
|
297
|
+
** @example
|
|
298
|
+
* ```jsx
|
|
299
|
+
* <Calendar id="calendar-id" />
|
|
300
|
+
* ```
|
|
270
301
|
*/
|
|
271
302
|
id?: string;
|
|
272
303
|
/**
|
|
273
304
|
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
|
|
274
|
-
* For example these elements could contain error or hint
|
|
305
|
+
* For example, these elements could contain error or hint messages.
|
|
306
|
+
*
|
|
307
|
+
** @example
|
|
308
|
+
* ```jsx
|
|
309
|
+
* <Calendar ariaDescribedBy="description-id" />
|
|
310
|
+
* ```
|
|
275
311
|
*/
|
|
276
312
|
ariaDescribedBy?: string;
|
|
277
313
|
/**
|
|
278
314
|
* Identifies the element(s) which will label the component.
|
|
315
|
+
*
|
|
316
|
+
** @example
|
|
317
|
+
* ```jsx
|
|
318
|
+
* <Calendar ariaLabelledBy="label-id" />
|
|
319
|
+
* ```
|
|
279
320
|
*/
|
|
280
321
|
ariaLabelledBy?: string;
|
|
281
322
|
/**
|
|
282
323
|
* Sets the maximum allowed date of the Calendar. Defaults to `2099-12-31`.
|
|
324
|
+
* ([see example]({% slug dateranges_calendar %}#toc-max-date)).
|
|
325
|
+
*
|
|
326
|
+
** @example
|
|
327
|
+
* ```jsx
|
|
328
|
+
* <Calendar max={new Date(2099, 11, 31)} />
|
|
329
|
+
* ```
|
|
283
330
|
*/
|
|
284
331
|
max?: Date;
|
|
285
332
|
/**
|
|
286
333
|
* Sets the minimum allowed date of the Calendar. Defaults to `1900-1-1`.
|
|
334
|
+
* ([see example]({% slug dateranges_calendar %}#toc-min-date)).
|
|
335
|
+
*
|
|
336
|
+
** @example
|
|
337
|
+
* ```jsx
|
|
338
|
+
* <Calendar min={new Date(1900, 0, 1)} />
|
|
339
|
+
* ```
|
|
287
340
|
*/
|
|
288
341
|
min?: Date;
|
|
289
342
|
/**
|
|
290
343
|
* Determines if the navigation sidebar will be displayed.
|
|
344
|
+
*
|
|
345
|
+
** @example
|
|
346
|
+
* ```jsx
|
|
347
|
+
* <Calendar navigation={true} />
|
|
348
|
+
* ```
|
|
291
349
|
*/
|
|
292
350
|
navigation?: boolean;
|
|
293
351
|
/**
|
|
294
352
|
* **Deprecated**
|
|
295
353
|
*
|
|
296
354
|
* Toggles the smooth scroll animation on navigation item click. By default, the animation is enabled in React 17.
|
|
355
|
+
*
|
|
356
|
+
** @example
|
|
357
|
+
* ```jsx
|
|
358
|
+
* <Calendar smoothScroll={false} />
|
|
359
|
+
* ```
|
|
297
360
|
*/
|
|
298
361
|
smoothScroll?: boolean;
|
|
299
362
|
/**
|
|
300
363
|
* Fires each time the Calendar is blurred.
|
|
364
|
+
*
|
|
365
|
+
** @example
|
|
366
|
+
* ```jsx
|
|
367
|
+
* <Calendar onBlur={(event) => console.log('Blur event:', event)} />
|
|
368
|
+
* ```
|
|
301
369
|
*/
|
|
302
370
|
onBlur?: (event: React.FocusEvent<any>) => void;
|
|
303
371
|
/**
|
|
304
372
|
* Fires each time the Calendar is focused.
|
|
373
|
+
*
|
|
374
|
+
** @example
|
|
375
|
+
* ```jsx
|
|
376
|
+
* <Calendar onFocus={(event) => console.log('Focus event:', event)} />
|
|
377
|
+
* ```
|
|
305
378
|
*/
|
|
306
379
|
onFocus?: (event: React.FocusEvent<any>) => void;
|
|
307
380
|
/**
|
|
308
381
|
* Sets the `tabIndex` property of the Calendar.
|
|
382
|
+
*
|
|
383
|
+
** @example
|
|
384
|
+
* ```jsx
|
|
385
|
+
* <Calendar tabIndex={0} />
|
|
386
|
+
* ```
|
|
309
387
|
*/
|
|
310
388
|
tabIndex?: number;
|
|
311
389
|
/**
|
|
312
390
|
* Defines the topmost view to which the user can navigate.
|
|
391
|
+
*
|
|
392
|
+
** @example
|
|
393
|
+
* ```jsx
|
|
394
|
+
* <Calendar topView="decade" />
|
|
395
|
+
* ```
|
|
313
396
|
*/
|
|
314
397
|
topView?: ActiveView;
|
|
315
398
|
/**
|
|
316
399
|
* Specifies the possible format options for the displayed Calendar week days' names.
|
|
317
400
|
*
|
|
318
401
|
* @default short
|
|
402
|
+
*
|
|
403
|
+
** @example
|
|
404
|
+
* ```jsx
|
|
405
|
+
* <Calendar weekDaysFormat="short" />
|
|
406
|
+
* ```
|
|
319
407
|
*/
|
|
320
408
|
weekDaysFormat?: WeekDaysFormat;
|
|
321
409
|
/**
|
|
322
410
|
* Determines if the week number column will be displayed.
|
|
411
|
+
*
|
|
412
|
+
** @example
|
|
413
|
+
* ```jsx
|
|
414
|
+
* <Calendar weekNumber={true} />
|
|
415
|
+
* ```
|
|
323
416
|
*/
|
|
324
417
|
weekNumber?: boolean;
|
|
325
418
|
/**
|
|
326
419
|
* Displays the days that fall out of the current month.
|
|
420
|
+
*
|
|
421
|
+
** @example
|
|
422
|
+
* ```jsx
|
|
423
|
+
* <Calendar showOtherMonthDays={true} />
|
|
424
|
+
* ```
|
|
327
425
|
*/
|
|
328
426
|
showOtherMonthDays?: boolean;
|
|
329
427
|
/**
|
|
330
|
-
* Enables the customization or the override of the default Calendar cell
|
|
428
|
+
* Enables the customization or the override of the default Calendar cell.
|
|
331
429
|
* ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-view)).
|
|
430
|
+
*
|
|
431
|
+
** @example
|
|
432
|
+
* ```jsx
|
|
433
|
+
* <Calendar cell={CustomCell} />
|
|
434
|
+
* ```
|
|
332
435
|
*/
|
|
333
436
|
cell?: React.ComponentType<CalendarCellProps>;
|
|
334
437
|
/**
|
|
335
|
-
* Enables the customization or the override of the default week-column cell in the Calendar
|
|
438
|
+
* Enables the customization or the override of the default week-column cell in the Calendar.
|
|
336
439
|
* ([see example]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)).
|
|
440
|
+
*
|
|
441
|
+
** @example
|
|
442
|
+
* ```jsx
|
|
443
|
+
* <Calendar weekCell={CustomWeekCell} />
|
|
444
|
+
* ```
|
|
337
445
|
*/
|
|
338
446
|
weekCell?: React.ComponentType<CalendarWeekCellProps>;
|
|
339
447
|
/**
|
|
340
|
-
* Enables the customization or the override of the default header title in the Calendar
|
|
448
|
+
* Enables the customization or the override of the default header title in the Calendar.
|
|
341
449
|
* ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)).
|
|
450
|
+
*
|
|
451
|
+
** @example
|
|
452
|
+
* ```jsx
|
|
453
|
+
* <Calendar headerTitle={CustomHeaderTitle} />
|
|
454
|
+
* ```
|
|
342
455
|
*/
|
|
343
456
|
headerTitle?: React.ComponentType<CalendarHeaderTitleProps>;
|
|
344
457
|
/**
|
|
345
|
-
* Enables the customization or the override of the default header
|
|
458
|
+
* Enables the customization or the override of the default header in the Calendar.
|
|
346
459
|
* ([see example]({% slug custom_rendering_calendar %}#toc-titles-of-current-views)).
|
|
460
|
+
*
|
|
461
|
+
** @example
|
|
462
|
+
* ```jsx
|
|
463
|
+
* <Calendar header={CustomHeader} />
|
|
464
|
+
* ```
|
|
347
465
|
*/
|
|
348
466
|
header?: React.ComponentType<CalendarHeaderProps>;
|
|
349
467
|
/**
|
|
350
|
-
* Enables the customization or the override of the default navigation item in the Calendar
|
|
468
|
+
* Enables the customization or the override of the default navigation item in the Calendar.
|
|
351
469
|
* ([see example]({% slug custom_rendering_calendar %}#toc-items-in-the-side-navigation)).
|
|
470
|
+
*
|
|
471
|
+
** @example
|
|
472
|
+
* ```jsx
|
|
473
|
+
* <Calendar navigationItem={CustomNavigationItem} />
|
|
474
|
+
* ```
|
|
352
475
|
*/
|
|
353
476
|
navigationItem?: React.ComponentType<CalendarNavigationItemProps>;
|
|
354
477
|
}
|
|
@@ -378,7 +501,7 @@ export declare enum CalendarViewEnum {
|
|
|
378
501
|
* * [Customizing week-column cells in the Calendar]({% slug custom_rendering_calendar %}#toc-cells-inside-the-week-column)
|
|
379
502
|
* * [Customizing week-column cells in the MultiViewCalendar]({% slug custom_rendering_multiviewcalendar %}#toc-cells-inside-the-week-column)
|
|
380
503
|
*/
|
|
381
|
-
export declare const CalendarWeekCell: (props: CalendarWeekCellProps) =>
|
|
504
|
+
export declare const CalendarWeekCell: (props: CalendarWeekCellProps) => JSX.Element;
|
|
382
505
|
|
|
383
506
|
/**
|
|
384
507
|
* The props which will be received by the custom week cell of the [Calendar]({% slug api_dateinputs_calendarprops %}#toc-weekcell) and the [MultiViewCalendar]({% slug api_dateinputs_multiviewcalendarprops %}#toc-weekcell).
|
|
@@ -489,7 +612,7 @@ export declare class CalendarWithoutContext extends React_2.Component<CalendarPr
|
|
|
489
612
|
/**
|
|
490
613
|
* @hidden
|
|
491
614
|
*/
|
|
492
|
-
render():
|
|
615
|
+
render(): JSX.Element;
|
|
493
616
|
private shouldScroll;
|
|
494
617
|
private handleScroll;
|
|
495
618
|
private handleNavigationChange;
|
|
@@ -770,6 +893,12 @@ declare interface DateInputOptions {
|
|
|
770
893
|
* [placeholders]({% slug placeholders_dateinput %}).
|
|
771
894
|
*/
|
|
772
895
|
placeholder?: string | null;
|
|
896
|
+
/**
|
|
897
|
+
* Example usage of the `placeholder` property:
|
|
898
|
+
* ```jsx
|
|
899
|
+
* <DateInput placeholder="Enter a date" />
|
|
900
|
+
* ```
|
|
901
|
+
*/
|
|
773
902
|
/**
|
|
774
903
|
* Determines wether should select the previous segment on backspace.
|
|
775
904
|
*
|
|
@@ -1350,82 +1479,158 @@ export declare interface DatePickerSettings {
|
|
|
1350
1479
|
/**
|
|
1351
1480
|
* Enables the customization or the override of the default Toggle button which is rendered by the DatePicker
|
|
1352
1481
|
* ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-toggle-button)).
|
|
1482
|
+
* Example usage of the `toggleButton` property:
|
|
1483
|
+
* ```jsx
|
|
1484
|
+
* <DatePicker toggleButton={CustomToggleButton} />
|
|
1485
|
+
* ```
|
|
1353
1486
|
*/
|
|
1354
1487
|
toggleButton?: React.ComponentType<ToggleButtonProps>;
|
|
1355
1488
|
/**
|
|
1356
1489
|
* Enables the customization or the override of the default Calendar which is rendered by the DatePicker
|
|
1357
1490
|
* ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-calendar)).
|
|
1491
|
+
* Example usage of the `calendar` property:
|
|
1492
|
+
* ```jsx
|
|
1493
|
+
* <DatePicker calendar={CustomCalendar} />
|
|
1494
|
+
* ```
|
|
1358
1495
|
*/
|
|
1359
1496
|
calendar?: React.ComponentType<CalendarProps<any>> | React.ComponentType<MultiViewCalendarProps<any>>;
|
|
1360
1497
|
/**
|
|
1361
1498
|
* Enables the customization or the override of the default Popup which is rendered by the DatePicker
|
|
1362
1499
|
* ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-popup)).
|
|
1500
|
+
* Example usage of the `popup` property:
|
|
1501
|
+
* ```jsx
|
|
1502
|
+
* <DatePicker popup={CustomPopup} />
|
|
1503
|
+
* ```
|
|
1363
1504
|
*/
|
|
1364
1505
|
popup?: React.ComponentType<PopupProps>;
|
|
1365
1506
|
/**
|
|
1366
1507
|
* Enables the customization or the override of the default DateInput which is rendered by the DatePicker
|
|
1367
1508
|
* ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-dateinput)).
|
|
1509
|
+
* Example usage of the `dateInput` property:
|
|
1510
|
+
* ```jsx
|
|
1511
|
+
* <DatePicker dateInput={CustomDateInput} />
|
|
1512
|
+
* ```
|
|
1368
1513
|
*/
|
|
1369
1514
|
dateInput?: React.ComponentType<DateInputProps<any>>;
|
|
1370
1515
|
/**
|
|
1371
1516
|
* Sets the `className` of the DatePicker.
|
|
1517
|
+
* Example usage of the `className` property:
|
|
1518
|
+
* ```jsx
|
|
1519
|
+
* <DatePicker className="custom-class" />
|
|
1520
|
+
* ```
|
|
1372
1521
|
*/
|
|
1373
1522
|
className?: string;
|
|
1374
1523
|
/**
|
|
1375
1524
|
* Sets the default state of the DatePicker upon render ([see example]({% slug default_value_datepicker %})).
|
|
1525
|
+
* Example usage of the `defaultShow` property:
|
|
1526
|
+
* ```jsx
|
|
1527
|
+
* <DatePicker defaultShow={true} />
|
|
1528
|
+
* ```
|
|
1376
1529
|
*/
|
|
1377
1530
|
defaultShow?: boolean;
|
|
1378
1531
|
/**
|
|
1379
1532
|
* Determines whether the DatePicker is disabled ([see example]({% slug disabled_datepicker %})).
|
|
1533
|
+
* Example usage of the `disabled` property:
|
|
1534
|
+
* ```jsx
|
|
1535
|
+
* <DatePicker disabled={true} />
|
|
1536
|
+
* ```
|
|
1380
1537
|
*/
|
|
1381
1538
|
disabled?: boolean;
|
|
1382
1539
|
/**
|
|
1383
1540
|
* Specifies the focused date of the DatePicker ([see example]({% slug dates_datepicker %})).
|
|
1541
|
+
* Example usage of the `focusedDate` property:
|
|
1542
|
+
* ```jsx
|
|
1543
|
+
* <DatePicker focusedDate={new Date()} />
|
|
1544
|
+
* ```
|
|
1384
1545
|
*/
|
|
1385
1546
|
focusedDate?: Date;
|
|
1386
1547
|
/**
|
|
1387
1548
|
* Specifies the date format that is used to display the input value ([see example]({% slug formats_datepicker %})).
|
|
1549
|
+
* Example usage of the `format` property:
|
|
1550
|
+
* ```jsx
|
|
1551
|
+
* <DatePicker format="MM/dd/yyyy" />
|
|
1552
|
+
* ```
|
|
1388
1553
|
*/
|
|
1389
1554
|
format?: string | DateFormatOptions;
|
|
1390
1555
|
/**
|
|
1391
1556
|
* Defines the descriptions of the format sections in the input field ([more information and examples]({% slug placeholders_datepicker %})).
|
|
1557
|
+
* Example usage of the `formatPlaceholder` property:
|
|
1558
|
+
* ```jsx
|
|
1559
|
+
* <DatePicker formatPlaceholder="Enter date" />
|
|
1560
|
+
* ```
|
|
1392
1561
|
*/
|
|
1393
1562
|
formatPlaceholder?: DateInputFormatPlaceholder;
|
|
1394
1563
|
/**
|
|
1395
1564
|
* Specifies the `id` of the DatePicker.
|
|
1565
|
+
* Example usage of the `id` property:
|
|
1566
|
+
* ```jsx
|
|
1567
|
+
* <DatePicker id="datepicker-id" />
|
|
1568
|
+
* ```
|
|
1396
1569
|
*/
|
|
1397
1570
|
id?: string;
|
|
1398
1571
|
/**
|
|
1399
1572
|
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
|
|
1400
1573
|
* For example these elements could contain error or hint message.
|
|
1574
|
+
* Example usage of the `ariaDescribedBy` property:
|
|
1575
|
+
* ```jsx
|
|
1576
|
+
* <DatePicker ariaDescribedBy="description-id" />
|
|
1577
|
+
* ```
|
|
1401
1578
|
*/
|
|
1402
1579
|
ariaDescribedBy?: string;
|
|
1403
1580
|
/**
|
|
1404
1581
|
* Identifies the element(s) which will label the component.
|
|
1582
|
+
* Example usage of the `ariaLabelledBy` property:
|
|
1583
|
+
* ```jsx
|
|
1584
|
+
* <DatePicker ariaLabelledBy="label-id" />
|
|
1585
|
+
* ```
|
|
1405
1586
|
*/
|
|
1406
1587
|
ariaLabelledBy?: string;
|
|
1407
1588
|
/**
|
|
1408
1589
|
* The accessible label of the component.
|
|
1590
|
+
* Example usage of the `ariaLabel` property:
|
|
1591
|
+
* ```jsx
|
|
1592
|
+
* <DatePicker ariaLabel="Date Picker" />
|
|
1593
|
+
* ```
|
|
1409
1594
|
*/
|
|
1410
1595
|
ariaLabel?: string;
|
|
1411
1596
|
/**
|
|
1412
1597
|
* Specifies the greatest valid date ([see example]({% slug dateranges_datepicker %})).
|
|
1598
|
+
* Example usage of the `max` property:
|
|
1599
|
+
* ```jsx
|
|
1600
|
+
* <DatePicker max={new Date(2099, 11, 31)} />
|
|
1601
|
+
* ```
|
|
1413
1602
|
*/
|
|
1414
1603
|
max?: Date;
|
|
1415
1604
|
/**
|
|
1416
1605
|
* Specifies the smallest valid date ([see example]({% slug dateranges_datepicker %})).
|
|
1606
|
+
* Example usage of the `min` property:
|
|
1607
|
+
* ```jsx
|
|
1608
|
+
* <DatePicker min={new Date(1900, 0, 1)} />
|
|
1609
|
+
* ```
|
|
1417
1610
|
*/
|
|
1418
1611
|
min?: Date;
|
|
1419
1612
|
/**
|
|
1420
1613
|
* Specifies the `name` property of the `input` DOM element.
|
|
1614
|
+
* Example usage of the `name` property:
|
|
1615
|
+
* ```jsx
|
|
1616
|
+
* <DatePicker name="datepicker-name" />
|
|
1617
|
+
* ```
|
|
1421
1618
|
*/
|
|
1422
1619
|
name?: string;
|
|
1423
1620
|
/**
|
|
1424
1621
|
* Fires each time any of the DatePicker elements gets blurred.
|
|
1622
|
+
* Example usage of the `onBlur` property:
|
|
1623
|
+
* ```jsx
|
|
1624
|
+
* <DatePicker onBlur={(event) => console.log('Blur event:', event)} />
|
|
1625
|
+
* ```
|
|
1425
1626
|
*/
|
|
1426
1627
|
onBlur?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
|
|
1427
1628
|
/**
|
|
1428
1629
|
* Fires each time the user focuses any of the DatePicker elements.
|
|
1630
|
+
* Example usage of the `onFocus` property:
|
|
1631
|
+
* ```jsx
|
|
1632
|
+
* <DatePicker onFocus={(event) => console.log('Focus event:', event)} />
|
|
1633
|
+
* ```
|
|
1429
1634
|
*/
|
|
1430
1635
|
onFocus?: (event: React.FocusEvent<HTMLSpanElement | HTMLDivElement>) => void;
|
|
1431
1636
|
/**
|
|
@@ -1435,36 +1640,68 @@ export declare interface DatePickerSettings {
|
|
|
1435
1640
|
* - `animate: Boolean`—Controls the popup animation. By default, the open and close animations are enabled.
|
|
1436
1641
|
* - `appendTo`: — Defines the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
|
|
1437
1642
|
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
|
|
1643
|
+
* Example usage of the `popupSettings` property:
|
|
1644
|
+
* ```jsx
|
|
1645
|
+
* <DatePicker popupSettings={{ animate: true, popupClass: 'custom-popup' }} />
|
|
1646
|
+
* ```
|
|
1438
1647
|
*/
|
|
1439
1648
|
popupSettings?: DateInputsPopupSettings;
|
|
1440
1649
|
/**
|
|
1441
1650
|
* Specifies if the calendar will be displayed ([see example]({% slug controlled_datepicker %}#toc-controlling-the-popup-state)).
|
|
1651
|
+
* Example usage of the `show` property:
|
|
1652
|
+
* ```jsx
|
|
1653
|
+
* <DatePicker show={true} />
|
|
1654
|
+
* ```
|
|
1442
1655
|
*/
|
|
1443
1656
|
show?: boolean;
|
|
1444
1657
|
/**
|
|
1445
1658
|
* Sets the `tabIndex` property of the DatePicker.
|
|
1659
|
+
* Example usage of the `tabIndex` property:
|
|
1660
|
+
* ```jsx
|
|
1661
|
+
* <DatePicker tabIndex={0} />
|
|
1662
|
+
* ```
|
|
1446
1663
|
*/
|
|
1447
1664
|
tabIndex?: number;
|
|
1448
1665
|
/**
|
|
1449
1666
|
* Sets the title of the `input` element of the DatePicker.
|
|
1667
|
+
* Example usage of the `title` property:
|
|
1668
|
+
* ```jsx
|
|
1669
|
+
* <DatePicker title="Date Picker Title" />
|
|
1670
|
+
* ```
|
|
1450
1671
|
*/
|
|
1451
1672
|
title?: string;
|
|
1452
1673
|
/**
|
|
1453
1674
|
* Determines whether to display a week number column in the `month` view of the Calendar ([see example]({% slug weeknumcolumn_datepicker %})).
|
|
1675
|
+
* Example usage of the `weekNumber` property:
|
|
1676
|
+
* ```jsx
|
|
1677
|
+
* <DatePicker weekNumber={true} />
|
|
1678
|
+
* ```
|
|
1454
1679
|
*/
|
|
1455
1680
|
weekNumber?: boolean;
|
|
1456
1681
|
/**
|
|
1457
1682
|
* Specifies the width of the DatePicker.
|
|
1683
|
+
* Example usage of the `width` property:
|
|
1684
|
+
* ```jsx
|
|
1685
|
+
* <DatePicker width="300px" />
|
|
1686
|
+
* ```
|
|
1458
1687
|
*/
|
|
1459
1688
|
width?: number | string;
|
|
1460
1689
|
/**
|
|
1461
1690
|
* Renders a floating label for the DatePicker.
|
|
1691
|
+
* Example usage of the `label` property:
|
|
1692
|
+
* ```jsx
|
|
1693
|
+
* <DatePicker label="Date Picker Label" />
|
|
1694
|
+
* ```
|
|
1462
1695
|
*/
|
|
1463
1696
|
label?: string;
|
|
1464
1697
|
/**
|
|
1465
1698
|
* Specifies the hint the DateInput displays when its value is `null` or there is no partial selection.
|
|
1466
1699
|
* For more information, refer to the article on
|
|
1467
1700
|
* [placeholders]({% slug placeholders_datepicker %}).
|
|
1701
|
+
* Example usage of the `placeholder` property:
|
|
1702
|
+
* ```jsx
|
|
1703
|
+
* <DatePicker placeholder="Enter a date" />
|
|
1704
|
+
* ```
|
|
1468
1705
|
*/
|
|
1469
1706
|
placeholder?: string | null;
|
|
1470
1707
|
}
|
|
@@ -1886,7 +2123,7 @@ export declare class DateRangePickerWithoutContext extends React_2.Component<Dat
|
|
|
1886
2123
|
/**
|
|
1887
2124
|
* @hidden
|
|
1888
2125
|
*/
|
|
1889
|
-
render():
|
|
2126
|
+
render(): JSX.Element;
|
|
1890
2127
|
protected setCalendarRef: (calendar: MultiViewCalendarHandle | null) => void;
|
|
1891
2128
|
protected focusCalendarElement: () => void;
|
|
1892
2129
|
protected focusDateInputElement(): void;
|
|
@@ -2414,7 +2651,7 @@ export declare class DateTimePickerWithoutContext extends React_2.Component<Date
|
|
|
2414
2651
|
/**
|
|
2415
2652
|
* @hidden
|
|
2416
2653
|
*/
|
|
2417
|
-
render():
|
|
2654
|
+
render(): JSX.Element;
|
|
2418
2655
|
private renderPicker;
|
|
2419
2656
|
private renderAdaptivePopup;
|
|
2420
2657
|
protected setShow(show: boolean): void;
|
|
@@ -2599,7 +2836,7 @@ export declare class Header extends React_2.Component<HeaderProps> {
|
|
|
2599
2836
|
protected get max(): Date;
|
|
2600
2837
|
protected get rangeLength(): number;
|
|
2601
2838
|
protected get canMoveUp(): boolean;
|
|
2602
|
-
render():
|
|
2839
|
+
render(): JSX.Element;
|
|
2603
2840
|
protected getTitle: () => string;
|
|
2604
2841
|
private handleTitleClick;
|
|
2605
2842
|
}
|
|
@@ -2656,7 +2893,7 @@ export declare class HorizontalViewList extends React_2.Component<HorizontalView
|
|
|
2656
2893
|
focusActiveDate: () => void;
|
|
2657
2894
|
blurActiveDate: () => void;
|
|
2658
2895
|
componentDidUpdate(): void;
|
|
2659
|
-
render():
|
|
2896
|
+
render(): JSX.Element;
|
|
2660
2897
|
protected rotateSelectionRange: (selectionRange: SelectionRange) => SelectionRange;
|
|
2661
2898
|
private handleWeekCellClick;
|
|
2662
2899
|
private handleDateChange;
|
|
@@ -3171,7 +3408,7 @@ export declare class MultiViewCalendarWithoutContext extends React_2.Component<M
|
|
|
3171
3408
|
/**
|
|
3172
3409
|
* @hidden
|
|
3173
3410
|
*/
|
|
3174
|
-
render():
|
|
3411
|
+
render(): JSX.Element;
|
|
3175
3412
|
protected clampRange: (value: Date) => SelectionRange;
|
|
3176
3413
|
protected rangeWithFocused: (range: SelectionRange, focusedDate: Date) => SelectionRange;
|
|
3177
3414
|
protected generateRange: (candidate: Date, value: SelectionRange) => SelectionRange;
|
|
@@ -3391,7 +3628,7 @@ export declare class TimeList extends React_2.Component<TimeListProps, {}> {
|
|
|
3391
3628
|
/**
|
|
3392
3629
|
* @hidden
|
|
3393
3630
|
*/
|
|
3394
|
-
render():
|
|
3631
|
+
render(): JSX.Element | undefined;
|
|
3395
3632
|
focus: (args?: any) => void;
|
|
3396
3633
|
protected itemOffset: (scrollTop: number) => number;
|
|
3397
3634
|
protected calculateHeights: () => void;
|
|
@@ -3500,7 +3737,7 @@ export declare class TimePart extends React_2.Component<TimePartProps, TimePartS
|
|
|
3500
3737
|
/**
|
|
3501
3738
|
* @hidden
|
|
3502
3739
|
*/
|
|
3503
|
-
render():
|
|
3740
|
+
render(): JSX.Element;
|
|
3504
3741
|
focus: (args?: FocusOptions, focusNowButton?: boolean) => void;
|
|
3505
3742
|
protected timeFormatReducer: (acc: string, current: DateFormatPart) => string;
|
|
3506
3743
|
protected timeFormatFilter: (part: DateFormatPart, index: number, all: DateFormatPart[]) => boolean;
|
|
@@ -4033,7 +4270,7 @@ export declare class TimePickerWithoutContext extends React_2.Component<TimePick
|
|
|
4033
4270
|
/**
|
|
4034
4271
|
* @hidden
|
|
4035
4272
|
*/
|
|
4036
|
-
render():
|
|
4273
|
+
render(): JSX.Element;
|
|
4037
4274
|
private renderTimeSelector;
|
|
4038
4275
|
private renderPopup;
|
|
4039
4276
|
private renderAdaptivePopup;
|
|
@@ -4127,7 +4364,7 @@ export declare class TimeSelector extends React_2.Component<TimeSelectorProps, T
|
|
|
4127
4364
|
/**
|
|
4128
4365
|
* @hidden
|
|
4129
4366
|
*/
|
|
4130
|
-
render():
|
|
4367
|
+
render(): JSX.Element;
|
|
4131
4368
|
focusActiveList: () => void;
|
|
4132
4369
|
protected nextTick(f: () => any): void;
|
|
4133
4370
|
protected hasActiveButton(): boolean | null;
|
|
@@ -4194,7 +4431,7 @@ export declare class TodayCommand extends React_2.Component<TodayCommandProps> {
|
|
|
4194
4431
|
private localization;
|
|
4195
4432
|
protected get todayIsInRange(): boolean;
|
|
4196
4433
|
private handleClick;
|
|
4197
|
-
render():
|
|
4434
|
+
render(): JSX.Element;
|
|
4198
4435
|
}
|
|
4199
4436
|
|
|
4200
4437
|
/**
|
|
@@ -4282,10 +4519,10 @@ export declare class ViewList extends React_2.Component<ViewListProps, ViewListS
|
|
|
4282
4519
|
componentDidUpdate(_prevProps: ViewListProps, _prevState: ViewListState): void;
|
|
4283
4520
|
focusActiveDate: () => void;
|
|
4284
4521
|
blurActiveDate: () => void;
|
|
4285
|
-
render():
|
|
4522
|
+
render(): JSX.Element;
|
|
4286
4523
|
protected handleVirtualizationMount: (virtualization: Virtualization) => void;
|
|
4287
|
-
protected buildMonthView: (cols: any[], weekNames: any[]) =>
|
|
4288
|
-
protected buildDates: (cols: any[], dates: Date[]) =>
|
|
4524
|
+
protected buildMonthView: (cols: any[], weekNames: any[]) => JSX.Element;
|
|
4525
|
+
protected buildDates: (cols: any[], dates: Date[]) => JSX.Element;
|
|
4289
4526
|
protected calculateHeights: () => void;
|
|
4290
4527
|
protected getTake: (skip: number, total: number) => number;
|
|
4291
4528
|
private handleScrollAction;
|
|
@@ -4426,7 +4663,7 @@ export declare class Virtualization extends React_2.Component<VirtualizationProp
|
|
|
4426
4663
|
animateToIndex: (index: number) => void;
|
|
4427
4664
|
scrollToBottom: () => void;
|
|
4428
4665
|
componentDidMount(): void;
|
|
4429
|
-
render():
|
|
4666
|
+
render(): JSX.Element;
|
|
4430
4667
|
protected scrollStep: (start: number, end: number) => number;
|
|
4431
4668
|
protected scrollRange: (indexOffset: number, direction: ScrollDirection) => any;
|
|
4432
4669
|
protected containerMaxScroll: () => number;
|
package/package-metadata.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-dateinputs",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745313606,version:"10.2.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"};exports.packageMetadata=e;
|
package/package-metadata.mjs
CHANGED
|
@@ -10,8 +10,8 @@ const e = {
|
|
|
10
10
|
productName: "KendoReact",
|
|
11
11
|
productCode: "KENDOUIREACT",
|
|
12
12
|
productCodes: ["KENDOUIREACT"],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: "10.
|
|
13
|
+
publishDate: 1745313606,
|
|
14
|
+
version: "10.2.0-develop.10",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
16
16
|
};
|
|
17
17
|
export {
|