carbon-design-system / carbon-components-react

date-picker

v7.13.2

v7.13.1

v7.13.0

v7.7.2

STATUS

Passing

DOWNLOADS

9,574

LICENSE

Apache 2.0

VISIBILITY

Public

PUBLISHED

2 years 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

Vue

Angular

React Native

Add dependency...

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';

Props

<DatePicker>

Prop	v9	v10
`appendTo`	Accepts a CSS selector or a DOM node	Accepts a DOM node only

Properties

Name	Type	Default value	Description
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	`bool`	`false`	`true` to use the short version.
light	`bool`	`false`	`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.