@opuscapita/react-datetime

React date time picker/input component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
02Mar 24, 2020Mar 9, 2018Minified + gzip package size for @opuscapita/react-datetime in KB

Readme

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.

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.