3.7.2 • Published 4 years ago

@opuscapita/react-datetime v3.7.2

Weekly downloads
28
License
MIT
Repository
github
Last release
4 years ago

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 nameTypeDefaultDescription
classNamestring''The class attribute of the element
valuestring''Current date value
onChangefunctiononChange callback returns new date string
onDayClickfunctiononDayClick callback http://react-day-picker.js.org/api/DayPicker#onDayClick
localestring'en'Locale
dateFormatstring'M/D/YYYY'Date format as MomentJS format
inputPropsobjectCustom props for the input field
inputReffunctionInput component ref function
disabledbooleanIs component disabled
timebooleanfalseTime picker on/off. Prefer DateTime component if possible
minutesIntervalnumber5Minutes interval for the timepicker
showOverlaybooleanfalseShow overlay
showClearValuebooleantrueShow "clear value" button
showWeekNumberbooleantrueShow week number in calendar
selectedDaysarray, object, functionnullhttp://react-day-picker.js.org/api/DayPicker#selectedDays
disabledDaysarray, object, functionnullhttp://react-day-picker.js.org/api/DayPicker#disabledDays
formatDatefunctionundefinedIf formatDate is defined, it is used to format the input date instead of dateFormat and the input date is read-only.
calendarTypeenum '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}
      />
    );
  }
}
3.7.2

4 years ago

3.7.1

4 years ago

3.7.0

4 years ago

3.6.2

4 years ago

3.6.1

4 years ago

3.6.0

5 years ago

3.5.1

5 years ago

3.5.0

5 years ago

3.4.0

5 years ago

3.3.2

5 years ago

3.3.1

5 years ago

3.3.0

5 years ago

3.2.12

5 years ago

3.2.11

5 years ago

3.2.10

5 years ago

3.2.9

5 years ago

3.2.8

5 years ago

3.2.7

5 years ago

3.2.6

5 years ago

3.2.5

6 years ago

3.2.4

6 years ago

3.2.2

6 years ago

3.2.1

6 years ago

3.2.0

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.2.4

6 years ago

2.2.3

6 years ago

2.2.2

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.0

6 years ago