@dotconnor/grommet
Version:
focus on the essential experience
141 lines (94 loc) • 2.12 kB
Markdown
## DateInput
A control to input a single date or a date range.
[](https://storybook.grommet.io/?selectedKind=Input-DateInput&full=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/dateinput&module=%2Fsrc%2FDateInput.js)
## Usage
```javascript
import { DateInput } from 'grommet';
<DateInput id='item' name='item' />
```
## Properties
**buttonProps**
Any properties to pass on to the underlying DropButton
when not inline and no format.
```
{
}
```
**calendarProps**
Any properties to pass on to the underlying Calendar.
```
{
}
```
**defaultValue**
The default date or date range value in ISO8601 format.
```
string
[string]
```
**dropProps**
Any properties to pass on to the underlying Drop when not inline. Defaults to `{
"align": {
"top": "bottom",
"left": "left"
}
}`.
```
{
}
```
**format**
The date format to use. If not specified, the date value will not
be displayed as a text string and the user will not be able to enter
a date by typing. For example: 'mm/dd/yyyy', or for a range:
'mm/dd/yyyy-mm/dd/yyyy'. This property should be used when in a Form.
```
string
```
**id**
The id of the input.
```
string
```
**inline**
Whether the calendar should always be shown or via a Drop when
interacting with the input.
```
boolean
```
**inputProps**
Any properties to pass on to the underlying MaskedInput
when there is a format.
```
{
}
```
**name**
The name of the input.
This property is required when used within FormField.
```
string
```
**onChange**
Function that will be called when the user types or selects a date.
The updated value will be available via 'event.value'.
```
function
```
**value**
The date or date range value(s) in ISO8601 format.
```
string
[string]
```
## Intrinsic element
```
div
```
## Theme
**dateInput.icon.size**
The size of the Calendar icon Expects `string`.
Defaults to
```
24px
```