81acda7162
* Add postcss-next postcss-include and reporter
* Add stylelint
* Add CSS colors
* Add CSS custom media queries
* Use dashes for CSS colors
* Add base CSS variables
* Remove AppBar SASS dependency from spec page
* Migrate AppBar style to PostCSS
* Migrate Avatar style to PostCSS
* Migrate Ripple style to PostCSS
* Remove unneeded media CSS import in Avatar
* Add shadows to CSS variables
* Migrate Button style to PostCSS
* Update webpack test config and linting from npm
* Migrate Input style to PostCSS
* Add missing input config variables for Dropdown and Autocomplete
* Migrate Chip style to PostCSS
* Migrate Autocomplete style to PostCSS
* Migrate Dropdown style to PostCSS
* Migrate animations to PostCSS
* Migrate Card style to PostCSS
* Migrate Checkbox style to PostCSS
* Migrate DataPicker style to PostCSS
* Migrate Dialog style to PostCSS
* Migrate Drawer style to PostCSS
* Add postcss-mixins and postcss-each
* Migrate Layout style to PostCSS
* Fix bug in button theme
* Bugfix in avatar css
* Add some missing nesting notations
* Migrate Link style to PostCSS
* Migrate List style to PostCSS
* Migrate Menu style to PostCSS
* Migrate Navigation style to PostCSS
* Migrate Overlay style to PostCSS
* Migrate ProgressBar style to PostCSS
* Migrate Radio style to PostCSS
* Migrate Slider style to PostCSS
* Migrate Snackbar style to PostCSS
* Migrate Switch style to PostCSS
* Migrate Table style to PostCSS
* Migrate Tabs style to PostCSS
* Migrate TimePicker to PostCSS
* Migrate Tooltip styles to PostCSS
* Update webpack config for testing and tests
* Migrate commons to PostCSS
* Remove sass from main project
* Bye from docs to sass
* Build with CSS
* Remove unneded deps for sass in docs subproject
* Fix tests
* use 4p shadow in AppBar as spec indicates
* Fixed typo in list/config.css
* Fix tests
* Fix linter errors
* Latest build
* Release 2.0.0-beta.0
* Remove sass lint
* fixes old sass var in css config
* Update linter
* New Table implementation
* Fix old sass var in list/config.css
See
|
||
---|---|---|
.. | ||
__test__ | ||
Calendar.js | ||
CalendarDay.js | ||
CalendarMonth.js | ||
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. | |
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. |
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. |