Week Picker

<gstock-week-picker> | GstockWeekPicker

API

Propiedades

Nombre	Descripción	Tipo	Por defecto
`defaultValue`	The default value of the form control. Primarily used for resetting the form control.	`string`	`''`
`clearable`	Adds a clear button when the week picker is not empty.	`boolean`	`false`
`dateFormat` `date-format`	Date format for show the date.	`'DD/MM/YYYY' \| 'DD-MM-YYYY' \| 'DD.MM.YYYY' \| 'YYYY/MM/DD' \| 'YYYY-MM-DD' \| 'YYYY.MM.DD' \| 'MM/DD/YYYY' \| 'MM-DD-YYYY' \| 'MM.DD.YYYY'`	`'YYYY-MM-DD'`
`disabled`	Disables the week 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 week 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 week 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 week picker, submitted as a name/value pair with form data.	`string`	`''`
`open`	Indicates whether or not the week 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 week-picker’s open state.	`boolean`	`false`
`placeholder`	Placeholder text to show as a hint when the week picker is empty.	`string`	`''`
`placement`	The preferred placement of the week 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 week picker’s required attribute.	`boolean`	`false`
`size`	The size of the week 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 week 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.

Aprende más sobre atributos y propiedades .

Eventos

Nombre	React Event	Descripción	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 week picker’s calendar opens.	-
`gstock-after-show-event`	`onGstockAfterShowEvent`	Emitted after the week picker’s calendar opens and all animations are complete.	-
`gstock-hide-event`	`onGstockHideEvent`	Emitted when the week picker’s calendar closes.	-
`gstock-after-hide-event`	`onGstockAfterHideEvent`	Emitted after the week 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.	-

Aprende más sobre eventos .

Slots

Nombre	Descripción
`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. // slot 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.

Aprende más sobre slots .

Métodos

Nombre	Descripción
`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.
`getWeek( date: Date )`	Gets the week number from a date.

Aprende más sobre métodos .

Partes

Nombre	Descripción
`form-control`	The form control that wraps the label, input, and help text.
`form-control-label`	The label’s wrapper.
`form-control-input`	The week 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. // csspart expand-icon - The container that wraps the expand icon.

Aprende más sobre partes CSS .

Dependencias

Este componente importa automáticamente las siguientes dependencias.