smd-timepicker

 React time picker with custom configurations.
Provides all the necessary stylling and user friendly interaction,
Can able to modify the existing styling as well as can able to add custome css also.
24 hours format as well as 12 hours format and easy to understand.

Install

npm install smd-timepicker

Usage

import React, { Component } from 'react'

import SMDTimePicker  from 'smd-timepicker'

class Example extends Component {
  render() {
    return <SMDTimePicker value='10:25 am' onChange={onSelectingTime}/>
  }
}

props

| Prop | Default Value & Type | Description | | :------------: |:---------------:| :---------------:| | onChange | onChange: (time: string) => void (function)| Captures the output in the format of user provided prop format or default format (hh:mm a)| | | | | | format | hh:mm a (string) | Can able to pass the format like hh:mm a or HH:mm | | | | | | value | '' (string) | If want pass default value as hh:mm a format or HH:mm format | | | | | | is24Hours | false (Boolean) | If we want 24 hours format then set this to true| | | | | | isRemoveInputSelector | false (Boolean) | If you don't want Time select options provide this as true | | | | | | hoursPlaceholder | HH {string) | For hours input placeholder | | | | | |minutesPlaceholder| MM {string) | For minutes input placeholder | | | | | | isIncludesSeconds | false {Boolean) | If you want seconds also to be included pass this prop as true value | | | | | |secondsPlaceholder| SS {string) | For seconds input placeholder | | | | | | inputStyles | {} (css styles object)| Set inline styles for input | | | | | | inputClass | '' (className) (css className string) | Can able to provide our app CSS classes to the inputs | | | | | | selectAMPMStyles | {} (css styles object)| Set inline styles for select AM or PM| | | | | | selectAMPMClass | '' (className) | Can able to provide our app CSS classes to the select AM or PM| | | | | | selectOptions|[{name:'AM',value:'am'},..]| If you want to change the name of select AM or PM as lowercase values or uppercase values or titlesase values, You can obtain those with css styles also | | | | | | timeSelectConfig | {timeOuterContainer: {}, timeInsideContainer: {}, selectSpecificData: { isSelectedBGcolor: 'lightgreen',isSelectedFontColor:'black',isHoveredBGcolor:'lightblue', isHoveredFontColor: 'black' } } | timeOuterContainer is to change the custom styles for the select input container, timeInsideContainer is to time data value inside container , selectSpecificData this object is to activated element styles |

Example 1

import React, { useState } from 'react'

import SMDTimePicker from 'smd-timepicker'

const App = () => {
  const [timeV, setTime] = useState('')

  const onSelectingTime = (time: string) => {
    console.log('app time is -- ', time)
    setTime(time)
  }

  return (
    <div>
      <h1>Selected time is -- {timeV}</h1>
      <div style={{ marginLeft: '100px' }}>
        <SMDTimePicker
          onChange={onSelectingTime}
          is24Hours={false}
		  value={timeV}
          isIncludesSeconds={false}
          inputClass=''
          inputStyles={{ width:'30px', height:'30px', color: 'blue', fontWeight:'bold' }}
          selectAMPMClass=''
          selectAMPMStyles={{ width:'60px', height:'30px'  }}
          timeSelectConfig={{
            selectSpecificData: { isSelectedBGcolor: 'orange', isHoveredBGcolor:"gray" },
            timeInsideContainer: {backgroundColor: "lightcyan"}
          }}
        />
      </div>
    </div>
  )
}

export default App

Example 2

import React, { useState } from 'react'

import SMDTimePicker from 'smd-timepicker'

const App = () => {
  const [timeV, setTime] = useState('')

  const onSelectingTime = (time: string) => {
    console.log('app time is -- ', time)
    setTime(time)
  }

  return (
    <div>
      <h1>Selected time is -- {timeV}</h1>
      <div style={{ marginLeft: '100px' }}>
        <SMDTimePicker
          onChange={onSelectingTime}
          is24Hours={true}
          value={timeV}
          isIncludesSeconds={true}
        />
      </div>
    </div>
  )
}

export default App

License

© sivasankula19