diff --git a/core/src/components.d.ts b/core/src/components.d.ts index d5e41c63e1..1fb79252d3 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -20,6 +20,7 @@ import { Color, ComponentProps, ComponentRef, + DatetimeOptions, DomRenderFn, FrameworkDelegate, HeaderFn, @@ -1284,7 +1285,7 @@ export namespace Components { /** * Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. */ - 'pickerOptions'?: PickerOptions; + 'pickerOptions'?: DatetimeOptions; /** * The text to display when there's no date selected yet. Using lowercase to match the input attribute */ @@ -1378,7 +1379,7 @@ export namespace Components { /** * Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. */ - 'pickerOptions'?: PickerOptions; + 'pickerOptions'?: DatetimeOptions; /** * The text to display when there's no date selected yet. Using lowercase to match the input attribute */ diff --git a/core/src/components/datetime/datetime-interface.ts b/core/src/components/datetime/datetime-interface.ts new file mode 100644 index 0000000000..b8372f3fc0 --- /dev/null +++ b/core/src/components/datetime/datetime-interface.ts @@ -0,0 +1,3 @@ +import { PickerOptions } from '../../interface'; + +export type DatetimeOptions = Partial; diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 5174534ed7..3afeea4668 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1,6 +1,6 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; -import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface'; +import { DatetimeOptions, InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface'; import { clamp } from '../../utils/helpers'; import { hostContext } from '../../utils/theme'; @@ -168,7 +168,7 @@ export class Datetime implements ComponentInterface { * Any additional options that the picker interface can accept. * See the [Picker API docs](../../picker/Picker) for the picker options. */ - @Prop() pickerOptions?: PickerOptions; + @Prop() pickerOptions?: DatetimeOptions; /** * The text to display when there's no date selected yet. diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index 01f5527a88..386ede718e 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -222,7 +222,7 @@ dates in JavaScript. | `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` | | `monthValues` | -- | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | | `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` | -| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `PickerOptions \| undefined` | +| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `Partial \| undefined` | | `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | | `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | | `yearValues` | -- | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index a8f4f1cf16..16510ad695 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -4,6 +4,7 @@ export * from './index'; export * from './components/animation-controller/animation-interface'; export * from './components/alert/alert-interface'; export * from './components/action-sheet/action-sheet-interface'; +export * from './components/datetime/datetime-interface'; export * from './components/menu/menu-interface'; export * from './components/modal/modal-interface'; export * from './components/picker/picker-interface';