Date Picker
View in LexiconDate and Time pickers let users select a date and time for a form.
| install | yarn add @clayui/date-picker |
|---|---|
| version |  |
| use | import DatePicker from '@clayui/date-picker'; |
Table of Contents
Date Picker is created following the principles of Lexicon, Internationalization and Extension Points by default is integrated with Time Picker that offers the minimum of features to set a time.
By default Date Picker does not handle input masking, letting you take control so you can take care of internationalization. Date Picker will update the Calendar only when the value entered in the input is a valid date, respecting the dateFormat API.
For mobile viewing mode, Lexicon encourages you to use the native Date Picker, they are many robust and more accessible in the mobile view, Clay offers the useNative API to replace the Date Picker view mode with the native and continue to get the features of the component.
The component is treated as controlled, use the onValueChange and value APIs to control the flow of information.
years
, which can be displayed in the Date Picker, if the user enters a year
that is not within the range will be treated as an invalid date.import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(null);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<DatePicker
onChange={setValue}
placeholder="YYYY-MM-DD"
value={value}
years={{
end: new Date().getFullYear(),
start: 1997,
}}
/>
</div>
</Provider>
);
}
Time
The ClayTimePicker by default is already implemented in the Date Picker, you can enable it using the time API. To provide a context for the timezone user, use the timezone API for this.
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(null);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<DatePicker
onChange={setValue}
placeholder="YYYY-MM-DD HH:mm"
time
timezone="GMT+01:00"
value={value}
years={{
end: new Date().getFullYear(),
start: 2008,
}}
/>
</div>
</Provider>
);
}
Range
Range is used to allowing the user to select a date range using a single calendar. The user can interact in the single input to select the start and end dates using the - separator, the separator is fixed.
When a range is selected using the input or the calendar, the onValueChange callback is called with the value in string type, respecting the format of the dateFormat for both dates together with the separator.
time is not supported when the
range
is enabled.import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(null);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<DatePicker
onChange={setValue}
placeholder="YYYY-MM-DD - YYYY-MM-DD"
range
value={value}
years={{
end: new Date().getFullYear(),
start: 1997,
}}
/>
</div>
</Provider>
);
}
Internationalization
To set internationalization of the component, you need to configure the props according to the language. Date Picker offers low level APIs to configure firstDayOfWeek, weekdaysShort, months, timezone and dateFormat, you can follow the example below to set up a Date Picker for Russian.
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(null);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<DatePicker
dateFormat="dd.MM.yyyy"
firstDayOfWeek={1}
months={[
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь',
]}
onChange={setValue}
placeholder="DD.MM.YYYY"
value={value}
weekdaysShort={['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']}
years={{
end: new Date().getFullYear(),
start: 2008,
}}
/>
</div>
</Provider>
);
}
-
firstDayOfWeekby default the value by default the value is 0 (Sunday) and its values are the days of the week, 1 (Monday), 2 (Tuesday), 3 (Wednesday), 4 (Thursday), 5 (Friday), 6 (Saturday). -
dateFormatandtimeFormatis defined according to the formatting rules of date-fns which is an implementation of the unicode technical standards . -
monthsis anArray<string>with available months starting January to December . -
weekdaysShortis anArray<string>with the names of the days of the week in short form , starting from Sunday to Saturday .
weekdaysShort
the definition of the API
firstDayOfWeek
will take care of changing this,
keep the order from Sunday to Saturday
.Custom Footer
To customize the Date Picker content footer you can use the footerElement API, its type is a Function that should return an element (Read more about renders props), this personalization point is treated as an extension point in the Lexicon language.
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(null);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<DatePicker
footerElement={() => <span>Footer Content</span>}
onChange={setValue}
placeholder="YYYY-MM-DD"
value={value}
years={{
end: new Date().getFullYear(),
start: 2008,
}}
/>
</div>
</Provider>
);
}
Programatically Expand Dropdown
If you want to expand or close the picker from outside of the component, use the props expand and onExpandChange.
Note about Moment.js
In version 3.4.0, we made the decision to switch to use date-fns instead of Moment.js due to dependency size. Making this changed help reduce the size of @clayui/date-picker by almost 50 KB.