Introduction
A simple react component to select time or display time in 12 hour or 24 hours format
Click here for demo
Installation:
npm install react-clock-select
Features:
-
Analog & Digital:
Two types of time components available
AnalogTime
&DigitalTime
. - Picker: Input field for time selection which pops open the Analog/Digital picker.
- Time Display: For showing only Analog/Digital time display.
- Time Format: Returns time in 12hours or 24hours format.
- Live Clock: Real Time Clock with optional initial value.
- Fully Customizable: Seperate props for changing color & size of time component. For advanced customization, CSS classes can be overridden.
AnalogTime
):
Example ( import React from 'react';
import { AnalogTime } from "react-clock-select";
function TimePicker(props){
return(
<AnalogTime
type={"picker"}
// "picker" or "display", default is picker
value={new Date()}
// Date() object or
// a valid time string for Date() constructor
placeholder={"Select Time.."}
// when 'value' is empty string
hoursFormat={12}
// 12 or 24
size={1}
// greater than 0, Default is 1.
selectorPosition={"top"}
// "top", "bottom" or "modal" (Picker only).
// Default is bottom.
liveUpdater={true}
// true or false (Display only).
// Default is false.
baseColor={"rgb(255,255,255)"}
// Color value for clock base
hourHandColor={"white"}
// Color value for clock base
minuteHandColor={"#FFFFFF"}
// Color value for clock base
secondHandColor={"#4d944e"}
// Color value for clock base
onConfirm={(e,value)=>{
// "e" is the event object
// "value" is a JSON
// {
// time_string: "12:00:00 AM",
// hours: "12",
// minutes: "00",
// seconds: "00",
// am_pm: "AM",
// }
}}
/>
)
}
DigitalTime
):
Example ( import React from 'react';
import { DigitalTime } from "react-clock-select";
function TimePicker(props){
return(
<DigitalTime
type={"picker"}
// "picker" or "display", default is picker
value={new Date()}
// Date() object or
// a valid time string for Date() constructor
placeholder={"Select Time.."}
// when 'value' is empty string
hoursFormat={12}
// 12 or 24
size={1}
// greater than 0, Default is 1.
selectorPosition={"top"}
// "top", "bottom" or "modal" (Picker only).
// Default is bottom.
liveUpdater={true}
// true or false (Display only).
// Default is false.
color={"rgba(24, 24, 24, 0.671)"}
// Color value for clock digits
onConfirm={(e,value)=>{
// "e" is the event object
// "value" is a JSON
// {
// time_string: "12:00:00 AM",
// hours: "12",
// minutes: "00",
// seconds: "00",
// am_pm: "AM",
// }
}}
/>
)
}
AnalogTime
):
Props (Prop | Type | Description |
---|---|---|
type | String | "picker" for time picker display or "display" for non editable display |
value | String/Date() | Sets default time value |
placeholder | String | Set placeholder, visible when 'value' is empty string |
hoursFormat | Number | Hour format can be either 12 or 24 |
size | Number | Size of the clock, should be greater than 0, Default is 1 |
selectorPosition | String | Position of the picker, "top", "bottom" or "modal" (Picker only). Default is bottom. |
liveUpdater | Boolean | Live Clock, if "value" prop is provided live time will be initiated from the "value". |
baseColor | String | Color value for clock base |
hourHandColor | String | Color value for hour hand |
minuteHandColor | String | Color value for minute hand |
secondHandColor | String | Color value for second hand |
onConfirm | Callback | Callback function for date confirm on OK button. value is a JSON { |
DigitalTime
):
Props (Prop | Type | Description |
---|---|---|
type | String | "picker" for time picker display or "display" for non editable display |
value | String/Date() | Sets default time value |
placeholder | String | Set placeholder, visible when 'value' is empty string |
hoursFormat | Number | Hour format can be either 12 or 24 |
size | Number | Size of the digital font, should be greater than 0, Default is 1 |
selectorPosition | String | Position of the picker, "top", "bottom" or "modal" (Picker only). Default is bottom. |
liveUpdater | Boolean | Live Clock, if "value" prop is provided live time will be initiated from the "value". |
color | String | Color value for clock digits |
onConfirm | Callback | Callback function for date confirm on OK button . value is a JSON { |
AnalogTime
):
CSS Classes (Default CSS classes for easy css customization.
ClassName | Description |
---|---|
rcs-analog-picker-custom | For analog picker container. |
rcs-analog-clock-base-custom | For the base svg of analog clock. |
rcs-analog-hour-hand-custom | For the hour-hand svg of analog clock. |
rcs-analog-minute-hand-custom | For the minute-hand svg of analog clock. |
rcs-analog-seconds-hand-custom | For the seconds-hand svg of analog clock. |
rcs-analog-time-picker-form-container-custom | For analog picker container for inputs and button. |
rcs-analog-time-input-field-parent-custom | For analog picker input fields container. |
rcs-analog-time-input-field-custom | For analog picker input field. |
rcs-analog-picker-input-custom | For the main analog picker input field. |
rcs-analog-am-pm-toggle-custom | For analog picker am-pm toggle. |
rcs-analog-time-picker-btn-custom | For analog picker confirm button. |
DigitalTime
):
CSS Classes (Default CSS classes for easy css customization.
ClassName | Description |
---|---|
rcs-digital-parent-custom | For main container. |
rcs-digital-picker-custom | For digital picker and display container. |
rcs-digital-picker-input-custom | For picker input fields. |
rcs-digital-time-picker-btn-custom | For picker confirm button. |
Support:
For support contact: adnanali17official@gmail.com, daniyal_09.2005@hotmail.com