Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

date-picker

v7.13.2arrow_drop_down
v7.13.2
v7.13.1
v7.13.0
v7.7.2
STATUS
Passing
DOWNLOADS
414
LICENSE
Apache 2.0
VISIBILITY
Public
PUBLISHED
1 year ago
SIZE
N/A
Copyright IBM Corp. 2016, 2018 This source code is licensed under the Apache-2.0 license found in the LICENSE file in the root directory of this source tree.
1 contributor
Install date-picker as a package?
Copied
npm i @bit/carbon-design-system.carbon-components-react.date-picker
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right

Props

<DatePicker>

Propv9v10
appendToAccepts a CSS selector or a DOM nodeAccepts a DOM node only
Properties
NameTypeDefault valueDescription
range
bool

Specify whether the skeleton should be of range date picker.

className
string

Specify an optional className to add.

children
node

The child nodes.

className
string

The CSS class names.

short
boolfalse

true to use the short version.

light
boolfalse

true to use the light version.

datePickerType
'simple' | 'single' | 'range'

The type of the date picker:

  • simple - Without calendar dropdown.
  • single - With calendar dropdown and single date.
  • range - With calendar dropdown and a date range.
dateFormat
string'm/d/Y'

The date format.

locale
'ar' | 'at' | 'be' | 'bg' | 'bn' | 'cat' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fr' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'it' | 'ja' | 'ko' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'vn' | 'zh''en'

The language locale used to format the days of the week, months, and numbers.

  • ar - Arabic
  • at - Austria
  • be - Belarusian
  • bg - Bulgarian
  • bn - Bangla
  • cat - Catalan
  • cs - Czech
  • cy - Welsh
  • da - Danish
  • de - German
  • en - English
  • eo - Esperanto
  • es - Spanish
  • et - Estonian
  • fa - Persian
  • fi - Finnish
  • fr - French
  • gr - Greek
  • he - Hebrew
  • hi - Hindi
  • hr - Croatian
  • hu - Hungarian
  • id - Indonesian
  • it - Italian
  • ja - Japanese
  • ko - Korean
  • lt - Lithuanian
  • lv - Latvian
  • mk - Macedonian
  • mn - Mongolian
  • ms - Malaysian
  • my - Burmese
  • nl - Dutch
  • no - Norwegian
  • pa - Punjabi
  • pl - Polish
  • pt - Portuguese
  • ro - Romanian
  • si - Sinhala
  • sk - Slovak
  • sl - Slovenian
  • sq - Albanian
  • sr - Serbian
  • sv - Swedish
  • th - Thai
  • tr - Turkish
  • uk - Ukrainian
  • vn - Vietnamese
  • zh - Mandarin
value
string | string | number | object[] | object | number

The value of the date value provided to flatpickr, could be a date, a date number, a date string, an array of dates.

appendTo
object

The DOM element the Flatpicker should be inserted into. <body> by default.

onChange
function

The change event handler.

onClose
function

The close event handler.

minDate
string

The minimum date that a user can start picking from.

maxDate
string

The maximum date that a user can pick to.

Help and resources