meddarhri / react-ios-time-picker Goto Github PK

View Code? Open in Web Editor NEW

55.0 3.0 24.0 2.18 MB

A modern time picker for your next react app ⌚️

License: MIT License

JavaScript 85.41% CSS 13.98% HTML 0.60%

modern-ui react-time-picker time-picker wheel-timer ios-time-picker

react-ios-time-picker's Introduction

React ios time picker

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

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

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.

react-ios-time-picker's People

Contributors

Stargazers

Watchers

react-ios-time-picker's Issues

An option for min and max time value.

Request Option for custom increment i.e. 15min options

Hi there,

It would be great to have an option to set the increments.
Say I only want to show options for every 15 mins or even every 2 hrs

Keyboard Events

Hello, are there plans to add arrow Up and arrow Down keys in the future?

Getting error while trying to click and open a field which has null value

Example :

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

export default const MyApp = () => {
const [value, setValue] = useState(null);

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

return (

);
}

Error:

TimePicker.js:1233 Uncaught TypeError: Cannot read properties of null (reading 'slice')
at H (TimePicker.js:1233:1)

pickerDefaultValue

I am trying to set pickerDefaultValue from string state but not working.

const [time, setTime] = useState(${moment(new Date()).format('LT')})

Getting ReferenceError: document is not defined while using in Next.js

Hi,

I'm using this package in Next.js but I'm getting an error that says:

ReferenceError: document is not defined

I've tried loading it with next/dynamic but getting the same issue.

[Typescript] Suporte

You are not supporting typescript. You must do so or not show in your file that you do so.

Doesn't work in NextJS 14. No response when Picker is clicked.

Doesn't work, the portal doesn't respond to state.

"next": "14.1.3",
Thank you for the package but the popup doesn't work.
If I replace the portal with a simple h1 the toggle works, with the portal no reaction, I had to take the modal from ionic.

Style Issue

Hi,

when i set popupClassName="test"
the className is assigned to overlay and not to popup

Hours, Minutes and Seconds Picker

Hello, do yo also have plans to include support for selecting hours, mins and secs.

Cheers