react-times
A time picker react-component, no jquery-rely, writing in es6 standard style.
Play in local
Install
dependencies:
No jQuery rely ???
So generally speaking, you should already have react
& react-dom
dependencies in your project. If not:
Config
Cause I'm using moment-timezone
, you need to be able to parse json file.
Use webpack config as example:
Usage
This component has two themes now: Material Theme by default, or Classic Theme.
Always remember import css file when you use react-times
See more examples here:
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
- 12 hours mode with Material Theme, light color by default
- 24 hours mode with Material Theme, dark color
- 24 hours mode, showing user current timezone. (Besides, your can use
timezone
props to custom timezone)
- 24 hours mode with Classic Theme, light color by default
- 24 hours mode with Classic Theme, dark color
APIs
Props
time
Initial time, must be a string, with
${hour}:${minute}
format, default now (by usingmoment()
):
timeFormat
To show the time using custom style
timeFormatter
To show the time using custom style
focused
Whether the timepicker pannel is focused or not when it did mount. Default
false
withoutIcon
Whether the timepicker has a svg icon. Default
false
.
colorPalette
The main color palette of picker pannel. Default
light
.
timeMode
Support "12" or "24" hours mode.
meridiem
PropTypes.string
, support "PM" or "AM" for 12 hours mode, defaultAM
showTimezone
PropTypes.bool
, whether show user timezone or not, defaultfalse
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.
closeOnOutsideClick
If you don't wanna close panel when outside click, you can use closeOnOutsideClick={false}. Default true
<TimePicker
closeOnOutsideClick={false}
/>
draggable
If you don't want to drag the pointer, then you can set draggable
props to false
, then users can only use click to change time. Default true
<TimePicker
draggable={false}
/>
language
React.string
, use different language. Default english.
phrases
React.object
, specify text values to use for specific messages. By default, phrases will be set from defaults based on language.
Specify any of the available phrases you wish to override or all of them if your desired language is not yet supported.
See language.js for default phrases.
minuteStep
React.number
, default5
. It means the minium minute can change. You can set it to 1, 2, 3...
limitDrag
React.bool
, defaultfalse
. Iftrue
, it will limite the drag rotation byminuteStep
Callback
onFocusChange
PropTypes.func
The callback func when component
focused
state is changed.
onTimeChange
PropTypes.func
The callback func when component
hour
orminute
orAM/PM
state is changed.
onTimezoneChange
PropTypes.func
The callback func when timezone changed. Receives timezone object as argument with the following properties:
- city
- zoneAbbr
- zoneName
Todos
-
Test
-
[x] TimePicker Component
-
[x] PickerDragHandler Component
-
[x] PickerPointGenerator Component
-
[x] MaterialTheme Component
-
[x] TwelveHoursTheme Component
-
[x] PickerPoint Component
-
[x] OutsideClickHandler Component
-
[x] utils test
-
-
Color Palette (Now It has light and dark color)
- [x] light
- [x] dark
- [ ] colorful
-
Themes
- [x] Material Theme
- [x] Classical Theme
-
Mode
- [x] 12h mode
- [x] 24h mode
-
Animations