Skip to content

Latest commit

 

History

History
468 lines (329 loc) · 9.98 KB

README_CN.md

File metadata and controls

468 lines (329 loc) · 9.98 KB
Raw

react-times

npm version Build Status Coverage Status js-standard-style react-times GitHub license

NPM

README：English Version

一个 React 时间选择器组件，使用 ES6 标准语法编写，没有 jQuery 依赖

戳 这里 查看新版中更改/新增的 props。

react-times

线上 demo

戳这里玩线上 demo

本地玩起来

$ git clone https://github.com/ecmadao/react-times.git

$ npm install

$ npm run storybook

安装说明

单独使用插件时所需的依赖：

No jQuery 😤😤😤

使用的时候，需要你的项目里已经安装了react和react-dom。如果没有的话：

$ npm install react react-dom --save-dev
# and
$ npm install react-times --save-dev

注意：因为组件使用了moment-timezone，所以你本地需要能够编辑 json 文件。webpack 2 以下的用户可以通过 json-loader 解决该问题。webpack >= 2 后自带 json 解析功能。

使用方式

目前组件总共有两种主题：Material 主题和经典主题

在使用组件的时候，记得要引入对应主题的 CSS 文件

// 基本使用方式
// 假设要在某个组件里使用该插件 (SomeComponent)
import React from 'react';
import TimePicker from 'react-times';

// 使用 Material 主题的话引入：
import 'react-times/css/material/default.css';
// 否则经典主题的话则引入：
import 'react-times/css/classic/default.css';

export default class SomeComponent extends React.Component {
  onTimeChange(options) {
    // do something
  }

  onFocusChange(focusStatue) {
    // do something
  }

  render() {
    <TimePicker
      onFocusChange={this.onFocusChange.bind(this)}
      onTimeChange={this.onTimeChange.bind(this)}
      // 确定主题，不填该 props 则默认为 material
      theme="material"
      // or
      // theme="classic"
    />
  }
}

关于配置的栗子：

render() {
  <TimePicker
      colorPalette="dark" // main color, default "light"
      focused={true} // whether to show timepicker modal after rendered. default false
      withoutIcon={true} // whether to has time icon on button, default false
      time="13:05" // initial time, default current time
      theme="material"
      // or
      // theme="classic"
      timeMode="12" // use 24 or 12 hours mode, default 24
  />
}

你可以戳 这里 查看更多栗子

秀一下

  • 24 小时制，亮色调的 Material 主题（默认）
<TimePicker />

24HoursMode

  • 12 小时制，亮色调的 Material 主题
<TimePicker timeMode="12"/>

12HoursMode

  • 24 小时制，暗色调的 Material 主题
<TimePicker colorPalette="dark"/>

DarkColor

  • 24 小时制，展示用户当前时区。（除此以外，可以通过 timezone props 来手动改变时区）
<TimePicker showTimezone={true}/>

showTimezone

  • 24 小时制，亮色调的经典主题
<TimePicker theme="classic"/>

24HoursMode-ClassicTheme

  • 24 小时制，暗色调的经典主题
<TimePicker colorPalette="dark" theme="classic"/>

24HoursMode-ClassicTheme-dark

APIs

Props

  • time

初始化时的时间，格式是 ${hour}:${minute}，不传则默认使用当前时间（通过moment()）

// PropTypes.string
time="11:11"
time="11:01"
time="1:01"
time="1:1"
  • timeFormat

自定义时间的格式

// PropTypes.string
// HH, MM 代表 24 小时制
// hh, mm 代表 12 小时制
timeFormat='HH:MM'
timeFormat='hh:mm'

// Warning:
// 如果设定 timeMode 为 12 小时制，且 timeFormat 中含有 hh 或者 mm；
// 或者设定 timeMode 为 24 小时制，且 timeFormat 中含有 HH 或者 MM，
// 则会在浏览器控制台中输出一条警告，且时间格式会被转换为 timeMode 所设定的格式

// 因此，如果想把 timeFormat 设定为 hh:mm 或者 h:m，则还需要把 timeMode 设置为 12
// (因为 timeMode 默认为 24)
  • timeFormatter

自定义时间的格式

