nylas-time-window-picker
Overview
The nylas-time-window-picker component is a time picker that can be used to select a time.
| Version | 1.1.4 |
| Install (React) | npm install @nylas/react |
| Import (React) | import { NylasTimeWindowPicker } from '@nylas/react'; |
| Import (CDN) | <script type="module">
import { defineCustomElement } from "https://cdn.jsdelivr.net/npm/@nylas/web-elements@latest/dist/cdn/nylas-time-window-picker/nylas-time-window-picker.es.js";
defineCustomElement();
</script> |
Example
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
hasError | This sets the error state of the input. | boolean | false | |
minimumStartTime | This is the start time value if one is set by the parent component. It is useful if this component is used to render an end time which should not be before the start time, defining the earliest selectable time. | null | string | null | |
name _(required)_ | The name of the input. | string | undefined | |
placeholder | The placeholder text for the input. | string | 'hh:mmam/pm' | |
time _(required)_ | The time to display in the input. This is passed by the parent component and can be updated using the setTime prop function provided by the parent component. | string | undefined |
Events
| Event | Description | Type |
|---|---|---|
formError | This event is fired when the form has an error. The parent component can listen for this event and display an error message or set form validity. | CustomEvent<{ key: string; message: string; }> |
timeChange | This event is fired when the time is changed. | CustomEvent<{ key: string; value: string; }> |
Shadow Parts
| Part | Description |
|---|---|
"time-input" | The time input |
"time-picker" | The time picker container |
"times" | The list of times |
Graph
Built with StencilJS