Skip to content

MEddarhri/react-ios-time-picker

Repository files navigation

npm downloads

React ios time picker

React-ios-time-picker demo

A modern time picker for your next React app.

  • No moment.js needed
  • Zero dependencies and lightweight

install

npm install react-ios-time-picker

Usage

24 hours format

24 hours format

import React, { useState } from 'react';
import { TimePicker } from 'react-ios-time-picker';

export default const  MyApp = () => {
   const [value, setValue] = useState('10:00');

   const onChange = (timeValue) => {
      setValue(timeValue);
   }

   return (
      <div>
         <TimePicker onChange={onChange} value={value} />
      </div>
   );
}

12 hours format

12 hours format

import React, { useState } from 'react';
import { TimePicker } from 'react-ios-time-picker';

export default const  MyApp = () => {
   const [value, setValue] = useState('10:00 AM');

   const onChange = (timeValue) => {
      setValue(timeValue);
   }

   return (
      <div>
         <TimePicker onChange={onChange} value={value} use12Hours/>
      </div>
   );
}

API

Name Type Default Description
value String n/a Current value.
cellHeight Number 35 The height of the cell number.
placeHolder String "Selet_time" Time input's placeholder.
pickerDefaultValue String "00:00" The initial value that the picker begin with in the first time.
disabled Boolean false Whether picker is disabled.
isOpen Boolean false Whether the time picker should be opened.
required Boolean false Whether time input should be required.
cancelButtonText String "Cancel" Cancel button text content
saveButtonText String "Save" Save button text content
controllers Boolean true Whether the buttons should be displayed
seperator Boolean true whether show the colon seperator
id String n/a Input time picker id
name String n/a Input time picker name
use12Hours Boolean false 12 hours display mode
inputClassName String n/a Input time picker className
popupClassName String n/a time picker popup className
onChange (value) => alert ('New time is: ', value) n/a Called when select a different value
onSave (value) => alert ('Time saved is: ', value) n/a When the user clicks on save button
onClose () => alert('Clock closed') n/a When the user clicks on cancel button
onAmPmChange (value) => alert('Am/Pm changed : value') n/a called when select an am/pm value
onOpen () => alert('time picker opened') n/a called when time picker is opened

Contributions Welcome!

git clone https://github.com/MEddarhri/react-ios-time-picker
cd react-ios-time-picker

License

The MIT License.