react-datetime-together

@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

Оглавление

1. API
2. Examples

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 } />

The example working here.

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 :)