@progress/kendo-angular-dateinputs 19.1.2-develop.2 → 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.
Files changed (91) hide show
  1. package/calendar/calendar.component.d.ts +37 -56
  2. package/calendar/calendar.module.d.ts +10 -21
  3. package/calendar/calendars.module.d.ts +10 -21
  4. package/calendar/localization/calendar-custom-messages.component.d.ts +9 -1
  5. package/calendar/localization/multiview-calendar-custom-messages.component.d.ts +9 -1
  6. package/calendar/models/orientation.d.ts +10 -1
  7. package/calendar/models/selection-range-end.type.d.ts +11 -1
  8. package/calendar/models/selection-range.interface.d.ts +18 -3
  9. package/calendar/models/selection.d.ts +19 -4
  10. package/calendar/models/type.d.ts +7 -3
  11. package/calendar/models/view.type.d.ts +12 -1
  12. package/calendar/multiview-calendar.component.d.ts +46 -40
  13. package/calendar/multiview-calendar.module.d.ts +1 -0
  14. package/calendar/templates/cell-template.directive.d.ts +16 -19
  15. package/calendar/templates/century-cell-template.directive.d.ts +15 -19
  16. package/calendar/templates/decade-cell-template.directive.d.ts +15 -19
  17. package/calendar/templates/footer-template.directive.d.ts +16 -17
  18. package/calendar/templates/header-template.directive.d.ts +19 -18
  19. package/calendar/templates/header-title-template.directive.d.ts +15 -18
  20. package/calendar/templates/month-cell-template.directive.d.ts +15 -17
  21. package/calendar/templates/navigation-item-template.directive.d.ts +15 -18
  22. package/calendar/templates/weeknumber-cell-template.directive.d.ts +15 -17
  23. package/calendar/templates/year-cell-template.directive.d.ts +15 -20
  24. package/dateinput/dateinput.component.d.ts +43 -119
  25. package/dateinput/dateinput.module.d.ts +15 -2
  26. package/dateinput/localization/dateinput-custom-messages.component.d.ts +18 -1
  27. package/dateinput/models/format-placeholder.model.d.ts +15 -20
  28. package/dateinput/models/format-settings.model.d.ts +14 -4
  29. package/dateinput/models/incremental-steps.model.d.ts +16 -1
  30. package/datepicker/datepicker.component.d.ts +65 -127
  31. package/datepicker/datepicker.module.d.ts +11 -2
  32. package/datepicker/localization/datepicker-custom-messages.component.d.ts +11 -1
  33. package/daterange/auto-correct-on.type.d.ts +2 -1
  34. package/daterange/date-range-end-input.directive.d.ts +22 -24
  35. package/daterange/date-range-popup-template.directive.d.ts +13 -2
  36. package/daterange/date-range-popup.component.d.ts +83 -73
  37. package/daterange/date-range-selection.directive.d.ts +10 -9
  38. package/daterange/date-range-start-input.directive.d.ts +26 -27
  39. package/daterange/date-range.component.d.ts +1 -6
  40. package/daterange/date-range.service.d.ts +27 -27
  41. package/datetimepicker/datetimepicker.component.d.ts +88 -79
  42. package/datetimepicker/datetimepicker.module.d.ts +16 -2
  43. package/datetimepicker/localization/datetimepicker-custom-messages.component.d.ts +10 -1
  44. package/esm2022/calendar/calendar.component.mjs +37 -56
  45. package/esm2022/calendar/calendar.module.mjs +10 -21
  46. package/esm2022/calendar/calendars.module.mjs +10 -21
  47. package/esm2022/calendar/localization/calendar-custom-messages.component.mjs +9 -1
  48. package/esm2022/calendar/localization/multiview-calendar-custom-messages.component.mjs +9 -1
  49. package/esm2022/calendar/models/selection-range.interface.mjs +2 -0
  50. package/esm2022/calendar/models/selection.mjs +11 -0
  51. package/esm2022/calendar/multiview-calendar.component.mjs +46 -40
  52. package/esm2022/calendar/multiview-calendar.module.mjs +1 -0
  53. package/esm2022/calendar/templates/cell-template.directive.mjs +16 -19
  54. package/esm2022/calendar/templates/century-cell-template.directive.mjs +15 -19
  55. package/esm2022/calendar/templates/decade-cell-template.directive.mjs +15 -19
  56. package/esm2022/calendar/templates/footer-template.directive.mjs +16 -17
  57. package/esm2022/calendar/templates/header-template.directive.mjs +19 -18
  58. package/esm2022/calendar/templates/header-title-template.directive.mjs +15 -18
  59. package/esm2022/calendar/templates/month-cell-template.directive.mjs +15 -17
  60. package/esm2022/calendar/templates/navigation-item-template.directive.mjs +15 -18
  61. package/esm2022/calendar/templates/weeknumber-cell-template.directive.mjs +15 -17
  62. package/esm2022/calendar/templates/year-cell-template.directive.mjs +15 -20
  63. package/esm2022/dateinput/dateinput.component.mjs +44 -120
  64. package/esm2022/dateinput/dateinput.module.mjs +15 -2
  65. package/esm2022/dateinput/localization/dateinput-custom-messages.component.mjs +18 -1
  66. package/esm2022/datepicker/datepicker.component.mjs +65 -127
  67. package/esm2022/datepicker/datepicker.module.mjs +11 -2
  68. package/esm2022/datepicker/localization/datepicker-custom-messages.component.mjs +11 -1
  69. package/esm2022/daterange/date-range-end-input.directive.mjs +22 -24
  70. package/esm2022/daterange/date-range-popup-template.directive.mjs +13 -2
  71. package/esm2022/daterange/date-range-popup.component.mjs +83 -73
  72. package/esm2022/daterange/date-range-selection.directive.mjs +10 -9
  73. package/esm2022/daterange/date-range-start-input.directive.mjs +26 -27
  74. package/esm2022/daterange/date-range.component.mjs +1 -6
  75. package/esm2022/daterange/date-range.service.mjs +27 -27
  76. package/esm2022/datetimepicker/datetimepicker.component.mjs +88 -79
  77. package/esm2022/datetimepicker/datetimepicker.module.mjs +16 -2
  78. package/esm2022/datetimepicker/localization/datetimepicker-custom-messages.component.mjs +10 -1
  79. package/esm2022/package-metadata.mjs +2 -2
  80. package/esm2022/timepicker/localization/messages.mjs +14 -14
  81. package/esm2022/timepicker/localization/timepicker-custom-messages.component.mjs +12 -1
  82. package/esm2022/timepicker/timepicker.component.mjs +54 -119
  83. package/esm2022/timepicker/timepicker.module.mjs +13 -2
  84. package/esm2022/timepicker/timeselector.component.mjs +24 -40
  85. package/fesm2022/progress-kendo-angular-dateinputs.mjs +870 -1003
  86. package/package.json +13 -12
  87. package/timepicker/localization/messages.d.ts +14 -14
  88. package/timepicker/localization/timepicker-custom-messages.component.d.ts +12 -1
  89. package/timepicker/timepicker.component.d.ts +50 -115
  90. package/timepicker/timepicker.module.d.ts +13 -2
  91. package/timepicker/timeselector.component.d.ts +24 -40
