{"id":14384786,"url":"https://github.com/ecmadao/react-times","last_synced_at":"2025-04-04T16:16:15.425Z","repository":{"id":45135307,"uuid":"67481060","full_name":"ecmadao/react-times","owner":"ecmadao","description":"A time picker react component, no jquery-rely","archived":false,"fork":false,"pushed_at":"2022-07-12T04:03:37.000Z","size":3333,"stargazers_count":207,"open_issues_count":22,"forks_count":67,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-14T09:19:37.289Z","etag":null,"topics":["react","react-component","react-times","time-picker"],"latest_commit_sha":null,"homepage":"https://ecmadao.github.io/react-times","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ecmadao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-06T06:45:10.000Z","updated_at":"2024-05-04T17:26:16.000Z","dependencies_parsed_at":"2022-08-26T08:23:07.712Z","dependency_job_id":null,"html_url":"https://github.com/ecmadao/react-times","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Freact-times","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Freact-times/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Freact-times/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmadao%2Freact-times/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecmadao","download_url":"https://codeload.github.com/ecmadao/react-times/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247208181,"owners_count":20901570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-component","react-times","time-picker"],"created_at":"2024-08-28T18:01:40.259Z","updated_at":"2025-04-04T16:16:15.408Z","avatar_url":"https://github.com/ecmadao.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![react-times](./doc/intro_src/react_times.png)\n\n[![npm version](https://badge.fury.io/js/react-times.svg)](https://badge.fury.io/js/react-times) [![Build Status](https://travis-ci.org/ecmadao/react-times.svg?branch=master)](https://travis-ci.org/ecmadao/react-times) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![react-times](http://img.shields.io/npm/dm/react-times.svg)](https://www.npmjs.com/package/react-times) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ecmadao/react-times/master/LICENSE)\n\n[![NPM](https://nodei.co/npm/react-times.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/react-times)\n\nREADME：[中文版](./doc/README_CN.md)\n\n\u003e A time picker react-component, no jquery-rely, writing in es6 standard style.\n\n**Check [here](./doc/CHANGELOG.md) to see changed props in new version.**\n\n![react-times](./doc/intro_src/react-times.gif)\n\n# Online demo\n\nCheck [here](https://ecmadao.github.io/react-times) to play online demo.\n\n# Play in local\n\n```bash\n$ git clone https://github.com/ecmadao/react-times.git\n\n$ npm install\n\n$ npm run storybook\n```\n\n# Install\n\ndependencies:\n\n- [`moment`](https://github.com/moment/moment/)\n- [`react`](https://github.com/facebook/react)\n- [`react-dom`](https://github.com/facebook/react)\n\n\u003e No jQuery rely 😤😤😤\n\nSo generally speaking, you should already have `react` \u0026 `react-dom` dependencies in your project. If not:\n\n```bash\n$ npm install react react-dom moment moment-timezone --save-dev\n# and\n$ npm install react-times --save-dev\n```\n\n# Config\n\nCause I'm using `moment-timezone`, you need to be able to parse json file.\n\nUse webpack (version \u003c 2) config as example:\n\n- [How should I use moment-timezone with webpack?](https://stackoverflow.com/questions/29548386/how-should-i-use-moment-timezone-with-webpack)\n\n```bash\n$ npm i json-loader --save\n```\n\n```javascript\n// webpack.config.js\n// ATTENTION:\n// webpack \u003e= v2.0.0 has native JSON support.\n// check here: https://github.com/webpack-contrib/json-loader/issues/65 for more information\n{\n  module: {\n    loaders: [\n        {include: /\\.json$/, loaders: [\"json-loader\"]}\n    ]\n  },\n  resolve: {\n    extensions: ['', '.json', '.jsx', '.js']\n  }\n}\n```\n\n# Usage\n\nThis component has two themes now: Material Theme by default, or Classic Theme.\n\n\u003e Always remember import css file when you use react-times\n\n```javascript\n// basic usage\n// in some react component\nimport React from 'react';\nimport TimePicker from 'react-times';\n\n// use material theme\nimport 'react-times/css/material/default.css';\n// or you can use classic theme\nimport 'react-times/css/classic/default.css';\n\nexport default class SomeComponent extends React.Component {\n  onTimeChange(options) {\n    // do something\n  }\n\n  onFocusChange(focusStatue) {\n    // do something\n  }\n\n  render() {\n    \u003cTimePicker\n      onFocusChange={this.onFocusChange.bind(this)}\n      onTimeChange={this.onTimeChange.bind(this)}\n    /\u003e\n  }\n}\n```\n\n\u003e See more examples here:\n\n```javascript\n// some config example\nrender() {\n  \u003cTimePicker\n    showTimezone // show the timezone, default false\n    focused // whether to show timepicker modal after rendered. default false\n    withoutIcon // whether to has time icon on button, default false\n    colorPalette=\"dark\" // main color, default \"light\"\n    time=\"13:05\" // initial time, default current time\n    theme=\"material\"\n    // or\n    // theme=\"classic\"\n    timeMode=\"12\" // use 24 or 12 hours mode, default 24\n    timezone=\"America/New_York\" // what timezone to use, detects the user's local timezone by default\n  /\u003e\n}\n```\n\n\u003e For more detail usage, you can visit [example](https://github.com/ecmadao/react-times/tree/master/examples) or see the source code.\n\n# Show time\n\n- 24 hours mode with Material Theme, light color by default\n\n```javascript\n\u003cTimePicker /\u003e\n```\n\n![24HoursMode](./doc/intro_src/24HoursMode.png)\n\n- 12 hours mode with Material Theme, light color by default\n\n```javascript\n\u003cTimePicker timeMode=\"12\"/\u003e\n```\n\n![12HoursMode](./doc/intro_src/12HoursMode.png)\n\n- 24 hours mode with Material Theme, dark color\n\n```javascript\n\u003cTimePicker colorPalette=\"dark\"/\u003e\n```\n\n![DarkColor](./doc/intro_src/DarkColor.png)\n\n- 24 hours mode, showing user current timezone. (Besides, your can use `timezone` props to custom timezone)\n\n```javascript\n\u003cTimePicker showTimezone={true}/\u003e\n```\n\n![showTimezone](./doc/intro_src/24HoursMode-showTimezone.png)\n\n- 24 hours mode with Classic Theme, light color by default\n\n```javascript\n\u003cTimePicker theme=\"classic\"/\u003e\n```\n\n![24HoursMode-ClassicTheme](./doc/intro_src/24HoursMode-ClassicTheme.png)\n\n- 24 hours mode with Classic Theme, dark color\n\n```javascript\n\u003cTimePicker colorPalette=\"dark\" theme=\"classic\"/\u003e\n```\n\n![24HoursMode-ClassicTheme-dark](./doc/intro_src/24HoursMode-ClassicTheme-dark.png)\n\n# APIs\n\n## Props\n\n- `time`\n\n\u003e Initial time, must be a string, with `${hour}:${minute}` format, default now (by using `moment()`):\n\n```javascript\n// PropTypes.string\ntime='11:11'\ntime='11:01'\ntime='1:01'\ntime='1:1'\n```\n\n- `timeFormat`\n\n\u003e To show the time using custom style\n\n```javascript\n// PropTypes.string\n// HH, MM means 24 hours mode\n// hh, mm means 12 hours mode\ntimeFormat='HH:MM'\ntimeFormat='hh:mm'\ntimeFormat='H:M'\ntimeFormat='h:m'\n\n// Warning:\n// If you are using 12 hours mode but with hh or mm format,\n// or using 24 hours mode with HH or MM format,\n// you will receive a warning on console, and force to use the timeMode props\n\n// So, if you wanna use hh:mm or h:m, you need to set timeMode props to 12\n// (cause timeMode default is 24)\n```\n\n- `timeFormatter`\n\n\u003e To show the time using custom style\n\n```javascript\n// PropTypes.func\ntimeFormatter={({ hour, minute, meridiem }) =\u003e `${hour} - ${minute}`}\n\n// Note:\n// If you both set timeFormat and timeFormatter props (and they all validate), component will use timeFormatter function\n```\n\n- `focused`\n\n\u003e Whether the timepicker pannel is focused or not when it did mount. Default `false`\n\n```javascript\n// PropTypes.bool\nfocused={false}\nfocused={true}\n```\n\n- `withoutIcon`\n\n\u003e Whether the timepicker has a svg icon. Default `false`.\n\n```javascript\n// PropTypes.bool\nwithoutIcon={true}\n```\n\n- `colorPalette`\n\n\u003e The main color palette of picker pannel. Default `light`.\n\n```javascript\n// PropTypes.string\ncolorPalette=\"dark\"\ncolorPalette=\"light\"\n```\n\n- `timeMode`\n\n\u003e Support \"12\" or \"24\" hours mode.\n\n```javascript\n// PropTypes.string or PropTypes.number\ntimeMode=\"24\"\ntimeMode=24\ntimeMode=\"12\"\ntimeMode=12\n```\n\n- `meridiem`\n\n\u003e `PropTypes.string`, support \"PM\" or \"AM\" for 12 hours mode, default `AM`\n\n- `showTimezone`\n\n\u003e `PropTypes.bool`, whether show user timezone or not, default `false`\n\n- `timezone`\n\n\u003e `PropTypes.string`, change user timezone, default user current local timezone.\n\n- `trigger`\n\n\u003e `React.component`, means a DOM which can control TimePicker Modal \"open\" or \"close\" status.\n\n```javascript\n\u003cTimePicker\n  focused={focused}\n  trigger={(\n    \u003cdiv\n      onClick={this.handleFocusedChange.bind(this)} \u003e\n      click to open modal\n    \u003c/div\u003e\n  )}\n/\u003e\n```\n\n- `closeOnOutsideClick`\n\n\u003e If you don't wanna close panel when outside click, you can use closeOnOutsideClick={false}. Default true\n\n```\n\u003cTimePicker\n  closeOnOutsideClick={false}\n/\u003e\n```\n\n- `disabled`\n\n\u003e Disable component. Default false\n\n```\n\u003cTimePicker\n  disabled={true}\n/\u003e\n```\n\n- `draggable`\n\nIf you don't want to drag the pointer, then you can set `draggable` props to `false`, then users can only use click to change time. Default `true`\n\n```\n\u003cTimePicker\n  draggable={false}\n/\u003e\n```\n\n- `language`\n\n\u003e `React.string`, use different language. Default english.\n\n```javascript\n/*\n * support\n * en: english\n * zh-cn: 中文简体\n * zh-tw: 中文繁体\n * fr: Français\n * ja: 日本語\n */\n\u003cTimePicker\n  language=\"zh-cn\" // 中文简体\n/\u003e\n```\n\n- `phrases`\n\n\u003e `React.object`, specify text values to use for specific messages.  By default, phrases will be set from defaults based on language.\n\u003e Specify any of the available phrases you wish to override or all of them if your desired language is not yet supported.\n\u003e See [language.js](./src/utils/language.js) for default phrases.\n\n```javascript\n\u003cTimePicker\n  phrases={{\n    confirm: 'Are you sure?',\n    cancel: 'Do you want to cancel?',\n    close: 'DONE',\n    am: 'Ante Meridiem',\n    pm: 'Post Meridiem'\n  }}\n/\u003e\n```\n\n- `minuteStep`\n\n\u003e `React.number`, default `5`. It means the minium minute can change. You can set it to 1, 2, 3...\n\n```javascript\n\u003cTimePicker\n  minuteStep={1}\n/\u003e\n```\n\n- `timeConfig`\n\n\u003e `React.object`, to config from, to, step limit for classic theme panel.\n\n```javascript\n\u003cTimePicker\n  theme=\"classic\"\n  timeMode=\"12\"\n  timeConfig={{\n    from: '08:00 PM',\n    to: '08:00 AM',\n    step: 1,\n    unit: 'hour'\n  }}\n/\u003e\n\n\u003cTimePickerWrapper\n  theme=\"classic\"\n  timeMode=\"24\"\n  timeConfig={{\n    from: 9,\n    to: 19,\n    step: 30,\n    unit: 'minutes'\n  }}\n/\u003e\n```\n\n- `limitDrag`\n\n\u003e `React.bool`, default `false`. If `true`, it will limite the drag rotation by `minuteStep`\n\n```javascript\n\u003cTimePicker\n  limitDrag\n/\u003e\n```\n\n## Callback\n\n- `onFocusChange`\n\n`PropTypes.func`\n\n\u003e The callback func when component `focused` state is changed.\n\n- `onTimeChange`\n\n`PropTypes.func`\n\n\u003e The callback func when component `hour` or `minute` or `AM/PM` state is changed.\n\n```javascript\nonTimeChange(options) {\n  // you can get hour, minute and meridiem here\n  const {\n    hour,\n    minute,\n    meridiem\n  } = options;\n}\n```\n\n- `onTimezoneChange`\n\n`PropTypes.func`\n\n\u003e The callback func when timezone changed.  Receives timezone object as argument with the following properties:\n* city\n* zoneAbbr\n* zoneName\n\n# Article\n\n- [一言不合造轮子--撸一个ReactTimePicker](https://github.com/ecmadao/Coding-Guide/blob/master/Notes/React/ReactJS/Write%20a%20React%20Timepicker%20Component%20hand%20by%20hand.md)\n\n# Todos\n\n- Test\n\n  - [x] TimePicker Component\n  - [x] PickerDragHandler Component\n  - [x] PickerPointGenerator Component\n  - [x] MaterialTheme Component\n  - [x] TwelveHoursTheme Component\n  - [x] PickerPoint Component\n  - [x] OutsideClickHandler Component\n\n  - [x] utils test\n\n- Color Palette (Now It has light and dark color)\n\n  - [x] light\n  - [x] dark\n  - [ ] colorful\n\n- Themes\n\n  - [x] Material Theme\n  - [x] Classical Theme\n\n- Mode\n\n  - [x] 12h mode\n  - [x] 24h mode\n\n- Animations\n\n# Thx\n\nThanks to the Airbnb's open source project: [react-dates](https://github.com/airbnb/react-dates), I have learn a lot from that. Thanks.\n\n# Core Contributors 🎉\n\n- **[carlodicelico](https://github.com/carlodicelico)**\n- **[erin-doyle](https://github.com/erin-doyle)**\n- **[MatthieuLemoine](https://github.com/MatthieuLemoine)**\n- **[naseeihity](https://github.com/naseeihity)**\n- **[shianqi](https://github.com/shianqi)**\n- **[thg303](https://github.com/thg303)**\n\n# License\n\n[MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmadao%2Freact-times","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecmadao%2Freact-times","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmadao%2Freact-times/lists"}