// PropTypes.func
timeFormatter={({ hour, minute, meridiem }) => `${hour} - ${minute}`}

// 注:
// 当同时设定了 timeFormat 和 timeFormatter 时（都合法），会使用 timeFormatter
  • focused

初始化时时间选择器的 modal 是否打开，默认为false

// PropTypes.bool
focused={false}
focused={true}
  • withoutIcon

时间选择器的按钮上是否不需要 svg icon，默认为false

// PropTypes.bool
withoutIcon={true}
  • colorPalette

配色方案，默认为light

// PropTypes.string
colorPalette="dark"
colorPalette="light"
  • timeMode

12 或 24 小时制，默认为 24

// PropTypes.string or PropTypes.number
timeMode="24"
timeMode=24
timeMode="12"
timeMode=12
  • meridiem

上下午，在 12 小时制里为 "AM" 或 "PM"。默认为 AM

  • showTimezone

PropTypes.bool，代表是否展示用户的时区。默认为 false

  • timezone

PropTypes.string，可以通过该 props 改变用户所处的时区。默认为用户当前本地时区。

  • trigger

开启、关闭时间选择器 Modal 的触发器，是一个 React Component

<TimePicker
  focused={focused}
  trigger={(
    <div
      onClick={this.handleFocusedChange.bind(this)} >
      click to open modal
    </div>
  )}
/>
  • closeOnOutsideClick

点击 Modal 外部后是否关闭。默认为 true

<TimePicker
  closeOnOutsideClick={false}
/>
  • disabled

禁用组件。默认为 false

<TimePicker
  disabled={true}
/>
  • draggable

如果想禁用拖拽，则可以设置 draggable 为 false，那样的话用户只能通过点击来改变时间。默认为 true

<TimePicker
  draggable={true}
/>
  • language

语言。默认为英语

/*
 * support
 * en: english
 * zh-cn: 中文简体
 * zh-tw: 中文繁体
 * fr: Français
 * ja: 日本語
 */
<TimePicker
  language="zh-cn" // 中文简体
/>
  • phrases

React.object，用于自定义一些短语。可以在 language.js 查看所有的默认短语

<TimePicker
  phrases={{
    confirm: '确认更改？',
    cancel: '确认取消？',
    close: 'DONE',
    am: '上午',
    pm: '下午'
  }}
/>
  • minuteStep

React.number, 默认为 5。该属性代表当分针改变时的最小步长(minute)。可以设置为 1，2，3....

<TimePicker
  minuteStep={1}
/>
  • timeConfig

React.object, 用于配置 classic theme 时可选的时间范围以及步长

<TimePicker
  theme="classic"
  timeMode="12"
  timeConfig={{
    from: '08:00 PM',
    to: '08:00 AM',
    step: 1,
    unit: 'hour'
  }}
/>

<TimePickerWrapper
  theme="classic"
  timeMode="24"
  timeConfig={{
    from: 9,
    to: 19,
    step: 30,
    unit: 'minutes'
  }}
/>
  • limitDrag

React.bool, 默认为 false. 当设置为 true 时，将会限制用户的拖拽（从连续性的拖拽变为间断性拖拽，间隔由 minuteStep 确定）

<TimePicker
  limitDrag
/>

回调

  • onFocusChange

PropTypes.func

当组件focused属性改变，也就是选择器 modal 被打开或关闭时调用

  • onTimeChange

PropTypes.func

小时hour，分钟minute或者上下午meridiem被改变时的回调

onTimeChange(options) {
  const {
    hour,
    minute,
    meridiem
  } = options;
  // ...
}
  • onTimezoneChange

PropTypes.func

当时区改变时的回调

相关文章

Todos

  • 测试

    • TimePicker Component

    • PickerDragHandler Component

    • PickerPointGenerator Component

    • MaterialTheme Component

    • TwelveHoursTheme Component

    • PickerPoint Component

    • OutsideClickHandler Component

    • utils test

  • 配色

    • light
    • dark
    • colorful

  • 主题

    • Material Theme
    • Classical Theme

  • 小时制

    • 12h mode
    • 24h mode

  • 动画

致谢

感谢 Airbnb 的 react-dates 组件，没有它我也不会想着写一个小时选择组件

核心贡献者 🎉

版权

MIT License