react-clock-select v1.1.0

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.

Example (AnalogTime):

    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",
           // }    
           }}
        />
      )
  }

Example (DigitalTime):

    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",
            // }  
           }}
        />
      )
  }

Props (AnalogTime):

Props (DigitalTime):

CSS Classes (AnalogTime):

Default CSS classes for easy css customization.

CSS Classes (DigitalTime):

Default CSS classes for easy css customization.

Support:

For support contact: adnanali17official@gmail.com, daniyal_09.2005@hotmail.com