PixUI 中实现时间选择器

1. 介绍

Press Pix 中已沉淀 DateTimePicker 这一组件，API 对齐 Press UI。

时间选择器是一个基础组件，除 PUBGM 需求外，还会用在和平赛场横版改造、其他业务中，现在提前做好，为后面打下基础。

2. 使用方式

引入组件，并参考如下方式使用。

tsx

import { DateTimePicker } from 'press-pix';

const OneComponent = () => {
  const [dateTimePicker, setDateTimePicker] = useState<{
    show: boolean;
    curValue: number;

    startTime: number;
    endTime: number;

    isEnd: boolean;
  }>({
    show: false,
    curValue: Date.now(),

    startTime: Date.now() - 1 * 365 * 24 * 60 * 60 * 1000,
    endTime: Date.now(),

    isEnd: boolean;
  });

  const onConfirmDateTimePicker = (v) => {
    const newDateTimePicker = {
      ...dateTimePicker,
      show: false,
      [dateTimePicker.isEnd ? 'endTime' : 'startTime']: v,
    };

    setDateTimePicker(newDateTimePicker);

    onGetSomeData({
      isRefresh: true,
      dateTimePicker: newDateTimePicker,
    });
  };

  return (
    <div>
      {dateTimePicker.show && (<DateTimePicker
        type="date"
        value={dateTimePicker.curValue}
        onConfirm={onConfirmDateTimePicker}
        onCancel={() => setDateTimePicker({
          ...dateTimePicker,
          show: false,
        })}
        maxDate={Date.now()}
      />)}
    </div>
  )
}

3. 参数说明

参考 Press UI。

4. FAQ

4.1. 实现细节

实现过程如下：

搬运 Press UI 中时间选择器代码
修改变量赋值、变量获取、事件处理、方法声明、生命周期等基础部分
修改之前的动态设置值部分。这里 picker ref 中没有 setValue/getIndexes，改由组件内部自己维护 selectedValues

Press UI 中的组件核心逻辑不动，根据 value/min/max 等生成 columns，change 时动态更新 columns/value 等。

PixUI 中实现时间选择器 ​

1. 介绍 ​

2. 使用方式 ​

3. 参数说明 ​

4. FAQ ​