!react-times

    


README：中文版

> A time picker react-component, no jquery-rely, writing in es6 standard style.

Check here to see changed props in new version.

!react-times

Online demo

Check here to play online demo.

Play in local

``bash
$ git clone https://github.com/ecmadao/react-times.git

$ npm install

$ npm run storybook
`

Install

dependencies:

- moment
- react
- react-dom

> No jQuery rely 😤😤😤

So generally speaking, you should already have react & react-dom dependencies in your project. If not:

`bash
$ npm install react react-dom moment moment-timezone --save-dev


and

Cause I'm using moment-timezone, you need to be able to parse json file.

Use webpack (version < 2) config as example:

- How should I use moment-timezone with webpack?

`bash
$ npm i json-loader --save
`

`javascript
// webpack.config.js
// ATTENTION:
// webpack >= v2.0.0 has native JSON support.
// check here: https://github.com/webpack-contrib/json-loader/issues/65 for more information
{
module: {
loaders: [
{include: /\.json$/, loaders: ["json-loader"]}
]
},
resolve: {
extensions: ['', '.json', '.jsx', '.js']
}
}
`

Usage

This component has two themes now: Material Theme by default, or Classic Theme.

> Always remember import css file when you use react-times

`javascript
// basic usage
// in some react component
import React from 'react';
import TimePicker from 'react-times';

// use material theme
import 'react-times/css/material/default.css';
// or you can use classic theme
import 'react-times/css/classic/default.css';

export default class SomeComponent extends React.Component {
onTimeChange(options) {
// do something
}

onFocusChange(focusStatue) {
// do something
}

render() {
onFocusChange={this.onFocusChange.bind(this)}
onTimeChange={this.onTimeChange.bind(this)}
/>
}
}
`

> See more examples here:

`javascript
// some config example
render() {
showTimezone // show the timezone, default false
focused // whether to show timepicker modal after rendered. default false
withoutIcon // whether to has time icon on button, default false
colorPalette="dark" // main color, default "light"
time="13:05" // initial time, default current time
theme="material"
// or
// theme="classic"
timeMode="12" // use 24 or 12 hours mode, default 24
timezone="America/New_York" // what timezone to use, detects the user's local timezone by default
/>
}
`

> For more detail usage, you can visit example or see the source code.

Show time

- 24 hours mode with Material Theme, light color by default

`javascript

`

!24HoursMode

- 12 hours mode with Material Theme, light color by default

`javascript

`

!12HoursMode

- 24 hours mode with Material Theme, dark color

`javascript

`

!DarkColor

- 24 hours mode, showing user current timezone. (Besides, your can use timezone props to custom timezone)

`javascript

`

!showTimezone

- 24 hours mode with Classic Theme, light color by default

`javascript

`

!24HoursMode-ClassicTheme

- 24 hours mode with Classic Theme, dark color

`javascript

`

!24HoursMode-ClassicTheme-dark

APIs

Props

- time

> Initial time, must be a string, with ${hour}:${minute} format, default now (by using moment()):

`javascript
// PropTypes.string
time='11:11'
time='11:01'
time='1:01'
time='1:1'
`

- timeFormat

> To show the time using custom style

`javascript
// PropTypes.string
// HH, MM means 24 hours mode
// hh, mm means 12 hours mode
timeFormat='HH:MM'
timeFormat='hh:mm'
timeFormat='H:M'
timeFormat='h:m'

// Warning:
// If you are using 12 hours mode but with hh or mm format,
// or using 24 hours mode with HH or MM format,
// you will receive a warning on console, and force to use the timeMode props

// So, if you wanna use hh:mm or h:m, you need to set timeMode props to 12
// (cause timeMode default is 24)
`

- timeFormatter

> To show the time using custom style

`javascript
// PropTypes.func
timeFormatter={({ hour, minute, meridiem }) => ${hour} - ${minute}}

// Note:
// If you both set timeFormat and timeFormatter props (and they all validate), component will use timeFormatter function
`

- focused

> Whether the timepicker pannel is focused or not when it did mount. Default false

`javascript
// PropTypes.bool
focused={false}
focused={true}
`

- withoutIcon

> Whether the timepicker has a svg icon. Default false.

`javascript
// PropTypes.bool
withoutIcon={true}
`

- colorPalette

> The main color palette of picker pannel. Default light.

`javascript
// PropTypes.string
colorPalette="dark"
colorPalette="light"
`

- timeMode

> Support "12" or "24" hours mode.

`javascript
// PropTypes.string or PropTypes.number
timeMode="24"
timeMode=24
timeMode="12"
timeMode=12
`

- meridiem

> PropTypes.string, support "PM" or "AM" for 12 hours mode, default AM

- showTimezone

> PropTypes.bool, whether show user timezone or not, default false

- timezone

> PropTypes.string, change user timezone, default user current local timezone.

- trigger

> React.component, means a DOM which can control TimePicker Modal "open" or "close" status.

`javascript
focused={focused}
trigger={(
onClick={this.handleFocusedChange.bind(this)} >
click to open modal