Date Input
Examples
In this above example, if you type t, it will insert today's date in date input component.
API
Date Input props
| Name | Type | Default | Description |
|---|---|---|---|
animate | boolean | false | Enable animation for certain parts of input. e.g. shows animated border on hover for ai intent |
aria-describedby | string | Sets aria-describedby attribute. | |
aria-label | string | Sets aria-label attribute. | |
aria-labelledby | string | Sets aria-labelledby attribute. | |
autoComplete | string | Determines if browser should provide value suggestions. | |
autoFocus | string | Takes "start" | "end" | number | boolean values and sets the position of the cursor on mount. | |
className | string | className to modify style of Input container | |
clearable | boolean | false | If true, adds a clear value icon button to the end of the input container. |
disableTimezoneSwitch | boolean | false | If true, will not allow user to switch the timezone |
disabled | boolean | false | Renders component in disabled state. |
draggable | boolean | false | Set it to true if the input is rendered in a dnd component. When true, onDragStart's default behaviour will be prevented. |
endEnhancer | function | An input helper rendered after and attached to the input field. | |
formatString | string | String format passed to date-fns. | |
getTimeRangesForDate | function | Allows to selectively show the options based on date | |
id | string | Id attribute value to be added to the input element and as a label's for attribute value. | |
inputRef | ref | A ref to access an input element. | |
inputToDateParser | function | Callback to render custom date in date picker | |
intent | 'default'| 'success'| 'warning'| 'error'| 'ai' | Defines the intent of the Input. | |
maxCharLimit | number | Maximum character needed | |
maxDate | date | A max date that is selectable. | |
minDate | date | A min date that is selectable. | |
name | string | Name attribute. | |
onBlur | function | Called the onBlur event triggers. | |
onChange | function | Called when valid date is entered in input or selected from datepicker. | |
onClose | function | Called when the calendar closes. | |
onFocus | function | Called the onFocus event triggers. | |
onKeyDown | function | Called the onKeyDown event triggers. | |
onKeyPress | function | Called the onKeyPress event triggers. | |
onKeyUp | function | Called the onKeyUp event triggers. | |
onOpen | function | Called when the calendar opens. | |
overrides | custom | Lets you customize all aspects of the component. | |
pattern | string | A regex that is used to validate the value of the input on form submission. | |
placeholder | string | Input's placeholder. | |
required | boolean | false | Renders component in required state. |
showTimezone | boolean | false | If true, shows the timezone picker within datepicker. If false will only hide picker. If user passes timezone, date adaption will continue to happen |
size | 'xs'| 'sm'| 'md' | Input's size. SPACIOUS | COMFORTABLE -> md, COMPACT -> xxxs, DEFAULT -> md | |
startEnhancer | function | An input helper rendered before and attached to the input field. | |
style | string | className to modify style of Input container | |
timeSelect | boolean | false | Renders the time picker to select time |
timezone | string | System Timezone | Currently selected timezone. |
value | date | Input value attribute. | |
variant | 'default'| 'line' | Input's variant - default, line |
You can check the implementation of the component for more details.
Date Input exports
You can import this module like so:
import {DATE_INPUT_CHANGE_TYPE} from 'spaceweb/date-input'
It exports the following components or utility functions:
- DATE_INPUT_CHANGE_TYPE
- DateInput
- convertToDfnsFormat
- defaultInputToDateParser
- getAnyDateParser