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