@progress/kendo-angular-dateinputs 19.1.2-develop.3 → 19.1.2-develop.4
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/calendar.component.d.ts +37 -56
- package/calendar/calendar.module.d.ts +10 -21
- package/calendar/calendars.module.d.ts +10 -21
- package/calendar/localization/calendar-custom-messages.component.d.ts +9 -1
- package/calendar/localization/multiview-calendar-custom-messages.component.d.ts +9 -1
- package/calendar/models/orientation.d.ts +10 -1
- package/calendar/models/selection-range-end.type.d.ts +11 -1
- package/calendar/models/selection-range.interface.d.ts +18 -3
- package/calendar/models/selection.d.ts +19 -4
- package/calendar/models/type.d.ts +7 -3
- package/calendar/models/view.type.d.ts +12 -1
- package/calendar/multiview-calendar.component.d.ts +46 -40
- package/calendar/multiview-calendar.module.d.ts +1 -0
- package/calendar/templates/cell-template.directive.d.ts +16 -19
- package/calendar/templates/century-cell-template.directive.d.ts +15 -19
- package/calendar/templates/decade-cell-template.directive.d.ts +15 -19
- package/calendar/templates/footer-template.directive.d.ts +16 -17
- package/calendar/templates/header-template.directive.d.ts +19 -18
- package/calendar/templates/header-title-template.directive.d.ts +15 -18
- package/calendar/templates/month-cell-template.directive.d.ts +15 -17
- package/calendar/templates/navigation-item-template.directive.d.ts +15 -18
- package/calendar/templates/weeknumber-cell-template.directive.d.ts +15 -17
- package/calendar/templates/year-cell-template.directive.d.ts +15 -20
- package/dateinput/dateinput.component.d.ts +43 -119
- package/dateinput/dateinput.module.d.ts +15 -2
- package/dateinput/localization/dateinput-custom-messages.component.d.ts +18 -1
- package/dateinput/models/format-placeholder.model.d.ts +15 -20
- package/dateinput/models/format-settings.model.d.ts +14 -4
- package/dateinput/models/incremental-steps.model.d.ts +16 -1
- package/datepicker/datepicker.component.d.ts +65 -127
- package/datepicker/datepicker.module.d.ts +11 -2
- package/datepicker/localization/datepicker-custom-messages.component.d.ts +11 -1
- package/daterange/auto-correct-on.type.d.ts +2 -1
- package/daterange/date-range-end-input.directive.d.ts +22 -24
- package/daterange/date-range-popup-template.directive.d.ts +13 -2
- package/daterange/date-range-popup.component.d.ts +83 -73
- package/daterange/date-range-selection.directive.d.ts +10 -9
- package/daterange/date-range-start-input.directive.d.ts +26 -27
- package/daterange/date-range.component.d.ts +1 -6
- package/daterange/date-range.service.d.ts +27 -27
- package/datetimepicker/datetimepicker.component.d.ts +88 -79
- package/datetimepicker/datetimepicker.module.d.ts +16 -2
- package/datetimepicker/localization/datetimepicker-custom-messages.component.d.ts +10 -1
- package/esm2022/calendar/calendar.component.mjs +37 -56
- package/esm2022/calendar/calendar.module.mjs +10 -21
- package/esm2022/calendar/calendars.module.mjs +10 -21
- package/esm2022/calendar/localization/calendar-custom-messages.component.mjs +9 -1
- package/esm2022/calendar/localization/multiview-calendar-custom-messages.component.mjs +9 -1
- package/esm2022/calendar/models/selection-range.interface.mjs +2 -0
- package/esm2022/calendar/models/selection.mjs +11 -0
- package/esm2022/calendar/multiview-calendar.component.mjs +46 -40
- package/esm2022/calendar/multiview-calendar.module.mjs +1 -0
- package/esm2022/calendar/templates/cell-template.directive.mjs +16 -19
- package/esm2022/calendar/templates/century-cell-template.directive.mjs +15 -19
- package/esm2022/calendar/templates/decade-cell-template.directive.mjs +15 -19
- package/esm2022/calendar/templates/footer-template.directive.mjs +16 -17
- package/esm2022/calendar/templates/header-template.directive.mjs +19 -18
- package/esm2022/calendar/templates/header-title-template.directive.mjs +15 -18
- package/esm2022/calendar/templates/month-cell-template.directive.mjs +15 -17
- package/esm2022/calendar/templates/navigation-item-template.directive.mjs +15 -18
- package/esm2022/calendar/templates/weeknumber-cell-template.directive.mjs +15 -17
- package/esm2022/calendar/templates/year-cell-template.directive.mjs +15 -20
- package/esm2022/dateinput/dateinput.component.mjs +44 -120
- package/esm2022/dateinput/dateinput.module.mjs +15 -2
- package/esm2022/dateinput/localization/dateinput-custom-messages.component.mjs +18 -1
- package/esm2022/datepicker/datepicker.component.mjs +65 -127
- package/esm2022/datepicker/datepicker.module.mjs +11 -2
- package/esm2022/datepicker/localization/datepicker-custom-messages.component.mjs +11 -1
- package/esm2022/daterange/date-range-end-input.directive.mjs +22 -24
- package/esm2022/daterange/date-range-popup-template.directive.mjs +13 -2
- package/esm2022/daterange/date-range-popup.component.mjs +83 -73
- package/esm2022/daterange/date-range-selection.directive.mjs +10 -9
- package/esm2022/daterange/date-range-start-input.directive.mjs +26 -27
- package/esm2022/daterange/date-range.component.mjs +1 -6
- package/esm2022/daterange/date-range.service.mjs +27 -27
- package/esm2022/datetimepicker/datetimepicker.component.mjs +88 -79
- package/esm2022/datetimepicker/datetimepicker.module.mjs +16 -2
- package/esm2022/datetimepicker/localization/datetimepicker-custom-messages.component.mjs +10 -1
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/timepicker/localization/messages.mjs +14 -14
- package/esm2022/timepicker/localization/timepicker-custom-messages.component.mjs +12 -1
- package/esm2022/timepicker/timepicker.component.mjs +54 -119
- package/esm2022/timepicker/timepicker.module.mjs +13 -2
- package/esm2022/timepicker/timeselector.component.mjs +24 -40
- package/fesm2022/progress-kendo-angular-dateinputs.mjs +870 -1003
- package/package.json +13 -12
- package/timepicker/localization/messages.d.ts +14 -14
- package/timepicker/localization/timepicker-custom-messages.component.d.ts +12 -1
- package/timepicker/timepicker.component.d.ts +50 -115
- package/timepicker/timepicker.module.d.ts +13 -2
- package/timepicker/timeselector.component.d.ts +24 -40
|
@@ -40,7 +40,28 @@ import { FooterTemplateDirective } from '../calendar/templates/footer-template.d
|
|
|
40
40
|
import { WeekDaysFormat } from '../common/models/week-days-format';
|
|
41
41
|
import * as i0 from "@angular/core";
|
|
42
42
|
/**
|
|
43
|
-
* Represents the
|
|
43
|
+
* Represents the Kendo UI DateTimePicker component for Angular.
|
|
44
|
+
* Allows users to select both date and time values from an interactive calendar and time selector.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```typescript
|
|
48
|
+
* @Component({
|
|
49
|
+
* selector: 'my-app',
|
|
50
|
+
* template: `
|
|
51
|
+
* <kendo-datetimepicker
|
|
52
|
+
* [(value)]="dateTimeValue"
|
|
53
|
+
* [format]="'g'"
|
|
54
|
+
* [min]="minDate"
|
|
55
|
+
* [max]="maxDate">
|
|
56
|
+
* </kendo-datetimepicker>
|
|
57
|
+
* `
|
|
58
|
+
* })
|
|
59
|
+
* export class AppComponent {
|
|
60
|
+
* public dateTimeValue: Date = new Date();
|
|
61
|
+
* public minDate: Date = new Date(2000, 0, 1);
|
|
62
|
+
* public maxDate: Date = new Date(2030, 11, 31);
|
|
63
|
+
* }
|
|
64
|
+
* ```
|
|
44
65
|
*/
|
|
45
66
|
export declare class DateTimePickerComponent extends MultiTabStop implements OnInit, OnChanges, AfterViewInit, OnDestroy, ControlValueAccessor, Validator {
|
|
46
67
|
private popupService;
|
|
@@ -97,27 +118,27 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
97
118
|
weekDaysFormat?: WeekDaysFormat;
|
|
98
119
|
/**
|
|
99
120
|
* Displays the days that fall out of the current month in the Calendar ([see example]({% slug datetimepicker_calendar_options %}#toc-displaying-other-month-days)).
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
*
|
|
121
|
+
* You can set this to show or hide days from other months.
|
|
122
|
+
*
|
|
123
|
+
* For infinite Calendar the default value is `false`, while for classic Calendar it is `true`.
|
|
103
124
|
*/
|
|
104
125
|
showOtherMonthDays: boolean;
|
|
105
126
|
/**
|
|
106
|
-
*
|
|
127
|
+
* Sets the value of the DateTimePicker component.
|
|
128
|
+
* You can set a specific date and time for the picker to display and use.
|
|
107
129
|
*
|
|
108
|
-
*
|
|
130
|
+
* The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
|
|
109
131
|
*/
|
|
110
132
|
set value(value: Date | null);
|
|
111
133
|
get value(): Date | null;
|
|
112
134
|
/**
|
|
113
135
|
* Specifies the date format for displaying the input value
|
|
114
|
-
* ([see example]({% slug formats_datetimepicker %}))
|
|
136
|
+
* ([see example]({% slug formats_datetimepicker %})).
|
|
115
137
|
*
|
|
116
|
-
*
|
|
117
|
-
*
|
|
118
|
-
* - [`FormatSettings`]({% slug api_dateinputs_formatsettings %}) - To display different formats when the component is focused or blurred, provide a settings object with specified `inputFormat` and `displayFormat` values.
|
|
138
|
+
* When using a string format, the same format is applied regardless of whether the input is focused or blurred.
|
|
139
|
+
* When using a FormatSettings object, you can specify different inputFormat and displayFormat values for focused and blurred states.
|
|
119
140
|
*
|
|
120
|
-
*
|
|
141
|
+
* If a FormatSettings object is provided, the displayFormat value will be used for the popup TimePicker.
|
|
121
142
|
*/
|
|
122
143
|
set format(format: string | FormatSettings);
|
|
123
144
|
get format(): string | FormatSettings;
|
|
@@ -127,6 +148,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
127
148
|
*
|
|
128
149
|
* The default value is 68, indicating that typing any value less than 69
|
|
129
150
|
* will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
|
|
151
|
+
* @default 68
|
|
130
152
|
*/
|
|
131
153
|
twoDigitYearMax: number;
|
|
132
154
|
/**
|
|
@@ -144,47 +166,53 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
144
166
|
* Configures the popup settings of the DateTimePicker
|
|
145
167
|
* ([see example]({% slug datetimepicker_popup_options %}#toc-customizing-the-popup)).
|
|
146
168
|
*
|
|
147
|
-
* The available options are
|
|
148
|
-
*
|
|
149
|
-
*
|
|
150
|
-
* - `popupClass: String`—Specifies a list of CSS classes that are used to style the popup.
|
|
169
|
+
* The available options are animate which controls the popup animation and by default, the open and close animations are enabled.
|
|
170
|
+
* The `appendTo` option controls the popup container and by default, the popup will be appended to the root component.
|
|
171
|
+
* The `popupClass` option specifies a list of CSS classes that are used to style the popup.
|
|
151
172
|
*/
|
|
152
173
|
set popupSettings(settings: PopupSettings);
|
|
153
174
|
get popupSettings(): PopupSettings;
|
|
154
175
|
/**
|
|
155
|
-
*
|
|
156
|
-
* in the header of the popup(action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
|
|
176
|
+
* Specifies the title of the input element of the DateTimePicker and the title text rendered
|
|
177
|
+
* in the header of the popup (action sheet). Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
|
|
178
|
+
* @default ''
|
|
157
179
|
*/
|
|
158
180
|
adaptiveTitle: string;
|
|
159
181
|
/**
|
|
160
|
-
*
|
|
182
|
+
* Specifies the subtitle text rendered in the header of the popup (action sheet).
|
|
161
183
|
* Applicable only when [`AdaptiveMode` is set to `auto`](slug:api_dateinputs_adaptivemode).
|
|
184
|
+
* @default ''
|
|
162
185
|
*/
|
|
163
186
|
adaptiveSubtitle: string;
|
|
164
187
|
/**
|
|
165
|
-
*
|
|
188
|
+
* Specifies the `disabled` property of the DateTimePicker and determines whether the component is active
|
|
166
189
|
* ([see example]({% slug disabled_datetimepicker %})).
|
|
167
190
|
* To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_datetimepicker#toc-managing-the-datetimepicker-disabled-state-in-reactive-forms).
|
|
191
|
+
* @default false
|
|
168
192
|
*/
|
|
169
193
|
disabled: boolean;
|
|
170
194
|
/**
|
|
171
|
-
*
|
|
195
|
+
* Specifies the read-only state of the DateTimePicker
|
|
172
196
|
* ([see example]({% slug readonly_datetimepicker %}#toc-read-only-datetimepicker)).
|
|
197
|
+
* @default false
|
|
173
198
|
*
|
|
174
199
|
* @default false
|
|
175
200
|
*/
|
|
176
201
|
readonly: boolean;
|
|
177
202
|
/**
|
|
178
|
-
*
|
|
203
|
+
* Determines whether the input field of the DateTimePicker is read-only
|
|
179
204
|
* ([see example]({% slug readonly_datetimepicker %}#toc-read-only-input)).
|
|
180
205
|
*
|
|
181
|
-
*
|
|
206
|
+
* If you set the [`readonly`]({% slug api_dateinputs_datetimepickercomponent %}#toc-readonly) property value to `true`,
|
|
182
207
|
* the input will be rendered in a read-only state regardless of the `readOnlyInput` value.
|
|
208
|
+
*
|
|
209
|
+
* @default false
|
|
183
210
|
*/
|
|
184
211
|
readOnlyInput: boolean;
|
|
185
212
|
/**
|
|
186
213
|
* Determines whether to display the **Cancel** button in the popup
|
|
187
214
|
* ([see example]({% slug datetimepicker_popup_options %}#toc-toggling-the-cancel-button)).
|
|
215
|
+
* @default true
|
|
188
216
|
*/
|
|
189
217
|
cancelButton: boolean;
|
|
190
218
|
/**
|
|
@@ -210,17 +238,14 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
210
238
|
/**
|
|
211
239
|
* Specifies the Calendar type.
|
|
212
240
|
*
|
|
213
|
-
*
|
|
214
|
-
* - `infinite` (default)
|
|
215
|
-
* - `classic`
|
|
216
|
-
*
|
|
241
|
+
* @default 'infinite'
|
|
217
242
|
*/
|
|
218
243
|
calendarType: CalendarType;
|
|
219
244
|
/**
|
|
220
245
|
* Determines whether to enable animation when navigating to previous/next Calendar view.
|
|
221
246
|
* Applies to the [`classic`]({% slug api_dateinputs_datetimepickercomponent %}#toc-calendartype) Calendar only.
|
|
222
247
|
*
|
|
223
|
-
*
|
|
248
|
+
* The feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
|
|
224
249
|
*
|
|
225
250
|
* @default false
|
|
226
251
|
*/
|
|
@@ -228,6 +253,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
228
253
|
/**
|
|
229
254
|
* Determines whether to display a week number column in the `month` view of the popup Calendar
|
|
230
255
|
* ([see example]({% slug datetimepicker_calendar_options %}#toc-week-number-column)).
|
|
256
|
+
* @default false
|
|
231
257
|
*/
|
|
232
258
|
weekNumber: boolean;
|
|
233
259
|
/**
|
|
@@ -249,24 +275,25 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
249
275
|
set max(value: Date | null);
|
|
250
276
|
get max(): Date;
|
|
251
277
|
/**
|
|
252
|
-
* Determines whether the built-in min or max validators are enforced when validating a form
|
|
278
|
+
* Determines whether the built-in `min` or `max` validators are enforced when validating a form
|
|
253
279
|
* ([see example](slug:dateranges_datetimepicker)).
|
|
254
280
|
*
|
|
255
281
|
* @default true
|
|
256
282
|
*/
|
|
257
283
|
rangeValidation: boolean;
|
|
258
284
|
/**
|
|
259
|
-
* Determines whether the built-in validator for disabled
|
|
260
|
-
* date ranges is enforced when validating a form
|
|
285
|
+
* Determines whether the built-in validator for disabled date ranges is enforced when validating a form
|
|
261
286
|
* ([see example](slug:disabled_dates_datetimepicker)).
|
|
287
|
+
* @default true
|
|
262
288
|
*/
|
|
263
289
|
disabledDatesValidation: boolean;
|
|
264
290
|
/**
|
|
265
|
-
* Determines whether the built-in validation for incomplete dates is
|
|
291
|
+
* Determines whether the built-in validation for incomplete dates is enforced when validating a form.
|
|
292
|
+
* @default false
|
|
266
293
|
*/
|
|
267
294
|
incompleteDateValidation: boolean;
|
|
268
295
|
/**
|
|
269
|
-
* Determines whether to
|
|
296
|
+
* Determines whether to auto correct invalid segments automatically.
|
|
270
297
|
*
|
|
271
298
|
* @default true
|
|
272
299
|
*/
|
|
@@ -278,39 +305,40 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
278
305
|
*/
|
|
279
306
|
autoSwitchParts: boolean;
|
|
280
307
|
/**
|
|
281
|
-
*
|
|
308
|
+
* Specifies custom keys that move the focus to the next date format segment.
|
|
282
309
|
*/
|
|
283
310
|
autoSwitchKeys: string[];
|
|
284
311
|
/**
|
|
285
|
-
*
|
|
312
|
+
* Determines whether you can use the mouse scroll to increase or decrease the time segment values.
|
|
286
313
|
*
|
|
287
314
|
* @default true
|
|
288
315
|
*/
|
|
289
316
|
enableMouseWheel: boolean;
|
|
290
317
|
/**
|
|
291
|
-
* Determines
|
|
318
|
+
* Determines whether you can see a blinking caret inside the DateInput when possible.
|
|
292
319
|
*
|
|
293
320
|
* @default false
|
|
294
321
|
*/
|
|
295
322
|
allowCaretMode: boolean;
|
|
296
323
|
/**
|
|
297
|
-
*
|
|
324
|
+
* Renders a clear button when set to `true` after the input text or DateTimePicker value has been changed.
|
|
298
325
|
* Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
|
|
299
326
|
* @default false
|
|
300
327
|
*/
|
|
301
328
|
clearButton: boolean;
|
|
302
329
|
/**
|
|
303
|
-
*
|
|
330
|
+
* Auto fills the rest of the date to the current date when the component loses focus.
|
|
304
331
|
*
|
|
305
332
|
* @default false
|
|
306
333
|
*/
|
|
307
334
|
autoFill: boolean;
|
|
308
335
|
/**
|
|
309
|
-
* Enables or disables the adaptive mode.
|
|
336
|
+
* Enables or disables the adaptive mode. The adaptive rendering is disabled by default.
|
|
337
|
+
* @default 'none'
|
|
310
338
|
*/
|
|
311
339
|
adaptiveMode: AdaptiveMode;
|
|
312
340
|
/**
|
|
313
|
-
*
|
|
341
|
+
* Specifies the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for certain component functionalities.
|
|
314
342
|
*/
|
|
315
343
|
inputAttributes: {
|
|
316
344
|
[key: string]: string;
|
|
@@ -347,7 +375,7 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
347
375
|
*/
|
|
348
376
|
escape: EventEmitter<any>;
|
|
349
377
|
/**
|
|
350
|
-
* Indicates whether the component is currently open.
|
|
378
|
+
* Indicates whether the component is currently open. This is when the popup or action sheet is open.
|
|
351
379
|
*/
|
|
352
380
|
get isOpen(): boolean;
|
|
353
381
|
/**
|
|
@@ -356,44 +384,25 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
356
384
|
get isActive(): boolean;
|
|
357
385
|
set isActive(value: boolean);
|
|
358
386
|
/**
|
|
359
|
-
*
|
|
387
|
+
* Specifies the active tab when opening the popup
|
|
360
388
|
* ([see example]({% slug datetimepicker_popup_options %}#toc-setting-the-default-tab)).
|
|
361
389
|
*/
|
|
362
390
|
set defaultTab(tab: DateTimePickerActiveTab);
|
|
363
391
|
get defaultTab(): DateTimePickerActiveTab;
|
|
364
392
|
/**
|
|
365
|
-
*
|
|
366
|
-
*
|
|
367
|
-
* The possible values are:
|
|
368
|
-
* * `small`
|
|
369
|
-
* * `medium` (Default)
|
|
370
|
-
* * `large`
|
|
371
|
-
* * `none`
|
|
393
|
+
* Specifies the size of the component.
|
|
372
394
|
*
|
|
373
395
|
*/
|
|
374
396
|
set size(size: DateInputSize);
|
|
375
397
|
get size(): DateInputSize;
|
|
376
398
|
/**
|
|
377
|
-
*
|
|
378
|
-
*
|
|
379
|
-
* The possible values are:
|
|
380
|
-
* * `small`
|
|
381
|
-
* * `medium` (Default)
|
|
382
|
-
* * `large`
|
|
383
|
-
* * `full`
|
|
384
|
-
* * `none`
|
|
399
|
+
* Specifies the border radius of the component.
|
|
385
400
|
*
|
|
386
401
|
*/
|
|
387
402
|
set rounded(rounded: DateInputRounded);
|
|
388
403
|
get rounded(): DateInputRounded;
|
|
389
404
|
/**
|
|
390
|
-
*
|
|
391
|
-
*
|
|
392
|
-
* The possible values are:
|
|
393
|
-
* * `solid` (Default)
|
|
394
|
-
* * `flat`
|
|
395
|
-
* * `outline`
|
|
396
|
-
* * `none`
|
|
405
|
+
* Specifies the fill mode of the component.
|
|
397
406
|
*
|
|
398
407
|
*/
|
|
399
408
|
set fillMode(fillMode: DateInputFillMode);
|
|
@@ -565,17 +574,17 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
565
574
|
ngOnChanges(changes: SimpleChanges): void;
|
|
566
575
|
ngOnDestroy(): void;
|
|
567
576
|
/**
|
|
568
|
-
*
|
|
569
|
-
*
|
|
577
|
+
* Focuses the DateTimePicker input if the popup is closed.
|
|
578
|
+
* Moves the focus to the popup content if the popup is open.
|
|
570
579
|
*/
|
|
571
580
|
focus(): void;
|
|
572
581
|
/**
|
|
573
|
-
* Blurs the DateTimePicker.
|
|
582
|
+
* Blurs the DateTimePicker component.
|
|
574
583
|
*/
|
|
575
584
|
blur(): void;
|
|
576
585
|
/**
|
|
577
|
-
* Toggles the visibility of the popup or
|
|
578
|
-
* If you use the `toggle` method to show or hide the popup or
|
|
586
|
+
* Toggles the visibility of the popup or action sheet.
|
|
587
|
+
* If you use the `toggle` method to show or hide the popup or action sheet,
|
|
579
588
|
* the `open` and `close` events do not fire.
|
|
580
589
|
*
|
|
581
590
|
* @param show - The state of the popup.
|
|
@@ -693,21 +702,21 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
693
702
|
private verifyValue;
|
|
694
703
|
private verifyMinMaxRange;
|
|
695
704
|
/**
|
|
696
|
-
* Extracts the time slots and
|
|
697
|
-
* and
|
|
698
|
-
* If the provided format value does not contain any time parts,
|
|
699
|
-
* returns the designated format of the default popup component of the TimePicker
|
|
705
|
+
* Extracts the time slots and literals that are not preceded by date parts
|
|
706
|
+
* and combines the resulting parts into a string.
|
|
707
|
+
* If the provided `format` value does not contain any time parts,
|
|
708
|
+
* returns the designated format of the default popup component of the `TimePicker`.
|
|
700
709
|
*/
|
|
701
710
|
private getTimeSelectorFormat;
|
|
702
711
|
/**
|
|
703
712
|
* Extracts the `displayFormat` from the provided `string | FormatSettings` value.
|
|
704
|
-
*
|
|
713
|
+
* Falls back to the default input value if a falsy value parameter is passed.
|
|
705
714
|
*/
|
|
706
715
|
private getDisplayFormat;
|
|
707
716
|
/**
|
|
708
717
|
* The filter expression that filters out all format parts
|
|
709
718
|
* except for `hour`, `minute`, `second`, `dayperiod`, and specific literals.
|
|
710
|
-
* Literals
|
|
719
|
+
* Literals remain only if they are not preceded by date parts.
|
|
711
720
|
*/
|
|
712
721
|
private timeFormatPartFilter;
|
|
713
722
|
/**
|
|
@@ -720,19 +729,19 @@ export declare class DateTimePickerComponent extends MultiTabStop implements OnI
|
|
|
720
729
|
private closePopup;
|
|
721
730
|
private handleValueChange;
|
|
722
731
|
/**
|
|
723
|
-
* Indicates whether the focus target is part of this component
|
|
724
|
-
*
|
|
732
|
+
* Indicates whether the focus target is part of this component.
|
|
733
|
+
* Checks whether the focus target is inside the component or in the popup.
|
|
725
734
|
*/
|
|
726
735
|
private focusTargetInComponent;
|
|
727
736
|
private setTimeSelectorMinMax;
|
|
728
737
|
private setCalendarValue;
|
|
729
738
|
/**
|
|
730
|
-
*
|
|
739
|
+
* Runs a popup change detection if the popup is available.
|
|
731
740
|
*/
|
|
732
741
|
private detectPopupChanges;
|
|
733
742
|
/**
|
|
734
|
-
*
|
|
735
|
-
*
|
|
743
|
+
* Runs the provided function either in the Angular zone or in the current zone.
|
|
744
|
+
* The execution zone depends on the predicate `runInZone` value that is passed.
|
|
736
745
|
*/
|
|
737
746
|
private run;
|
|
738
747
|
private handleDateCompletenessChange;
|
|
@@ -17,8 +17,22 @@ import * as i11 from "../calendar/templates/weeknumber-cell-template.directive";
|
|
|
17
17
|
import * as i12 from "../calendar/templates/year-cell-template.directive";
|
|
18
18
|
import * as i13 from "@progress/kendo-angular-common";
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
21
|
-
*
|
|
20
|
+
* Required for adding all DateTimePicker features in [NgModule-based](link:site.data.urls.angular['ngmoduleapi']) Angular applications.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```typescript
|
|
24
|
+
* import { NgModule } from '@angular/core';
|
|
25
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
|
26
|
+
* import { DateTimePickerModule } from '@progress/kendo-angular-dateinputs';
|
|
27
|
+
*
|
|
28
|
+
* @NgModule({
|
|
29
|
+
* imports: [
|
|
30
|
+
* BrowserModule,
|
|
31
|
+
* DateTimePickerModule
|
|
32
|
+
* ]
|
|
33
|
+
* })
|
|
34
|
+
* export class AppModule { }
|
|
35
|
+
* ```
|
|
22
36
|
*/
|
|
23
37
|
export declare class DateTimePickerModule {
|
|
24
38
|
static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerModule, never>;
|
|
@@ -6,7 +6,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
6
6
|
import { DateTimePickerMessages } from './messages';
|
|
7
7
|
import * as i0 from "@angular/core";
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Allows you to override the default messages of the DateTimePicker component ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```html
|
|
13
|
+
* <kendo-datetimepicker>
|
|
14
|
+
* <kendo-datetimepicker-messages
|
|
15
|
+
* toggle="Open calendar">
|
|
16
|
+
* </kendo-datetimepicker-messages>
|
|
17
|
+
* </kendo-datetimepicker>
|
|
18
|
+
* ```
|
|
10
19
|
*/
|
|
11
20
|
export declare class DateTimePickerCustomMessagesComponent extends DateTimePickerMessages {
|
|
12
21
|
protected service: LocalizationService;
|
|
@@ -81,16 +81,9 @@ export const KENDO_INPUT_PROVIDER = {
|
|
|
81
81
|
};
|
|
82
82
|
/**
|
|
83
83
|
* Represents the [Kendo UI Calendar component for Angular](slug:overview_calendar).
|
|
84
|
-
*
|
|
85
84
|
* @example
|
|
86
|
-
* ```
|
|
87
|
-
*
|
|
88
|
-
* selector: 'my-app',
|
|
89
|
-
* template: `
|
|
90
|
-
* <kendo-calendar></kendo-calendar>
|
|
91
|
-
* `
|
|
92
|
-
* })
|
|
93
|
-
* export class AppComponent { }
|
|
85
|
+
* ```html
|
|
86
|
+
* <kendo-calendar></kendo-calendar>
|
|
94
87
|
* ```
|
|
95
88
|
*/
|
|
96
89
|
export class CalendarComponent {
|
|
@@ -108,10 +101,7 @@ export class CalendarComponent {
|
|
|
108
101
|
selectionService;
|
|
109
102
|
pickerService;
|
|
110
103
|
/**
|
|
111
|
-
*
|
|
112
|
-
* The default values per Calendar type are:
|
|
113
|
-
* - `infinite` - false
|
|
114
|
-
* - `classic` - true
|
|
104
|
+
* Shows days that fall outside the current month and the default values per Calendar type are false for infinite and true for classic ([see example]({% slug viewoptions_calendar %}#toc-displaying-other-month-days)).
|
|
115
105
|
*/
|
|
116
106
|
set showOtherMonthDays(_showOtherMonthDays) {
|
|
117
107
|
this._showOtherMonthDays = _showOtherMonthDays;
|
|
@@ -134,11 +124,10 @@ export class CalendarComponent {
|
|
|
134
124
|
return `kendo-popup-${this.bus.calendarId}`;
|
|
135
125
|
}
|
|
136
126
|
/**
|
|
137
|
-
*
|
|
138
|
-
* defines the focused date of the component
|
|
127
|
+
* Specifies the focused date of the Calendar
|
|
139
128
|
* ([see example]({% slug dates_calendar %}#toc-focused-dates)).
|
|
140
129
|
*
|
|
141
|
-
*
|
|
130
|
+
* If the Calendar is outside the `min` or `max` range, the component normalizes the defined `focusedDate`.
|
|
142
131
|
*/
|
|
143
132
|
set focusedDate(focusedDate) {
|
|
144
133
|
if (this.activeViewDate && !isEqual(this._focusedDate, focusedDate)) {
|
|
@@ -168,10 +157,10 @@ export class CalendarComponent {
|
|
|
168
157
|
return this.id + '-header';
|
|
169
158
|
}
|
|
170
159
|
/**
|
|
171
|
-
*
|
|
172
|
-
* defines the minimum allowed date value
|
|
160
|
+
* Specifies the minimum allowed date value
|
|
173
161
|
* ([see example]({% slug dateranges_calendar %})).
|
|
174
|
-
*
|
|
162
|
+
*
|
|
163
|
+
* @default 1900-1-1
|
|
175
164
|
*/
|
|
176
165
|
set min(min) {
|
|
177
166
|
this._min = min || new Date(MIN_DATE);
|
|
@@ -180,10 +169,10 @@ export class CalendarComponent {
|
|
|
180
169
|
return this._min;
|
|
181
170
|
}
|
|
182
171
|
/**
|
|
183
|
-
*
|
|
184
|
-
* defines the maximum allowed date value
|
|
172
|
+
* Specifies the maximum allowed date value
|
|
185
173
|
* ([see example]({% slug dateranges_calendar %})).
|
|
186
|
-
*
|
|
174
|
+
*
|
|
175
|
+
* @default 2099-12-31
|
|
187
176
|
*/
|
|
188
177
|
set max(max) {
|
|
189
178
|
this._max = max || new Date(MAX_DATE);
|
|
@@ -192,29 +181,27 @@ export class CalendarComponent {
|
|
|
192
181
|
return this._max;
|
|
193
182
|
}
|
|
194
183
|
/**
|
|
195
|
-
* Determines whether the built-in min or max validators are enforced when validating a form.
|
|
184
|
+
* Determines whether the built-in `min` or `max` validators are enforced when validating a form.
|
|
196
185
|
*
|
|
197
186
|
* @default false
|
|
198
187
|
*/
|
|
199
188
|
rangeValidation = false;
|
|
200
189
|
/**
|
|
201
|
-
*
|
|
190
|
+
* Specifies the format of the displayed week day names.
|
|
191
|
+
*
|
|
202
192
|
* @default 'short'
|
|
203
193
|
*/
|
|
204
194
|
weekDaysFormat = "short";
|
|
205
195
|
/**
|
|
206
196
|
* Toggles the visibility of the footer.
|
|
197
|
+
*
|
|
207
198
|
* @default false
|
|
208
199
|
*/
|
|
209
200
|
footer = false;
|
|
210
201
|
/**
|
|
211
202
|
* Sets the Calendar selection mode
|
|
212
203
|
* ([see example]({% slug selection_calendar %})).
|
|
213
|
-
*
|
|
214
|
-
* The available values are:
|
|
215
|
-
* * `single` (default)
|
|
216
|
-
* * `multiple`
|
|
217
|
-
* * `range`
|
|
204
|
+
* @default 'single'
|
|
218
205
|
*/
|
|
219
206
|
set selection(_selection) {
|
|
220
207
|
this._selection = _selection;
|
|
@@ -234,7 +221,7 @@ export class CalendarComponent {
|
|
|
234
221
|
/**
|
|
235
222
|
* Sets or gets the `value` property of the Calendar and defines the selected value of the component.
|
|
236
223
|
*
|
|
237
|
-
*
|
|
224
|
+
* The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance when in `single` selection mode, an array of valid JavaScript Date instances when in `multiple` selection mode, or an object of type `SelectionRange` when in `range` selection mode.
|
|
238
225
|
*/
|
|
239
226
|
set value(candidate) {
|
|
240
227
|
this.valueSetter = true;
|
|
@@ -251,9 +238,11 @@ export class CalendarComponent {
|
|
|
251
238
|
*/
|
|
252
239
|
disabled = false;
|
|
253
240
|
/**
|
|
254
|
-
*
|
|
241
|
+
* Specifies the `tabindex` property of the Calendar. Based on the
|
|
255
242
|
* [HTML `tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) behavior,
|
|
256
243
|
* it determines whether the component is focusable.
|
|
244
|
+
*
|
|
245
|
+
* @default 0
|
|
257
246
|
*/
|
|
258
247
|
tabindex = 0;
|
|
259
248
|
/**
|
|
@@ -266,7 +255,7 @@ export class CalendarComponent {
|
|
|
266
255
|
return this.tabindex;
|
|
267
256
|
}
|
|
268
257
|
/**
|
|
269
|
-
*
|
|
258
|
+
* Specifies the dates of the Calendar that will be disabled
|
|
270
259
|
* ([see example]({% slug disabled_dates_calendar %})).
|
|
271
260
|
*/
|
|
272
261
|
set disabledDates(value) {
|
|
@@ -277,37 +266,39 @@ export class CalendarComponent {
|
|
|
277
266
|
return this._disabledDates;
|
|
278
267
|
}
|
|
279
268
|
/**
|
|
280
|
-
*
|
|
281
|
-
* and determines whether the navigation side-bar will be displayed
|
|
269
|
+
* Determines whether the navigation side-bar will be displayed
|
|
282
270
|
* ([see example]({% slug sidebar_calendar %})).
|
|
283
271
|
* Applies to the [`infinite`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
|
|
272
|
+
*
|
|
273
|
+
* @default true
|
|
284
274
|
*/
|
|
285
275
|
navigation = true;
|
|
286
276
|
/**
|
|
287
277
|
* Defines the active view that the Calendar initially renders
|
|
288
278
|
* ([see example]({% slug viewoptions_calendar %})).
|
|
289
|
-
*
|
|
279
|
+
* You have to set `activeView` within the `topView`-`bottomView` range.
|
|
290
280
|
*
|
|
291
|
-
*
|
|
281
|
+
* @default 'month'
|
|
292
282
|
*/
|
|
293
283
|
activeView = CalendarViewEnum[CalendarViewEnum.month];
|
|
294
284
|
/**
|
|
295
285
|
* Defines the bottommost view to which the user can navigate
|
|
296
286
|
* ([see example](slug:viewdepth_calendar)).
|
|
287
|
+
*
|
|
288
|
+
* @default 'month'
|
|
297
289
|
*/
|
|
298
290
|
bottomView = CalendarViewEnum[CalendarViewEnum.month];
|
|
299
291
|
/**
|
|
300
292
|
* Defines the topmost view to which the user can navigate
|
|
301
293
|
* ([see example](slug:viewdepth_calendar)).
|
|
294
|
+
*
|
|
295
|
+
* @default 'century'
|
|
302
296
|
*/
|
|
303
297
|
topView = CalendarViewEnum[CalendarViewEnum.century];
|
|
304
298
|
/**
|
|
305
299
|
* Specifies the Calendar type.
|
|
306
300
|
*
|
|
307
|
-
*
|
|
308
|
-
* - `infinite` (default)
|
|
309
|
-
* - `classic`
|
|
310
|
-
*
|
|
301
|
+
* @default 'infinite'
|
|
311
302
|
*/
|
|
312
303
|
set type(type) {
|
|
313
304
|
this.renderer.removeClass(this.element.nativeElement, `k-calendar-${this.type}`);
|
|
@@ -323,7 +314,7 @@ export class CalendarComponent {
|
|
|
323
314
|
* Determines whether to enable animation when navigating to previous/next view.
|
|
324
315
|
* Applies to the [`classic`]({% slug api_dateinputs_calendarcomponent %}#toc-type) Calendar only.
|
|
325
316
|
*
|
|
326
|
-
*
|
|
317
|
+
* This feature uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). In order to run the animation in browsers that do not support it, you need the `web-animations-js` polyfill.
|
|
327
318
|
*
|
|
328
319
|
* @default false
|
|
329
320
|
*/
|
|
@@ -331,6 +322,8 @@ export class CalendarComponent {
|
|
|
331
322
|
/**
|
|
332
323
|
* Determines whether to display a week number column in the `month` view
|
|
333
324
|
* ([see example]({% slug weeknumcolumn_calendar %})).
|
|
325
|
+
*
|
|
326
|
+
* @default false
|
|
334
327
|
*/
|
|
335
328
|
weekNumber = false;
|
|
336
329
|
/**
|
|
@@ -578,10 +571,10 @@ export class CalendarComponent {
|
|
|
578
571
|
}
|
|
579
572
|
_size = DEFAULT_SIZE;
|
|
580
573
|
/**
|
|
581
|
-
*
|
|
574
|
+
* Specifies which end of the defined selection range should be marked as active.
|
|
575
|
+
* Value will be ignored if the selection range is undefined. If range selection is used then the default value is 'start'.
|
|
582
576
|
*
|
|
583
|
-
*
|
|
584
|
-
* > If range selection is used then the default value is 'start'.
|
|
577
|
+
* @default 'start'
|
|
585
578
|
*/
|
|
586
579
|
set activeRangeEnd(_activeRangeEnd) {
|
|
587
580
|
this._activeRangeEnd = _activeRangeEnd;
|
|
@@ -783,18 +776,6 @@ export class CalendarComponent {
|
|
|
783
776
|
}
|
|
784
777
|
/**
|
|
785
778
|
* Focuses the Calendar by making the table.k-calendar-table element active.
|
|
786
|
-
*
|
|
787
|
-
* @example
|
|
788
|
-
* ```ts
|
|
789
|
-
* _@Component({
|
|
790
|
-
* selector: 'my-app',
|
|
791
|
-
* template: `
|
|
792
|
-
* <button (click)="calendar.focus()">Focus calendar</button>
|
|
793
|
-
* <kendo-calendar #calendar></kendo-calendar>
|
|
794
|
-
* `
|
|
795
|
-
* })
|
|
796
|
-
* export class AppComponent { }
|
|
797
|
-
* ```
|
|
798
779
|
*/
|
|
799
780
|
focus() {
|
|
800
781
|
this.currentlyFocusedElement = this.type === 'infinite' ?
|