skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
72
comments
6%
failed
16
coverage
67%

DateInput

grommet-controls
3.0.2

Component

browse
docs
issues
import { DateInput } from 'grommet-controls';

Size

browse
docs
issues
() => (
  <DateTestBed value={smallDate(new Date('08/30/2020'))} size="medium" />
)

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
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
3 commits

External dependencies

package
imports
peer
grommet
^2.15.0
CalendarBox
*
grommet-icons/icons/Calendar
^2.15.0
Calendar
*
react
^17.0.1
ReactComponent
*

Internal dependencies

file
imports
"../MaskedInput"
MaskedInput
"../../utils/moment"
smallDate
"./DateInputProps"
IDateInputProps

Component JSX

<CalendarIcon
/>
grommet-icons/icons/Calendar
^2.15.0
<MaskedInput
updatevaluedropContent
>
MaskedInput
from"../MaskedInput"
<Box
pad
>
grommet
^2.15.0
<Calendar
dateonSelectboundsdatesdisabledfirstDayOfWeeklocalesize
/>
grommet
^2.15.0

Stories

Main

browse
docs
issues
() => (
  <DateTestBed value={smallDate(new Date('08/30/2020'))} />
)

Autocorrect

browse
docs
issues
() => (
  <DateTestBed value={smallDate(new Date('08/30/2020'))} autocorrect={true} />
)

Disabled

browse
docs
issues
() => (
  <DateTestBed value={smallDate(new Date('08/30/2020'))} disabled={true} />
)

Bounds

browse
docs
issues
() => (
  <DateTestBed
    value={smallDate(new Date('08/30/2020'))}
    bounds={[
      smallDate(new Date(new Date('08/30/2020').getFullYear(), 0, 1)),
      smallDate(new Date(new Date('08/30/2020').getFullYear(), 11, 31)),
    ]}
  />
)

Disabled Dates

browse
docs
issues
() => (
  <DateTestBed
    value={smallDate(new Date('08/30/2020'))}
    disabledDates={[
      smallDate(new Date('08/30/2020')),
      smallDate(
        new Date('08/30/2020').setDate(new Date('08/30/2020').getDate() - 1),
      ),
    ]}
  />
)

First Day Of Week

browse
docs
issues
() => (
  <DateTestBed value={smallDate(new Date('08/30/2020'))} firstDayOfWeek={1} />
)

Locale

browse
docs
issues
() => (
  <DateTestBed value={smallDate(new Date('08/30/2020'))} locale="de-DE" />
)
Previous
input/ColorInput
Next
input/DropInput