跳到主要内容

DatePickerPro

长念
长念阅读约 6 分钟1 年前发布1 年前编辑
© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0
危险

✂️ 当前组件已停止更新维护，如遇问题，需自行修复！

基于 Element React 的 DatePicker 组件封装的日期选择组件。

特性说明​

  • 扩展支持 monent.Moment dayjs.Dayjs 值类型
  • 支持 disabled 禁用属性
  • 理论上支持 DatePicker 组件所有属性
  • 支持日期范围选择

何时使用​

  • 使用 DatePicker 组件的所有场景

基本用法​

import { DatePickerPro } from '@/components/element-pro';

export default () => {
  const handleValueChange = (key: string, value: any, checked: any) => {
    console.log(key, value, checked);
  };

  return (
    <DatePickerPro
      value={model.startTime}
      placeholder="选择月"
      selectionMode="month"
      onChange={(val) => handleValueChange('startTime', val)}
    />
  );
};

API​

除此以下附加属性外，支持 DatePicker 所有属性。

参数类型
说明默认值
valueDate | null | string | moment.Moment | dayjs.Dayjs |
(Date | null | string | moment.Moment | dayjs.Dayjs)[]		必输 绑定的值字段-
disabledboolean可选 禁用状态false
isRangeboolean可选 是否日期范围选择器false

源代码​

DatePickerPro/index.tsx
import cls from 'classnames';
import dayjs from 'dayjs';
import { DatePicker, DateRangePicker } from 'element-react';
import moment from 'moment';
import React from 'react';
import styles from './index.module.less';

type DatePickerProps = React.ComponentProps<typeof DatePicker>;

export interface DatePickerProProps extends Omit<DatePickerProps, 'value'> {
  /**
   * @description 值 - 扩展值类型，支持 moment dayjs 扩展 range
   */
  value:
    | Date
    | null
    | string
    | moment.Moment
    | dayjs.Dayjs
    | (Date | null | string | moment.Moment | dayjs.Dayjs)[];
  /**
   * @description 组件是否禁用
   * @default false
   */
  disabled?: boolean;
  /**
   * @description 值 - 是否展示日期范围选择器
   */
  isRange?: boolean;
}

const DatePickerPro: React.FC<DatePickerProProps> = ({
  disabled = false,
  value: _value,
  isRange = false,
  ...restProps
}) => {
  let values = Array.isArray(_value) ? _value : [_value];

  const parsedValues = values.map((v) => {
    if (typeof v === 'string') {
      // NOTE: 虽然官方类型定义中支持 string，但实际上不能正常渲染
      return v ? new Date(v) : null; // 兼容 string
    } else if (moment.isMoment(v) || dayjs.isDayjs(v)) {
      return new Date(v.valueOf()); // 兼容 moment dayjs 类型
    } else {
      return v;
    }
  });

  if (isRange) {
    return (
      <DateRangePicker
        value={parsedValues}
        className={cls({
          [styles['date__picker--disabled']]: disabled,
        })}
        {...restProps}
      />
    );
  }

  return (
    <DatePicker
      value={parsedValues?.[0]}
      className={cls({
        [styles['date__picker--disabled']]: disabled,
      })}
      {...restProps}
    />
  );
};

export default DatePickerPro;

更新日志​

alpha​

2024-11-12

  • 🐞 修复空字符值无法渲染问题；

2024-09-20

  • 🎉 新增 isRange 支持日期范围；

2024-09-04

  • 🎉 新增 DatePickerPro 组件；