catc / React Timekeeper
Licence: mit
Google Keep app inspired time picker for react 🕓
Stars: ✭ 651
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Timekeeper
Brpickerview
BRPickerView 封装的是iOS中常用的选择器组件,主要包括:日期选择器(支持年月日、年月等15种日期样式选择,支持设置星期、至今等)、地址选择器(支持省市区、省市、省三种地区选择)、自定义字符串选择器(支持单列、多列、二级联动、三级联动选择)。支持自定义主题样式,适配深色模式,支持将选择器组件添加到指定容器视图。
Stars: ✭ 2,149 (+230.11%)
Mutual labels: time, picker
popoPicker
popoPicker是一个移动端3D滚轮日期时间和单项的选择器,支持无限循环滚动,不依赖第三方库
Stars: ✭ 26 (-96.01%)
Mutual labels: time, picker
React Native Modal Datetime Picker
A React-Native datetime-picker for Android and iOS
Stars: ✭ 2,412 (+270.51%)
Mutual labels: time, picker
React Picky Date Time
A react component for date time picker. Online demo examples
Stars: ✭ 31 (-95.24%)
Mutual labels: time, picker
vue-timeselector
🕒 Simply customizable powerful time picker for Vue.js
Stars: ✭ 41 (-93.7%)
Mutual labels: time, picker
Pickadate.js
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
Stars: ✭ 7,753 (+1090.94%)
Mutual labels: time, picker
clocklet
An opinionated clock-style vanilla-js timepicker.
Stars: ✭ 31 (-95.24%)
Mutual labels: time, picker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (-17.67%)
Mutual labels: time, picker
react-picky-date-time
A react component for date time picker. Online demo examples
Stars: ✭ 41 (-93.7%)
Mutual labels: time, picker
Singledateandtimepicker
You can now select a date and a time with only one widget !
Stars: ✭ 921 (+41.47%)
Mutual labels: time, picker
Md Date Time Picker
An implementation of Material Design Picker components in vanilla CSS, JS, and HTML
Stars: ✭ 272 (-58.22%)
Mutual labels: time, picker
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+8.6%)
Mutual labels: time, picker
Date Picker
📅 Custom responsive date picker widget for Android, written in Kotlin.
Stars: ✭ 146 (-77.57%)
Mutual labels: time, picker
HijriDatePicker
Material (Gregorian - Hijri) Date & Time Picker
Stars: ✭ 128 (-80.34%)
Mutual labels: time, picker
WatchKitTimePicker
⏱ A Time Picker data source for WatchKit that mirrors the behavior of UIDatePicker.
Stars: ✭ 37 (-94.32%)
Mutual labels: time, picker
Linear Time Picker
Gorgeous Android Time and Date picker library inspired by the Timely app
Stars: ✭ 613 (-5.84%)
Mutual labels: time, picker
Androidpicker
安卓选择器类库,包括日期及时间选择器(可用于出生日期、营业时间等)、单项选择器(可用于性别、民族、职业、学历、星座等)、二三级联动选择器(可用于车牌号、基金定投日期等)、城市地址选择器(分省级、地市级及区县级)、数字选择器(可用于年龄、身高、体重、温度等)、日历选日期择器(可用于酒店及机票预定日期)、颜色选择器、文件及目录选择器、图片选择器等……WheelPicker/DatePicker/TimePicker/OptionPicker/NumberPicker/LinkagePicker/AddressPicker/CarPlatePicker/CalendarPicker/ColorPicker/FilePicker/ImagePicker etc.
Stars: ✭ 5,320 (+717.2%)
Mutual labels: picker
React Timekeeper
Time picker based on the style of the Android Google Keep app.
Features
- supports both 12 hour and 24 hour mode, and flexible time formats
- simple to use with many customizable options
- smooth, beautiful animations with react spring
- typescript support
- css variable support for custom styles
Installation
$ npm install --save react-timekeeper
Version 2+ of timekeeper requires react hooks (v16.8). If you're using an older version of react, install timekeeper v1 via
$ npm install --save [email protected]^1.0.0
Usage
import React, {useState} from 'react';
import TimeKeeper from 'react-timekeeper';
function YourComponent(){
const [time, setTime] = useState('12:34pm')
return (
<div>
<TimeKeeper
time={time}
onChange={(data) => setTime(data.formatted12)}
/>
<span>Time is {time}</span>
</div>
)
}
All styles are inlined via emotion so no css imports are required.
API
For full api and examples, see API docs and examples
Development
- Clone the repo
-
nvm use v10.16.0
(or anything >10) npm install
npm run docs:dev
- Navigate to
localhost:3002
Contributing
Before submitting a PR, ensure that:
- you follow all eslint rules (should be automatic)
- all tests pass via
npm run tests
- everything builds
- docs -
npm run docs:build
- lib -
npm run lib
- docs -
- provide detailed info on what bug you're fixing or feature you're adding - if possible include a screenshot/gif
Other useful commands:
- build docs:
npm run docs:build
- run all tests:
npm run tests
- watch tests:
npm run tests:watch
- create lib to publish npm:
npm run lib
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].