PopupDateTimePicker 3.0.5

PopupDateTimePicker组件结合的组件,能够方便的创建一个可弹出的 DateTimePicker。

使用说明

引用方式

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

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

基本用法

PopupDateTimePicker组件实际上由两部分组成,一部分是触发弹层打开的区域,另一部分是弹出的带“确定”和“取消”按钮的弹出式选择器。

该组件是一个严格受控的组件,你需要同时定义 onChangevalue 属性才能让它正常工作。

你应该给 PopupDateTimePicker 传入一个唯一子元素,这个子元素将会作为触发区域的内容,同时你还需要通过 touchClass 指定它的触摸反馈效果。

class Demo extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      value: null
    };
  }

  handleChange(value) {
    this.setState({ value });
  }

  render() {
    return (
      <div className="popupdatetimepicker-demo">
        <PopupDateTimePicker
          value={this.state.value}
          onChange={this.handleChange.bind(this)}
          touchClass="item-touch"
          range={['2015-01-15', '2015-05-20']}
        >
          <div className="demo-item">
            <span className="title">选择日期</span>
            <span className="value">{this.state.value === null ? '请选择日期' : this.state.value}</span>
          </div>
        </PopupDateTimePicker>
      </div>
    );
  }
}

定制 popup 区域的 Header

PopupPicker 组件一样,PopupDateTimePicker 组件的弹出式选择器同样由确认、取消按钮和标题组成,这些按钮的显示值和可选的标题文本可以通过 popupHeader 定制。其定制方式与 PopupPicker 组件完全一致。

beforePopupShow 属性

该属性传递的回调函数在点击触发区域后,Popup 弹层弹出前执行。当其返回值为 false 时,Popup 弹出层将不会弹出。

在业务中,PopupPickerPopupDateTimePicker 选择器的值可能跟其他项有关联。例如,当前选择器只能在上一个选择器有了选择值之后才能进行选择。若上一个选择器还没有选择值时,该选择器在点击时不能触发弹出层,同时还应该向用户展示一个提示。这个时候可以通过 beforePopupShow 属性传递一个函数调用 Toast.show 显示一条通知,并将其返回值设为 false 表示不触发弹出层。

render() {
  return (
    <div className="popupdatetimepicker-demo">
      <PopupDateTimePicker
        value={this.state.value}
        onChange={this.handleChange.bind(this)}
        beforePopupShow={() => {
          Toast.show('before popup show');
          return false;
        }}
        touchClass="item-touch"
        range={['2015-01-15', '2015-05-20']}
      >
        <div className="demo-item">
          <span className="title">选择日期</span>
          <span className="value">{this.state.value === null ? '请选择日期' : this.state.value}</span>
        </div>
      </PopupDateTimePicker>
    </div>
  );
}

手动控制弹出式选择器的显示和隐藏

通过 React 的 ref 属性来获取 PopupDateTimePicker 组件的引用,然后调用该引用的 showhide 方法即可控制弹出式选择器的显示和隐藏。

render() {
  return (
    <div className="popupdatetimepicker-demo">
      <PopupDateTimePicker
        ref={component => {
            this.popupDateTimePickerCom = component;
        }}
        // ...
      >
        {/* ... */}
      </PopupDateTimePicker>
    </div>
  );
}

this.popupDateTimePickerCom.show(); // 显示弹出式选择器
this.popupDateTimePickerCom.hide(); // 隐藏弹出式选择器
属性

touchClass { String } #

定制触发区域和弹出式选择器触摸时附加的 className,必须。

默认值: null

value { Number/String } #

组件的 value,参考网页select标签的 value 属性。

value是一个严格受控属性,只能通过的父组件改变,你需要设置 onChange 属性来控制 value 属性的变化。

默认值: null

range { array } #

可选日期/时间的范围。格式为['YYYY-MM-DD','YYYY-MM-DD']或者['HH-MM','HH-MM']。

默认值: null

onChange { Function } #

弹出式选择器 Ok 按钮点击后的回调,必须。

默认值: () => {}

方法参数:

参数名 类型 描述 支持版本
value 当前 datetimepicker 的 value

onSelect { Function } 3.0.16 #

当选择器选择值发生改变时的回调。

方法参数:

参数名 类型 描述 支持版本
value 当前的 option 的 value,如果开启了多列模式,那么返回值将是一个包含了每一列value的数组。

popupHeader { Object } #

popup 区域头部的标题和按钮定制,分别为 title、okBtn 和 cancelBtn,

通过 title 键值定制 Popup 组件头部的标题文本。

通过 text 和 touchClass 键值定制按钮显示的文本和触摸按钮时附加的 className

默认值: { title: '', okBtn: { text: '确定', touchClass: 'action-touch' }, cancelBtn: { text: '取消', touchClass: 'action-touch' } }

duration { Number } #

Popup组件的 duration 属性。组件内容显隐时,动画执行时间,单位:ms

默认值: 200ms

pickerHeight { Number } #

DateTimePicker组件的 height 属性。控制Picker组件显示的内容高度

默认值: 150

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

DateTimePicker组件的 dateOrTime 属性。受控属性:'date'代表日期模式,即年月日模式,'time'代表时间模式,即时分模式

默认值: 'date'

loop { Array } #

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

默认值: [true, true, true]

unitsInline { Array } #

DateTimePicker组件的 unitsInline 属性。受控属性:在对应栏里的每个选项里添加对应的单位

默认值: []

popupExtraClass { String } #

附加popup区域根节点的额外 class

默认值: null

beforePopupShow { Function } 3.0.8 #

该函数在点击触发区域后,Popup 弹层弹出前执行。当其返回值为 false 时,Popup 弹层将不会弹出。

该属性可以用于 value 值的校验,当 value 值不合法时通过函数控制展示相应的提示。

默认值: null