Date Picker draft
Date Picker allows user to enter a date either through text input, or by choosing a date from the calendar. Please note that the date must be passed in ISO-8601 format: YYYY-MM-DD.
<nord-date-picker label="Label" value="2021-01-13"></nord-date-picker>
|Date value. Must be in IS0-8601 format: YYYY-MM-DD|
|–||Get/set the value of the picker as a Date object.|
|–||Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.|
|Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property.|
|Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property.|
|Forces the opening direction of the calendar modal to be always left or right. This setting can be useful when the input is smaller than the opening date picker would be as by default the picker always opens towards right.|
|Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday.|
|–||Button labels, day names, month names, etc, used for localization. Default is English.|
|–||Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`. Default is IS0-8601 parsing and formatting.|
|–||Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends.|
|Label for the input.|
|Optional hint text to be displayed with the input. Alternatively use the hint slot.|
|Visually hide the label, but still show it to assistive technologies like screen readers.|
|Placeholder text to display within the input.|
|Optional error to be shown with the input. Alternatively use the error slot.|
|Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.|
|Controls whether the input expands to fill the width of its container.|
|Makes the input component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.|
|The name of the input component.|
|Dispatched when the calendar is toggled open.|
|Dispatched when the calendar is closed.|
|Fired whenever the input's value is changed via user interaction.|
|Fired as the user types into the input.|
show() => void
Show the calendar modal, moving focus to the calendar inside.
hide(moveFocusToButton: ) => void
Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus returning to the date picker's button. Default is true.
focus(options?: FocusOptions) => void
Programmatically move focus to the component
- An object which controls aspects of the focusing process.
blur() => void
Programmatically remove focus from the component.
click() => void
Programmatically simulates a click on the component.
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.