A simple react component to select or display time in 12 hour or 24 hours format.
npm install react-clock-select
|
|
|
|
bash
npm install react-clock-select
`
$3
- 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.
$3
`js
import React from 'react';
import { AnalogTime } from "react-clock-select";
function TimePicker(props){
return(
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",
// }
}}
/>
)
}
`
$3
`js
import React from 'react';
import { DigitalTime } from "react-clock-select";
function TimePicker(props){
return(
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",
// }
}}
/>
)
}
``
{
time_string: "12:00:00 AM",
hours: "12",
minutes: "00",
seconds: "00",
am_pm: "AM"
} |
{
time_string: "12:00:00 AM",
hours: "12",
minutes: "00",
seconds: "00",
am_pm: "AM"
} |