react-tix-date-time-picker v1.1.28

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

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

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

Author

Deni Setyawan.