react-datetime-together v0.3.2
@ilb/react-datetime-together
Date time picker with date and time on one screen (based on react-datetime)
Installation :
$ npm install react-datetime-together --saveДля использования пакета без css-modules нужно использовать:
import DateTimePicker from 'react-datetime-together/lib/common';иначе:
import DateTimePicker from 'react-datetime-together';Необходимые пакеты
react
react-addons-shallow-compareОглавление
API
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | Required unique identifier | |
| defaultValue | string | '' | Represents the selected date for the component to use it as a uncontrolled component. |
| dateFormat | string | YYYY-MM-DD | Defines the format for the date. It accepts any moment.js date format. |
| timeFormat | string | HH:mm | Defines the format for the time. It accepts any moment.js time format. |
| dateTimeSeparator | string | T | Defines char (or string) between date and time. |
| withoutDate | boolean | undefined | If true the datepicker is disabled and the component can be used as timepicker. |
| withoutTime | boolean | undefined | If true the timepicker is disabled and the component can be used as datepicker. |
| withoutButtons | boolean | undefined | If true the buttons TODAY and CLEAR are disabled. |
| className | string | "" | Extra class names for the component markup. |
| inputProps | object | undefined | Defines additional attributes for the input element of the component (such as placeholder, style, tabIndex and etc.). Don't place here the reserved keywords (id, type, className, value, onChange, onFocus, onClick, onInput), it will do nothing. |
| locale | string | 'ru' | Manually set the locale for the react-datetime instance. Moment.js locale needs to be loaded to be used, see i18n docs. |
| button | boolean | false | Wether to show a calendar button on the right side to show/hide datetime picker. |
| onChange | function | empty function | Callback trigger when the date changes. The callback receives two params: the value of the input (a string) is returned and type of selection method (manual_correct/manual_incorrect/selected/now/clear) |
Selectable dates
It is possible to disable dates in the calendar if we don't want the user to select them. It is possible thanks to the prop isValidDate, which admits a function in the form function( currentDate, selectedDate ) where both arguments are moment.js objects. The function should return true for selectable dates, and false for disabled ones.
If we want to disable all the dates before today we can do like
// Let's use moment static reference in the Datetime component.
var yesterday = moment().subtract(1, 'day');
var valid = function( current ){
return current.isAfter( yesterday );
};
<DateTimePicker isValidDate={ valid } />See the isValidDate prop working here.
If we want to disable the weekends
var valid = function( current ){
return current.day() != 0 && current.day() != 6;
};
<DateTimePicker isValidDate={ valid } />examples
Simple date time picker
import DateTimePicker from 'react-datetime-together';
...
<DateTimePicker id="begDate"/>Russian format and placeholder
<DateTimePicker
id="begDate"
locale="ru"
dateFormat="DD.MM.YYYY"
timeFormat="HH:mm"
dateTimeSeparator=" "
inputProps={{
placeholder: 'ДД.ММ.ГГГГ',
}}
/>datepicker with default value, calendar button and onChange event handler
<DateTimePicker
id="begDate"
defaultValue="2016-01-31"
button
withoutTime
withoutButtons
onChange={this.handleDateChange.bind(this)}
/>Contributions
Any help is always welcome :)