@@ -5,30 +5,25 @@
5
5
  import { TemplateRef } from '@angular/core';
6
6
  import * as i0 from "@angular/core";
7
7
  /**
8
- * Used for rendering the year cell content of the Calendar. To define the year cell template, nest an
9
- * `<ng-template>` tag with the `kendoCalendarYearCellTemplate` directive inside the component tag.
10
- * The template context is set to the current component. To get a reference to the current date, use
11
- * the `let-date` directive. To provide more details about the current year cell, get a reference to the
12
- * current `cellContext` by using the `let-cellContext` directive.
8
+ * A directive for customizing the year cells in the Calendar component.
9
+ *
10
+ * This directive allows you to define a custom template for rendering the content of year cells
11
+ * when the Calendar is in year view. The template context provides access to the current date
12
+ * and cell context information.
13
+ *
14
+ * Template Context Variables:
15
+ * - `date` - The Date object representing the current cell's date
16
+ * - `cellContext` - Additional context information about the current year cell
13
17
  *
14
18
  * For more examples, refer to the article on [templates]({% slug templates_calendar %}).
15
19
  *
16
20
  * @example
17
- * ```ts
18
- * _@Component({
19
- * selector: 'my-app',
20
- * styles: ['.custom { color: red; }'],
21
- * template: `
22
- * <kendo-calendar [activeView]="activeView">
23
- * <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
24
- * <span class="custom">{{context.formattedValue}}</span>
25
- * </ng-template>
26
- * </kendo-calendar>
27
- * `
28
- * })
29
- * export class AppComponent {
30
- * public activeView: CalendarView = 'year';
31
- * }
21
+ * ```html
22
+ * <kendo-calendar [activeView]="'year'">
23
+ * <ng-template kendoCalendarYearCellTemplate let-context="cellContext">
24
+ * <span class="custom">{{context.formattedValue}}</span>
25
+ * </ng-template>
26
+ * </kendo-calendar>
32
27
  * ```
33
28
  */
