A pack of extensions for grommet 2
created:7/7/2021
updated:7/7/2021
loc
10
comments
30%
passed
2
failed
4
coverage
100%

DateInputField

Component

import { DateInputField } from 'grommet-controls';

Main

() => (
<Form
onSubmit={() => console.log('onSubmit')}
pad={{ horizontal: 'small' }}
focusFirstChild={false}
>
<DateInputField
name="date"
label="Date"
validation={[validators.required()]}
/>
<Box pad="small">
<Button type="submit" label="Submit" />
</Box>
</Form>
)

Commits

Date
Author
Commit Message
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
2 commits

External dependencies

package
imports
peer
react
^17.0.1
React
*

Internal dependencies

file
imports
"../DateInput"
DateInputIDateInputProps
"../WithFormField"
WithFormFieldIWithFormFieldProps

Component JSX

<WithFormField
>
WithFormField
from"../WithFormField"
<DateInput
/>
DateInput
from"../DateInput"

Stories

In Field

() => (
<Form
onSubmit={() => console.log('onSubmit')}
pad={{ horizontal: 'small' }}
focusFirstChild={false}
>
<DateInputField
name="date"
label="Date"
inField={false}
validation={[validators.required()]}
/>
<Box pad="small">
<Button type="submit" label="Submit" />
</Box>
</Form>
)

Validation

() => (
<Form
onSubmit={() => console.log('onSubmit')}
pad={{ horizontal: 'small' }}
focusFirstChild={false}
>
<DateInputField
name="date"
label="Date"
validation={[
validators.required(),
(_row, value) => {
if (value) {
const date = new Date(value);
if (date >= new Date('01/01/2000')) {
return 'date must be before 01/01/2000';
}
}
return undefined;
},
]}
/>
<Box pad="small">
<Button type="submit" label="Submit" />
</Box>
</Form>
)