react-time-picker-typescript
TypeScript icon, indicating that this package has built-in type declarations

1.2.3Ā ā€¢Ā PublicĀ ā€¢Ā Published

npm downloads

React ios time picker Typescript

React-ios-time-picker demo

This is a fork of react-ios-time-picker adding typescript support and fixing nextjs implementation!

A modern time picker for your next React app.

  • No moment.js needed
  • Zero dependencies and lightweight
  • Nextjs Friendly
  • Both esm and cjs support

install

npm install react-time-picker-typescript

Usage

24 hours format

24 hours format

import React, { useState } from 'react';
import { TimePicker } from "react-time-picker-typescript";
import "react-time-picker-typescript/dist/style.css";

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-time-picker-typescript";
import "react-time-picker-typescript/dist/style.css";

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

Stay in touch

License

The MIT License.

Package Sidebar

Install

npm i react-time-picker-typescript

Weekly Downloads

59

Version

1.2.3

License

MIT

Unpacked Size

258 kB

Total Files

25

Last publish

Collaborators

  • siamahnaf