tpicker-react

React Custom Time Picker

Project dependecies

• react
• font-awesome

TPickerReact return formatted time eg. 8:45 AM

TPickerRangeReact return a javascript object

{ 
    start: "7:15 AM",
    end: "9:00 AM",
    name: "picker1"
}

Usage

Install the package.

yarn add tpicker-react # npm install tpicker-react --save

import React, { Component } from 'react'
import { render } from 'react-dom'
import { TPickerReact as TimePicker, TPickerRangeReact as TimeRange } from 'tpicker-react'

const App = () => {
    return (
        <TimePicker />
    )
}

render(<App />, document.getElementById('root'))

Stylesheet

Assuming you're using sass

@import "~tpicker-react/tpicker-react.css"

// ....
// your current style
// ....

or add on your main entry file eg. index.js

import 'tpicker-react/tpicker-react.css'

Please see demo for more detail.

Demo

git clone [e-mail]:pauldm24/tpicker-react.git
cd tpicker-react
cd demo
yarn install # npm install

Browse @ http://localhost:8081

TODO:

Add validation on Date Range (TPickerRangeReact)

Note:

This is not production ready package, if you want it to use, use it on your own risk.