ced94a4bb0 | ||
---|---|---|
.. | ||
__test__ | ||
Calendar.js | ||
CalendarDay.js | ||
CalendarMonth.js | ||
DatePicker.d.ts | ||
DatePicker.js | ||
DatePickerDialog.js | ||
config.css | ||
index.d.ts | ||
index.js | ||
readme.md | ||
theme.css |
readme.md
Date Picker
A dialog date picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
import DatePicker from 'react-toolbox/lib/date_picker';
const datetime = new Date(2015, 10, 16);
const min_datetime = new Date(new Date(datetime).setDate(8));
datetime.setHours(17);
datetime.setMinutes(28);
const localeExample = {
months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
weekdays: 'igandea_astelehena_asteartea_asteazkena_osteguna_ostirala_larunbata'.split('_'),
weekdaysShort: 'ig._al._ar._az._og._ol._lr.'.split('_'),
weekdaysLetter: 'ig_al_ar_az_og_ol_lr'.split('_')
}
class DatePickerTest extends React.Component {
state = {date2: datetime};
handleChange = (item, value) => {
this.setState({...this.state, [item]: value});
};
render () {
return (
<section>
<DatePicker label='Birthdate' sundayFirstDayOfWeek onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Locale (String) - Spanish' locale='es' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Locale (Object) - Basque' locale={localeExample} onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Expiration date' sundayFirstDayOfWeek minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
<DatePicker label='Formatted date' sundayFirstDayOfWeek inputFormat={(value) => `${value.getDate()}/${value.getMonth() + 1}/${value.getFullYear()}`} onChange={this.handleChange.bind(this, 'date3')} value={this.state.date3} />
</section>
);
}
}
If you want to provide a theme via context, the component key is RTDatePicker
.
Properties
Name | Type | Default | Description |
---|---|---|---|
active |
Boolean |
false |
Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
autoOk |
Boolean |
false |
Automatically selects a date upon clicking on a day. |
cancelLabel |
String |
'Cancel' |
Label used for cancel button on date picker dialog. |
className |
String |
This class will be placed at the top of the DatePickerDialog component so you can provide custom styles. |
|
disabledDates |
Array |
An array of date objects which will be disabled in the calendar. All other dates will be enabled. | |
enabledDates |
Array |
An array of date objects which will be enabled in the calendar. All other dates will be disabled. | |
error |
String |
Give an error message to display under the field. | |
inputClassName |
String |
This class will be applied to Input component of DatePicker . |
|
inputFormat |
Function |
Function to format the date displayed on the input. | |
label |
String |
The text string to use for the floating label element in the input component. | |
locale |
String or Object |
'en' |
Set the locale for the date picker dialog ('de','no','en','es','af','ar','be','bg','bn','bo','br','bs','ca','gl','eu','pt','it','fr','ru','ua'). Object is supported too (see example above). |
maxDate |
Date |
Date object with the maximum selectable date. | |
minDate |
Date |
Date object with the minimum selectable date. | |
onChange |
Function |
Callback called when the picker value is changed. | |
onClick |
Function |
Callback fired on Input click. | |
onDismiss |
Function |
Callback fired after dismissing the Dialog. | |
onEscKeyDown |
Function |
Callback called when the ESC key is pressed with the overlay active. | |
onKeyPress |
Function |
Callback invoked on Input key press. | |
onOverlayClick |
Function |
Callback to be invoked when the dialog overlay is clicked. | |
readonly |
Boolean |
The input element will be readonly and look like disabled. | |
sundayFirstDayOfWeek |
Boolean |
false |
Set week's first day to Sunday. Default week's first day is Monday (ISO 8601). |
value |
Date |
Date object with the currently selected date. |
Theme
Name | Description |
---|---|
active |
Used for the active day and year. |
button |
Used for the buttons in the dialog. |
calendar |
Used for the calendar root element. |
calendarWrapper |
Used as wrapper for the calendar component inside dialog. |
container |
Wrapper element of the picker. |
date |
Used for the date element inside header. |
day |
Used for the day element inside the calendar. |
days |
Used for the list of days inside a month. |
dialog |
Used for the dialog component. |
disabled |
Added to day element when day is disabled. |
header |
Used for the dialog header,. |
input |
Used for Input element that opens the picker. |
label |
Used for the label element. |
month |
Used for the month root element. |
monthsDisplay |
Added to the root dialog when months are displayed. |
next |
Used for the next month icon. |
prev |
Used for the prev month icon. |
title |
Used for the month title element. |
week |
Used for the weekdays wrapper. |
year |
Used for the year element inside header. |
years |
Used for the years list in years view. |
yearsDisplay |
Added to the root dialog when years are displayed. |