(awesome) React Times Picker

An awesome time picker for React!

• TimePicker - pick a minute of day
• TimeRangePicker - pick a time range in a day

Testing it out

$ git clone https://github.com/mdiponio/react-times-picker

$ npm install

$ npm run storybook

Using it

Using DateTimePicker

import React from "react";

import { TimePicker } from "@euvs/time_picker";

// Import CSS
import "@euvs/time_picker/dist/style.css";

class Example extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            time: 0,  // Minute of day from 0 to 24 * 60
        }        
    }
        
    render() {
        return (
            <TimePicker time={this.state.time} onSelect={(time) => this.setState({ time })} />
        );
    }
}

Using TimeRangePicker

import React from "react";

import { TimeRangePicker } from "@euvs/time_picker";

// Import CSS
import "@euvs/time_picker/dist/style.css";

class ExampleRange extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            from: 0,  // Beginning time, minute of day from 0 to 24 * 60
            to: 0,    // End time
        }        
    }
        
    render() {
        return (
            <TimeRangePicker to={this.state.from} from={this.state.to} onSelect={(from, to) => this.setState({ from, to })} />
        );
    }
}

Component props

<TimePicker />

Prop	Description	Type	Mandatory	Default
min	Time of day in minutes (e.g. 5:30 PM is 1050).	number	y
onSelect	Event triggered when time picked. When function is called, it is passed a new time value. Must to set to update min prop value!!!	function	y
step	Increment between minutes.	number	n	5
amPm	Whether to display time in AM PM format or 24hr format.	boolean	n	true
dark	Whether to use dark theme.	boolean	n	false
className	Class selector to add to component	string	n

<TimeRangePicker />

Prop	Description	Type	Mandatory	Default
from	Range start time of day in minutes.	number	y
to	Range end time of day in minutes. This is at minimum step minutes after from.	number	y
onSelect	Event triggered when time picked. When function is called, it is passed a new from and to values. . Must to set to update both from and to prop values!!!	function	y
maxGap	Maximum duration in minutes between from and to times.	number	n
step	Increment between minutes.	number	n	15
amPm	Whether to display time in AM PM format or 24hr format.	boolean	n	true
dark	Whether to use dark theme.	boolean	n	false
className	Class selector to add to component	string	n