@80pct/react-time-picker 中文文档教程

Question

react-time-picker

为 React 精心设计的时间选择器。

Install

$ npm install @80pct/react-time-picker

Usage

var TimePicker = require('./src')

var VALUE = '14:00:01'

var onChange = function(value){
    picker.setProps({value: value})
}

var picker = React.render(
    <TimePicker
        value={VALUE}
        onChange={onChange}
    />,
    document.getElementById('content')
)

对于不受控制的行为，使用 defaultValue 而不是 value

时间选择器也可以用于触摸设备。

Properties

• value: String - a time value - for controlled behavior
• defaultValue: String - a time value - for uncontrolled behavior
• onChange: Function(string, moment) - function to be called on change

Formatting

时间选择器可以多种格式显示时间。 例如，您可以显示小时、小时和时间。 分、时& 分钟& 其次，所有这些都有或没有 AM/PM。

您可以指定一种格式来决定时间选择器的哪些部分显示

• 格式：字符串 - 请参阅 http://momentjs.com/docs/#/parsing/string-format/。 一种格式，指示显示时间选择器的哪些部分。

  有效的格式标记是：

  • H or HH - 0..23 - 24 hour time (hour and double digit hour)
  • h or hh - 1..12 - 12 hour time used with a A
  • m or mm - 0..59 for minute and double digit minute
  • s or ss - 0..59 for second and double digit second
  • a or A - for meridiem display

因此您可以通过指定 format 或仅对您提供的 value 使用适当的格式来决定显示什么。

Examples

• If you want to display only hour & minute, specify a value string with hour and minute (eg: 16:03)
• If you want to display hour, minute & second, specify eg 16:45:21
• If you want to display AM/PM, specify an hour format that contains AM/PM eg 10:45 PM

Overflowing

默认情况下，当分钟/秒递增并且它们溢出 59 时，下一个量将增加。 您还可以使用 overflowHourToMeridian 溢出小时来触发子午线更改。

Increment steps

当时间箭头被触发时，值会增加一定数量 - 称为步长。 默认 step 值为 1

• step: Number
• hourStep: Number - A step for incrementing hours (defaults to null). If not provided, step will be used when incrementing the hour
• minuteStep: Number - A step for incrementing minutes (defaults to null). If not provided, step will be used when incrementing the minute
• secondStep: Number - A step for incrementing seconds (defaults to null). If not provided, step will be used when incrementing the second

Styling props

时间选择器带有内置样式，不依赖于外部 css 文件。

• style

默认情况下，时间选择器的宽度为 200 像素，内边距为 10 像素。 您可以轻松更改：

<TimePicker style={{width: '100%', padding: 5}} />

时间框的样式（包含输入和箭头的 div）

• boxStyle - style to be applied to all boxes (hour, minute, second, meridian)
• hourStyle
• minuteStyle
• secondStyle
• meridianStyle

时间输入字段的样式

• hourInputStyle
• minuteInputStyle
• secondInputStyle
• meridianInputStyle

Other props

• useArrowKeys: Boolean - 默认为 true。 当此属性为 true 时，您可以在字段获得焦点时使用向上/向下箭头键更新时间值。 如果您不想要此行为，请设置为 false

• inputFactory: Function(props) - 您可以使用此函数控制如何呈现时间输入。 它将使用一些输入道具调用：

  • props.style - 输入的样式

  • props.value

  • props.onChange

  • props.onFocus

  • props.onBlur

    改变 onChange, onFocus 或 onBlur 传递给 inputFactory 的道具是不推荐的。 如果您选择更改这些，请确保您知道自己在做什么，或者您调用初始函数以及您自己的逻辑

• showArrows: Boolean - 决定是否显示箭头。 默认为 true

• arrowStyle - 要应用于所有箭头

• 的样式

• arrowUpStyle arrowDownStyle

• arrowOverStyle

• arrowUpOverStyle

• arrowDownOverStyle

• arrowFactory

• stepDelay：Number - 默认为 60。当鼠标在箭头上按下时，数量增量之间的毫秒数

• stopChangePropagation：Boolean - 默认为 true。 停止在时间选择器中包含的输入上传播 change 事件。 需要这样您的 onChange 函数将不会被多次调用，并且不会使用不同的参数。 仅当您知道自己在做什么时才修改它

• normalizeStyle: Boolean - 默认为 true。 在需要时使用 react-style-normalizer 作为样式名称的前缀。 在这种情况下，所有样式道具都带有前缀（style、inputStyle、hourStyle 等...）

Contributing

检查项目，cd 进入它并执行

$ npm install
$ npm run dev

导航到 localhost:8080。

更改 src 目录中的源代码。 当检测到更改时，浏览器会自动刷新。

要进行新构建，请执行 npm run build，这会从 src 中找到的源刷新 lib 文件夹（用于 npm）。

Changelog

查看 更新日志

License

MIT