DateTimePicker 日期、时间选择 3.0.0

可提供一些日期或者时间序列供用户选择,并返回用户选择的结果。

使用说明

引用方式

import { DateTimePicker } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件,可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import DateTimePicker from 'yo3/component/datetimepicker';

基本用法:日期选择器

Picker 一样,DateTimePicker 需要同时配置 valueonChange 才能正常工作。 在滑动 DateTimePicker 时会触发 onChange 回调,在参数中能够获取到当前选中的日期值(格式为 yyyy-mm-dd 或者 hh-mm), 你应该将 value 属性和父级组件的 state 关联起来,并在 onChange 函数中进行 setState 操作。

使用 range 属性可以指定 DateTimePicker 的可选择范围。

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '2016-11-02'
    };
  }

  render() {
    return (
      <DateTimePicker
        value={this.state.value}
        unitsInline={['年', '月', '日']}
        range={['2016-01-01','2016-12-31']}
        dateOrTime="date"
        onChange={value => this.setState({ value })}
      />
    )
  }
}

基本用法:只选择年份和月份

DateTimePicker 支持只选择年和月。这时候 value 属性的值需要省略掉第三部分:

<DateTimePicker
  value={entrytime /* 日期格式为xxxx-xx */}
  range={['1980-01','2017-12']}
  unitsInline={['年', '月']}
  dateOrTime="date"
  onChange={value => {
    // onchange
  }}
/>

基本用法:时间选择器

// this.state = { value: '12: 00' };

<DateTimePicker
  value={this.state.value}
  unitsInline={['时', '分']}
  dateOrTime="time"
  onChange={value => this.setState({ value })}
/>

扩展用法:自定义选项

你可以通过 format 属性来自定义 option 的文本,它能够接收两个参数,value 对应 option 的值,level对应所在列的 index

format(value, level) {
  return String(value).length < 2 ? `0${value}` : value;
}

<DateTimePicker
  format={this.format}
  // ...
/>

扩展用法:循环模式

开启循环模式后(设置 loop 属性为 true,默认为 true),DateTimePicker 的 option 将会变成一个首尾相接的循环列表(参考 iOS 系统的闹钟设置):可以分别设置各个 Picker 子组件是否开启循环模式。

<DateTimePicker
  loop={[false, false, true]}
  // ...
/>

扩展用法:简便添加单位

可以设置 unitsInline 属性来设置内联单位(单位会存在于每一个选项中),也可设置 unitsAside 在每列右侧添加一个单位栏。

<DateTimePicker
  unitsInline={['年', '月', '日']}
  // ...
/>
<DateTimePicker
  unitsAside={['年', '月', '日']}
  // ...
/>
属性

height { Number } #

受控属性:决定容器展示的高度

默认值: 150

range { Array } #

受控属性:区间范围开始于, 结束于;可以用非数字符号做为分隔符;

默认值: ['1900-01-01', format(new Date(), 'xxxx-xx-xx')]

value { String } #

受控属性:区间范围内当前默认值,可以用非数字符号做为分隔符;

默认值: '2016-8-28'

loop { Array } #

受控属性:设置为true,为无限循环滚动模式,反之为有限模式;默认为true

默认值: [true, true, true]

unitsInline { Array } #

受控属性:在对应栏里的每个选项里添加对应的单位;

默认值: []

unitsAside { Array } #

受控属性:在对应栏里的垂直居中,水平偏右位置,显示当前栏目对应的单位;

默认值: []

dateOrTime { Enum {'date', 'time'}, } #

受控属性:'date'代表日期模式,即年月日模式,'time'代表时间模式,即时分模式

默认值: 'date'

format { Function } #

受控属性:默认显示的date或者time是数字,传入该函数,会将数字作为参数,经该函数处理后,返回一个经过包装的字符串,这时将会以字符串作为默认的显示选项;该函数有两个参数(value, level)。

默认值: (value, level) => value

方法参数:

参数名 类型 描述 支持版本
value Number 对应栏目的序列中的单个值
level Number 指代对应的栏目,从左往右递增,从0开始

onChange { Function } #

onChange回调函数,用以将当前选择的项目传递给上层,来触发更新。回传的参数有两个(value, item)。

默认值: (value, item) => {}

方法参数:

参数名 类型 描述 支持版本
value Object 为当前组件应更新到的状态
item Object 为当前滑到最中间位置的,选中的数据,包含了一些可能有用的较为详细的信息

extraClass { String } #

受控属性:本组件额外的css类

默认值: []