@opuscapita/react-datetime

react-datetime

Description

React date time picker and input component

Installation

npm install @opuscapita/react-datetime
npm install moment

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

Prop name	Type	Default	Description
className	string	''	The class attribute of the element
value	string	''	Current date value
onChange	function		onChange callback returns new date string
onDayClick	function		onDayClick callback http://react-day-picker.js.org/api/DayPicker#onDayClick
locale	string	'en'	Locale
dateFormat	string	'M/D/YYYY'	Date format as MomentJS format
inputProps	object		Custom props for the input field
inputRef	function		Input component ref function
disabled	boolean		Is component disabled
time	boolean	false	Time picker on/off. Prefer DateTime component if possible
minutesInterval	number	5	Minutes interval for the timepicker
showOverlay	boolean	false	Show overlay
showClearValue	boolean	true	Show "clear value" button
showWeekNumber	boolean	true	Show week number in calendar
selectedDays	array, object, function	null	http://react-day-picker.js.org/api/DayPicker#selectedDays
disabledDays	array, object, function	null	http://react-day-picker.js.org/api/DayPicker#disabledDays
formatDate	function	undefined	If formatDate is defined, it is used to format the input date instead of dateFormat and the input date is read-only.
calendarType	enum ['popup','static']	'popup'	How calendar is rendered, default popup

Code example

import React from 'react';
import { DateInput, DateTimeInput } from '@opuscapita/react-datetime';

constructor(props) {
  super(props)
  this.state = {
    date: null,
    dateTime: null,
    time: {
      hour: 10,
      minute: 30,
    },
  }
}

export default class SomeView extends React.Component {
  render() {
    return (
      <DateInput
        value={this.state.date}
        onChange={this.changeDate}
      />

      <DataTimeInput
        value={this.state.dateTime}
        onChange={this.changeDateTime}
      />

      <TimePicker
        time={this.state.time}
        onChange={this.changeTime}
        minutesInterval={2}
      />
    );
  }
}