34
29
  export declare class YearCellTemplateDirective {
@@ -75,31 +75,36 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
75
75
  */
76
76
  set pickerType(_pickerType: DatePickerType);
77
77
  /**
78
- * If set to `true`, renders a clear button after the input text or DateInput value has been changed.
78
+ * Specifies whether to render a clear button after the input text or DateInput value has been changed.
79
79
  * Clicking this button resets the value of the component to `null` and triggers the `valueChange` event.
80
80
  * @default false
81
81
  */
82
82
  clearButton: boolean;
83
83
  /**
84
- * Sets or gets the `disabled` property of the DateInput and
85
- * determines whether the component is active
84
+ * Specifies whether the component is disabled
86
85
  * ([see example]({% slug disabled_dateinput %})).
87
86
  * To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_dateinput#toc-managing-the-dateinput-disabled-state-in-reactive-forms).
87
+ *
88
+ * @default false
88
89
  */
89
90
  disabled: boolean;
90
91
  /**
91
- * Sets or gets the read-only state of the DateInput
92
+ * Specifies the read-only state of the DateInput
92
93
  * ([see example]({% slug readonly_dateinput %})).
93
94
  *
94
95
  * @default false
95
96
  */
96
97
  readonly: boolean;
97
98
  /**
98
- * Sets the title of the input element of the DateInput.
99
+ * Specifies the title of the input element of the DateInput.
100
+ *
101
+ * @default ""
99
102
  */
100
103
  title: string;
101
104
  /**
102
- * Sets or gets the `tabIndex` property of the DateInput.
105
+ * Specifies the `tabIndex` property of the DateInput.
106
+ *
107
+ * @default 0
103
108
  */
104
109
  tabindex: number;
105
110
  /**
@@ -123,56 +128,14 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
123
128
  * Specifies the date format that is used to display the input value
124
129
  * ([see example]({% slug formats_dateinput %})).
125
130
  *
126
- * Format value options:
127
- * - `string` - Provide a `string` if a single format is going to be used regardless whether the input is focused or blurred.
128
- * - [`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.
131
+ * You can provide a string if a single format is going to be used regardless whether the input is focused or blurred.
132
+ * Alternatively, you can provide a FormatSettings object to display different formats when the component is focused or blurred by specifying inputFormat and displayFormat values.
129
133
  */
130
134
  format: string | FormatSettings;
131
135
  /**
132
136
  * Defines the descriptions of the format sections in the input field.
133
137
  * For more information, refer to the article on
134
138
  * [placeholders]({% slug placeholders_dateinput %}).
135
- *
136
- * @example
137
- * ```ts
138
- * _@Component({
139
- * selector: 'my-app',
140
- * template: `
141
- * <div class="row example-wrapper" [style.min-height.px]="450">
142
- * <div class="col-xs-12 col-md-6 example-col">
143
- * <p>Full-length format description:</p>
144
- * <kendo-dateinput formatPlaceholder="wide"></kendo-dateinput>
145
- * </div>
146
- *
147
- * <div class="col-xs-12 col-md-6 example-col">
148
- * <p>Narrow-length format description:</p>
149
- * <kendo-dateinput formatPlaceholder="narrow"></kendo-dateinput>
150
- * </div>
151
- *
152
- * <div class="col-xs-12 col-md-6 example-col">
153
- * <p>Short-length format description:</p>
154
- * <kendo-dateinput formatPlaceholder="short"></kendo-dateinput>
155
- * </div>
156
- *
157
- * <div class="col-xs-12 col-md-6 example-col">
158
- * <p>Display defined format:</p>
159
- * <kendo-dateinput format="MM/dd/yyyy" formatPlaceholder="formatPattern"></kendo-dateinput>
160
- * </div>
161
- *
162
- * <div class="col-xs-12 col-md-6 example-col">
163
- * <p>Custom defined format descriptions</p>
164
- * <kendo-dateinput format="G"
165
- * [formatPlaceholder]="{
166
- * year: 'y', month: 'M', day: 'd',
167
- * hour: 'h', minute: 'm', second: 's'
168
- * }"
169
- * ></kendo-dateinput>
170
- * </div>
171
- * </div>
172
- * `
173
- * })
174
- * export class AppComponent { }
175
- * ```
176
139
  */
177
140
  set formatPlaceholder(format: DateInputFormatPlaceholder);
178
141
  get formatPlaceholder(): DateInputFormatPlaceholder;
@@ -180,86 +143,72 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
180
143
  * Specifies the hint the DateInput displays when its value is `null`.
181
144
  * For more information, refer to the article on
182
145
  * [placeholders]({% slug placeholders_dateinput %}).
183
- *
184
- * @example
185
- * ```ts
186
- * _@Component({
187
- * selector: 'my-app',
188
- * template: `
189
- * <kendo-dateinput placeholder="Enter birth date..."></kendo-dateinput>
190
- * `
191
- * })
192
- * export class AppComponent { }
193
- * ```
146
+ * @default null
194
147
  */
195
148
  placeholder: string;
196
149
  /**
197
150
  * Configures the incremental steps of the DateInput.
198
151
  * For more information, refer to the article on
199
152
  * [incremental steps]({% slug incrementalsteps_dateinput %}).
200
- *
201
- * @example
202
- * ```ts
203
- * _@Component({
204
- * selector: 'my-app',
205
- * template: `
206
- * <kendo-dateinput [steps]="steps"></kendo-dateinput>
207
- * `
208
- * })
209
- * export class AppComponent {
210
- * public steps = { year: 10, month: 1, day: 5 };
211
- * }
212
- * ```
213
153
  */
214
154
  steps: DateInputIncrementalSteps;
215
155
  /**
216
156
  * Specifies the biggest date that is valid
217
157
  * ([see example]({% slug dateranges_dateinput %})).
218
- * By default, the `max` value is `2099-12-31`.
158
+ *
159
+ * @default 2099-12-31
219
160
  */
220
161
  max: Date;
221
162
  /**
222
163
  * Specifies the smallest date that is valid
223
164
  * ([see example]({% slug dateranges_dateinput %})).
224
- * By default, the `min` value is `1900-1-1`.
165
+ *
166
+ * @default 1900-1-1
225
167
  */
226
168
  min: Date;
227
169
  /**
228
- * Determines whether the built-in min or max validators are to be enforced when a form is being validated.
170
+ * Specifies whether to enforce the built-in min and max validators when validating a form.
171
+ * Set to `true` to enable validation for the `min` and `max` values.
229
172
  *
230
173
  * @default true
231
174
  */
232
175
  rangeValidation: boolean;
233
176
  /**
234
- * Determines whether to autocorrect invalid segments automatically.
177
+ * Specifies if the component automatically corrects invalid date segments.
178
+ * When set to `true`, the component fixes invalid segments as you type.
235
179
  *
236
180
  * @default true
237
181
  */
238
182
  autoCorrectParts: boolean;
239
183
  /**
240
- * Determines whether to automatically move to the next segment after the user completes the current one.
184
+ * Specifies if the component automatically moves to the next segment after you complete the current one.
185
+ * When set to `true`, focus moves to the next segment as soon as you finish typing the current segment.
241
186
  *
242
187
  * @default true
243
188
  */
244
189
  autoSwitchParts: boolean;
245
190
  /**
246
- * A string array representing custom keys, which will move the focus to the next date format segment.
191
+ * Specifies custom keys that move focus to the next date format segment.
192
+ * Provide an array of strings to define which keys trigger the focus change.
247
193
  */
248
194
  autoSwitchKeys: string[];
249
195
  /**
250
- * Determines if the users should see a blinking caret inside the Date Input when possible.
196
+ * Specifies if the component displays a blinking caret inside the DateInput when possible.
197
+ * Set to `true` to show a blinking caret for better visual feedback.
251
198
  *
252
199
  * @default false
253
200
  */
254
201
  allowCaretMode: boolean;
255
202
  /**
256
- * When enabled, the DateInput will autofill the rest of the date to the current date when the component loses focus.
203
+ * Specifies whether to autofill the rest of the date to the current date when the component loses focus.
257
204
  *
258
205
  * @default false
259
206
  */
260
207
  autoFill: boolean;
261
208
  /**
262
- * Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
209
+ * Specifies whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
210
+ *
211
+ * @default false
263
212
  */
264
213
  incompleteDateValidation: boolean;
265
214
  /**
@@ -268,6 +217,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
268
217
  *
269
218
  * The default value is 68, indicating that typing any value less than 69
270
219
  * will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
220
+ * @default 68
271
221
  */
272
222
  twoDigitYearMax: number;
273
223
  /**
@@ -279,7 +229,7 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
279
229
  /**
280
230
  * Specifies the value of the DateInput component.
281
231
  *
282
- * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
232
+ * The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance or `null`.
283
233
  */
284
234
  set value(value: Date | null);
285
235
  get value(): Date | null;
@@ -287,6 +237,8 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
287
237
  * Specifies whether the **Up** and **Down** spin buttons will be rendered.
288
238
  * For more information, refer to the article on
289
239
  * [spinner buttons]({% slug spinbuttons_dateinput %}).
240
+ *
241
+ * @default false
290
242
  */
291
243
  spinners: boolean;
292
244
  /**
@@ -298,44 +250,27 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
298
250
  */
299
251
  hasPopup: string;
300
252
  /**
301
- * Sets the size of the component.
253
+ * Specifies the size of the component.
302
254
  *
303
- * The possible values are:
304
- * * `small`
305
- * * `medium` (Default)
306
- * * `large`
307
- * * `none`
255
+ * @default medium
308
256
  *
309
257
  */
310
258
  set size(size: DateInputSize);
311
259
  get size(): DateInputSize;
312
260
  /**
313
- * Sets the border radius of the component.
314
- *
315
- * The possible values are:
316
- * * `small`
317
- * * `medium` (Default)
318
- * * `large`
319
- * * `full`
320
- * * `none`
321
- *
261
+ * Specifies the border radius of the component.
262
+ * @default 'medium'
322
263
  */
323
264
  set rounded(rounded: DateInputRounded);
324
265
  get rounded(): DateInputRounded;
325
266
  /**
326
- * Sets the fillMode of the component.
327
- *
328
- * The possible values are:
329
- * * `solid` (Default)
330
- * * `flat`
331
- * * `outline`
332
- * * `none`
333
- *
267
+ * Specifies the fillMode of the component.
268
+ * @default 'solid'
334
269
  */
335
270
  set fillMode(fillMode: DateInputFillMode);
336
271
  get fillMode(): DateInputFillMode;
337
272
  /**
338
- * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
273
+ * Specifies the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
339
274
  */
340
275
  set inputAttributes(attributes: {
341
276
  [key: string]: string;
@@ -506,17 +441,6 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
506
441
  /**
507
442
  * Focuses the DateInput component.
508
443
  *
509
- * @example
510
- * ```ts
511
- * _@Component({
512
- * selector: 'my-app',
513
- * template: `
514
- * <button (click)="dateinput.focus()">Focus date input</button>
515
- * <kendo-dateinput #dateinput></kendo-dateinput>
516
- * `
517
- * })
518
- * export class AppComponent { }
519
- * ```
520
444
  */
521
445
  focus(): void;
522
446
  /**
@@ -6,8 +6,21 @@ import * as i0 from "@angular/core";
6
6
  import * as i1 from "./localization/dateinput-custom-messages.component";
7
7
  import * as i2 from "./dateinput.component";
8
8
  /**
9
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
10
- * definition for the DateInput component.
9
+ * Required for adding all DateInput features in NgModule-based Angular applications.
10
+ *
11
+ * The package exports:
12
+ * - `DateInputComponent`&mdash;The DateInput component.
13
+ * - `DateInputMessagesComponent`&mdash;The DateInput custom messages component.
14
+ *
15
+ * @example
16
+ * ```ts
17
+ * import { DateInputModule } from '@progress/kendo-angular-dateinputs';
18
+ *
19
+ * @NgModule({
20
+ * imports: [DateInputModule]
21
+ * })
22
+ * export class AppModule { }
23
+ * ```
11
24
  */
12
25
  export declare class DateInputModule {
13
26
  static ɵfac: i0.ɵɵFactoryDeclaration<DateInputModule, never>;
@@ -6,7 +6,24 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
6
6
  import { DateInputMessages } from './messages';
7
7
  import * as i0 from "@angular/core";
8
8
  /**
9
- * Custom component messages override default component messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
9
+ * Represents the Kendo UI DateInput custom messages component.
10
+ * Overrides the default component messages with custom messages ([see example]({% slug globalization_dateinputs %}#toc-custom-messages)).
11
+ *
12
+ * @example
13
+ * ```ts
14
+ * @Component({
15
+ * selector: 'my-app',
16
+ * template: `
17
+ * <kendo-dateinput>
18
+ * <kendo-dateinput-messages
19
+ * increment="Increase value"
20
+ * decrement="Decrease value">
21
+ * </kendo-dateinput-messages>
22
+ * </kendo-dateinput>
23
+ * `
24
+ * })
25
+ * export class AppComponent { }
26
+ * ```
10
27
  */
11
28
  export declare class DateInputCustomMessagesComponent extends DateInputMessages {
12
29
  protected service: LocalizationService;
@@ -3,51 +3,46 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * The interface which defines a custom-format placeholder structure in the DateInput component.
6
+ * Represents the Kendo UI DateInput custom format placeholder interface.
7
+ * Defines a custom-format placeholder structure in the `DateInput` component.
7
8
  *
8
9
  * @example
9
10
  * ```ts
10
- * _@Component({
11
- * selector: 'my-app',
12
- * template: `
13
- * <kendo-dateinput format="G"
14
- * [formatPlaceholder]="{
15
- * year: 'y', month: 'M', day: 'd',
16
- * hour: 'h', minute: 'm', second: 's'
17
- * }"
18
- * ></kendo-dateinput>
19
- * `
20
- * })
21
- * export class AppComponent { }
11
+ * <kendo-dateinput format="G"
12
+ * [formatPlaceholder]="{
13
+ * year: 'y', month: 'M', day: 'd',
14
+ * hour: 'h', minute: 'm', second: 's'
15
+ * }"
16
+ * ></kendo-dateinput>
22
17
  * ```
23
18
  */
24
19
  export interface DateInputCustomFormatPlaceholder {
25
20
  /**
26
- * Defines the description for the `year` format section.
21
+ * Specifies the description for the `year` format section.
27
22
  */
28
23
  year?: string;
29
24
  /**
30
- * Defines the description for the `month` format section.
25
+ * Specifies the description for the `month` format section.
31
26
  */
32
27
  month?: string;
33
28
  /**
34
- * Defines the description for the `day` format section.
29
+ * Specifies the description for the `day` format section.
35
30
  */
36
31
  day?: string;
37
32
  /**
38
- * Defines the description for the `hour` format section.
33
+ * Specifies the description for the `hour` format section.
39
34
  */
40
35
  hour?: string;
41
36
  /**
42
- * Defines the description for the `minute` format section.
37
+ * Specifies the description for the `minute` format section.
43
38
  */
44
39
  minute?: string;
45
40
  /**
46
- * Defines the description for the `second` format section.
41
+ * Specifies the description for the `second` format section.
47
42
  */
48
43
  second?: string;
49
44
  /**
50
- * Defines the description for the `millisecond` format section.
45
+ * Specifies the description for the `millisecond` format section.
51
46
  */
52
47
  millisecond?: string;
53
48
  }
@@ -4,16 +4,26 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { DateFormatOptions } from "@progress/kendo-intl";
6
6
  /**
7
- * Specifies the formats used by the DateInput mask when the input is focused or blurred
8
- * ([see example]({% slug formats_datepicker %}#toc-display-and-input-formats)).
7
+ * Represents the Kendo UI DateInput format settings interface.
8
+ * Specifies the formats used by the `DateInput` mask when the input is focused or blurred ([see example]({% slug formats_datepicker %}#toc-display-and-input-formats)).
9
+ *
10
+ * @example
11
+ * ```html
12
+ * <kendo-dateinput
13
+ * [formatSettings]="{
14
+ * inputFormat: 'MM/dd/yyyy',
15
+ * displayFormat: 'MMMM dd, yyyy'
16
+ * }">
17
+ * </kendo-dateinput>
18
+ * ```
9
19
  */
10
20
  export interface FormatSettings {
11
21
  /**
12
- * Used when the input is focused.
22
+ * Specifies the format used when the input is focused.
13
23
  */
14
24
  inputFormat: string | DateFormatOptions;
15
25
  /**
16
- * Used when the input is blurred.
26
+ * Specifies the format used when the input is blurred.
17
27
  */
18
28
  displayFormat: string | DateFormatOptions;
19
29
  }
@@ -3,7 +3,22 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * The interface which defines all possible incremental steps in the DateInput component.
6
+ * Represents the Kendo UI DateInput incremental steps interface.
7
+ * Defines all possible incremental steps in the `DateInput` component.
8
+ *
9
+ * @example
10
+ * ```html
11
+ * <kendo-dateinput
12
+ * [steps]="{
13
+ * year: 1,
14
+ * month: 1,
15
+ * day: 1,
16
+ * hour: 1,
17
+ * minute: 15,
18
+ * second: 10
19
+ * }">
20
+ * </kendo-dateinput>
21
+ * ```
7
22
  */
8
23
  export interface DateInputIncrementalSteps {
9
24
  year?: number;