React-Tix-Date-Time-Picker v1.1.16

A date time picker for your React app.

• Pick days, months, years, and time
• Supports english and indonesian
• No moment.js needed
• Build on top of react-day-picker plugin

Install

Install by executing

npm install --save react-tix-date-time-picker --registry=http://verdaccio.tiket.com:8080

Date Picker

Usage

Displays an input field complete with inputs and a calendar. Here's an example of basic usage:

import React, { Component } from 'react';
import { DatePicker } from 'react-tix-date-time-picker';
import 'react-tix-date-time-picker/libs/styles.css';

class MyApp extends Component {
  onApply = date => this.setState({ date })

  render() {
    return (
      <div>
        <DatePicker
          onApply={this.onApply}
        />
      </div>
    );
  }
}

Props

|Prop name|Description|Example values| |----|----|----| |className|Defines datepicker container class name(s).|String: "class1 class2"| |inputClassName|Defines datepicker input class name(s).|String: "class1 class2"| |placeholder|Defines input placeholder.|String: "Choose Date"| |dateFormat|Defines the date format content of the input|String: "yyyy-mm-dd HH:MM:ss"| |value|Defines initial or value of date input|String: "2018-03-01"Date Object new Date()| |lang|Defines the content language.|String: "en"| |onApply|Function called when the user clicks a date or click apply button on calendar.|(selectedDate) => alert('Sellected date is: ', selectedDate)| |selectType|Define type of date selection, enum of: "single", "multiple" or "range"|String: "multiple"| |beforeShow|Function called before calendar shown.|(dateValue, input, overlay) => { console.log(dateValue) }| |afterShow|Function called after calendar shown.|(dateValue, input, overlay) => { console.log(dateValue) }| |beforeHide|Function called before calendar hide.|(dateValue, input, overlay) => { console.log(dateValue) }| |afterHide|Function called after calendar hide.|(dateValue, input, overlay) => { console.log(dateValue) }|

rest of available props relies on react-day-picker documentation

Function

.reset() Function to reset datepicker state. usage:

<DatePicker ref={dp => this.datePicker = dp}>

...

handleClick() {
  this.datepicker.reset();
}

Date Time Picker

Usage

Displays an input field complete with inputs, a calendar and time picker. Here's an example of basic usage:

import React, { Component } from 'react';
import { DateTimePicker } from 'react-tix-date-time-picker';
import 'react-tix-date-time-picker/libs/styles.css';

class MyApp extends Component {
  onApply = date => this.setState({ date })

  render() {
    return (
      <div>
        <DateTimePicker
          onApply={this.onApply}
        />
      </div>
    );
  }
}

Props

|Prop name|Description|Example values| |----|----|----| |className|Defines date time picker class name(s).|String: "class1 class2"| |inputClassName|Defines input class name(s).|String: "class1 class2"| |placeholder|Defines input placeholder.|String: "Choose Date Time"| |dateFormat|Defines the date format content of the input|String: "yyyy-mm-dd HH:MM:ss"| |value|Defines initial or value of date input|String: "2018-03-01"Date Object new Date()| |lang|Defines the content language.|String: "en"| |onApply|Function called when the user clicks apply button on calendar.|(selectedDate) => alert('Selected date is: ', selectedDate)| |minStep|Defines the minute increment step.|Int: 5| |minStart|Defines the minimum minute.|Int: 10| |minEnd|Defines the maximum minute.|Int: 35| |hourStep|Defines the minute increment step.|Int: 2| |hourStart|Defines the minimum hour.|Int: 6| |hourEnd|Defines the maximum hour.|Int: 22|

rest of available props relies on react-day-picker documentation

Time Picker

Usage

Displays an input field complete with inputs and time picker. Here's an example of basic usage:

import React, { Component } from 'react';
import { TimePicker } from 'react-tix-date-time-picker';
import 'react-tix-date-time-picker/libs/styles.css';

class MyApp extends Component {
  onApply = time=> this.setState({ time })

  render() {
    return (
      <div>
        <TimePicker 
          onApply={this.onApply}
        />
      </div>
    );
  }
}

Props

|Prop name|Description|Example values| |----|----|----| |className|Defines date time picker class name(s).|String: "class1 class2"| |inputClassName|Defines input class name(s).|String: "class1 class2"| |placeholder|Defines input placeholder.|String: "Select Time"| |timeFormat|Defines the time format content of the input|String: "HH:MM"| |value|Defines initial or value of time input|String: "20:10"Date Object: new Date()| |lang|Defines the content language.|String: "en"| |onApply|Function called when the user clicks apply button on time picker.|(selectedTime) => alert('Sellected time is: ', selectedTime)| |minStep|Defines the minute increment step.|Int: 5| |minStart|Defines the minimum minute.|Int: 10| |minEnd|Defines the maximum minute.|Int: 35| |hourStep|Defines the minute increment step.|Int: 2| |hourStart|Defines the minimum hour.|Int: 6| |hourEnd|Defines the maximum hour.|Int: 22|

Author

Deni Setyawan.