Date Picker

<gstock-date-picker> | GstockDatePicker

API

Properties

Name	Description	Type	Default
`defaultValue`	The default value of the form control. Primarily used for resetting the form control.	`string`	`''`
`clearable`	Adds a clear button when the date picker is not empty.	`boolean`	`false`
`dateFormat` `date-format`	Date format for show the date.	`DateFormat`	`'YYYY-MM-DD'`
`disabled`	Disables the date picker control.	`boolean`	`false`
`form`	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`string`	`''`
`helpText` `help-text`	The date picker’s help text. If you need to display HTML, use the `help-text` slot instead.	`string`	`''`
`showCurrentDate` `show-current-date`	Enable this option to highlight the current date.	`boolean`	`true`
`hoist`	Enable this option to prevent the listbox from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.	`boolean`	`false`
`iconPrefix` `prefix`	The prefix icon name.	`string \| undefined`	`-`
`iconSuffix` `suffix`	The suffix icon name.	`string \| undefined`	`-`
`label`	The date picker’s label. If you need to display HTML, use the `label` slot instead.	`string`	`''`
`max`	Indicates the maximum date allowed to be selected.	`string \| undefined`	`-`
`min`	Indicates the minimum date allowed to be selected.	`string \| undefined`	`-`
`name`	The name of the date picker, submitted as a name/value pair with form data.	`string`	`''`
`open`	Indicates whether or not the date picker is open. You can toggle this attribute to show and hide the calendar, or you can use the `show()` and `hide()` methods and this attribute will reflect the date-picker’s open state.	`boolean`	`false`
`placeholder`	Placeholder text to show as a hint when the date picker is empty.	`string`	`''`
`placement`	The preferred placement of the date picker’s calendar. Note that the actual placement may vary as needed to keep the listbox inside of the viewport.	`'top' \| 'bottom'`	`'bottom'`
`readonly`	Makes the input readonly.	`boolean`	`true`
`required`	The date picker’s required attribute.	`boolean`	`false`
`size`	The size of the date picker.	`'small' \| 'medium' \| 'large'`	`'medium'`
`startDayWeek` `start-day-week`	Indicate the start day of the week (0 for Sunday - 6 for Saturday).	`number`	`1`
`validityStyles` `validity-styles`	Specify whether validation styles are applied.	`false`	`-`
`value`	The current value of the date picker, submitted as a name/value pair with form data.	`string`	`''`
`validity`	Gets the validity state object	`-`	`-`
`validationMessage`	Gets the validation message	`-`	`-`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties .

Events

Name	React Event	Description	Event Detail
`gstock-change-event`	`onGstockChangeEvent`	Emitted when the control’s value changes.	-
`gstock-clear-event`	`onGstockClearEvent`	Emitted when the control’s value is cleared.	-
`gstock-input-event`	`onGstockInputEvent`	Emitted when the control receives input.	-
`gstock-focus-event`	`onGstockFocusEvent`	Emitted when the control gains focus.	-
`gstock-blur-event`	`onGstockBlurEvent`	Emitted when the control loses focus.	-
`gstock-show-event`	`onGstockShowEvent`	Emitted when the date picker’s calendar opens.	-
`gstock-after-show-event`	`onGstockAfterShowEvent`	Emitted after the date picker’s calendar opens and all animations are complete.	-
`gstock-hide-event`	`onGstockHideEvent`	Emitted when the date picker’s calendar closes.	-
`gstock-after-hide-event`	`onGstockAfterHideEvent`	Emitted after the date picker’s calendar closes and all animations are complete.	-
`gstock-invalid-event`	`onGstockInvalidEvent`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Learn more about events .

Slots

Name	Description
`label`	The input’s label. Alternatively, you can use the `label` attribute.
`prefix`	Used to prepend a presentational icon or similar element to the combobox.
`clear-icon`	An icon to use in lieu of the default clear icon.
`expand-icon`	The icon to show when the control is expanded and collapsed. Rotates on open and close.
`help-text`	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Learn more about slots .

Methods

Name	Description
`show( )`	Shows the listbox.
`hide( )`	Hides the listbox.
`checkValidity( )`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
`getForm( )`	Gets the associated form, if one exists.
`reportValidity( )`	Checks for validity and shows the browser’s validation message if the control is invalid.
`setCustomValidity( message: string )`	Sets a custom validation message. Pass an empty string to restore validity.
`focus( options: FocusOptions )`	Sets focus on the control.
`blur( )`	Removes focus from the control.

Learn more about methods .

CSS Parts

Name	Description
`form-control`	The form control that wraps the label, input, and help text.
`form-control-label`	The label’s wrapper.
`form-control-input`	The date picker’s wrapper.
`form-control-help-text`	The help text’s wrapper.
`combobox`	The container the wraps the prefix, combobox, clear icon, and expand button.
`prefix`	The container that wraps the prefix slot.
`display-input`	The element that displays the selected date label, an `<input>` element.
`listbox`	The listbox container where options are slotted.
`clear-button`	The clear button.
`expand-icon`	The container that wraps the expand icon.

Learn more about CSS parts .

Dependencies

This component automatically imports the following dependencies.