1 Star 0 Fork 0

LS/ls-design

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
zh-CN-react.md 9.93 KB
一键复制 编辑 原始数据 按行查看 历史

DatetimePicker


简介

时间选择器,支持日期、年月、时分等维度。

安装使用

import { DatetimePicker, DatetimePickerRef } from "@ls-design/ui-react";

基础用法

DatetimePicker 通过 type 属性来定义需要选择的时间类型,type 为 date 表示选择年月日。通过 mindate 和 maxdate 属性可以确定可选的时间范围。

export default () => {
  const [open, setOpen] = useState(false);
  const minDate = "2020-10-01";
  const maxDate = "2025-08-13";
  const currentDate = "2023-01-30";

  const handleClose = () => setOpen(false);

  const handleConfirm = ({ detail }) => {
    Toast.text(`${detail.value}`);
    setOpen(false);
  };

  const handleClick = () => setOpen(true);

  const handleChange = ({ detail }) => {
    Toast.text(`${detail.value}`);
  };

  return (
    <div className="demo">
      <div onClick={handleClick}></div>
      <DatetimePicker
        title="选择年月日"
        type="date"
        open={open}
        value={this.currentDate}
        mindate={this.minDate}
        maxdate={this.maxDate}
        onClose={handleClose}
        onConfirm={handleConfirm}
        onChange={handleChange}
      />
    </div>
  );
};

选择年月

将 type 设置为 year-month 即可选择年份和月份。通过调用 setFormatter 方法,可以对选项文字进行格式化处理。

export default () => {
  const [open, setOpen] = useState(false);
  const datetimePickerRef = useRef < DatetimePickerRef > null;

  const formatter = (type, val) => {
    if (type === "year") {
      return `${val}年`;
    }
    if (type === "month") {
      return `${val}月`;
    }
    return val;
  };

  const handleClose = () => setOpen(false);

  const handleConfirm = ({ detail }) => {
    Toast.text(`${detail.value}`);
    setOpen(false);
  };

  const handleClick = () => setOpen(true);

  useEffect(() => {
    const { current: datetimePickerCurrent } = datetimePickerRef;
    datetimePickerCurrent.setFormatter(formatter);
  }, []);

  return (
    <div className="demo">
      <div onClick={handleClick}></div>
      <DatetimePicker
        ref={datetimePickerRef}
        title="选择年月"
        type="year-month"
        open={open}
        onClose={handleClose}
        onConfirm={handleConfirm}
      />
    </div>
  );
};

选择月日

将 type 设置为 month-day 即可选择月份和日期。

export default () => {
  const [open, setOpen] = useState(false);
  const datetimePickerRef = useRef < DatetimePickerRef > null;

  const handleClose = () => setOpen(false);

  const handleConfirm = ({ detail }) => {
    Toast.text(`${detail.value}`);
    setOpen(false);
  };

  const handleClick = () => setOpen(true);

  useEffect(() => {
    const { current: datetimePickerCurrent } = datetimePickerRef;
    datetimePickerCurrent.setFormatter((type, val) => {
      if (type === "month") {
        return `${val}月`;
      }
      if (type === "day") {
        return `${val}日`;
      }
      return val;
    });
  }, []);

  return (
    <div className="demo">
      <div onClick={handleClick}></div>
      <DatetimePicker
        ref={datetimePickerRef}
        title="选择月日"
        type="month-day"
        open={open}
        onClose={handleClose}
        onConfirm={handleConfirm}
      />
    </div>
  );
};

选择时间

将 type 设置为 time 即可选择时间(小时和分钟),通过调用 setFilter 方法,可以对选项数组进行过滤,实现自定义时间间隔。

export default () => {
  const [open, setOpen] = useState(false);
  const datetimePickerRef = useRef < DatetimePickerRef > null;

  const formatter = (type, val) => {
    if (type === "hour") {
      return `${val}时`;
    }
    if (type === "minute") {
      return `${val}分`;
    }
    return val;
  };

  const filter = (type, options) => {
    if (type === "minute") {
      return options.filter((option) => Number(option) % 5 === 0);
    }
    return options;
  };

  const handleClose = () => setOpen(false);

  const handleConfirm = ({ detail }) => {
    Toast.text(`${detail.value}`);
    setOpen(false);
  };

  const handleClick = () => setOpen(true);

  useEffect(() => {
    const { current: datetimePickerCurrent } = datetimePickerRef;
    datetimePickerCurrent.setFormatter(formatter);
    datetimePickerCurrent.setFilter(filter);
  }, []);

  return (
    <div className="demo">
      <div onClick={handleClick}></div>
      <DatetimePicker
        ref={datetimePickerRef}
        title="选择时间"
        type="month-day"
        open={open}
        minhour={10}
        maxhour={22}
        minminute={5}
        maxminute={45}
        onClose={handleClose}
        onConfirm={handleConfirm}
      />
    </div>
  );
};

选择完整时间

将 type 设置为 datetime 即可选择完整时间,包括年月日和小时、分钟。

export default () => {
  const [open, setOpen] = useState(false);

  const handleClose = () => setOpen(false);

  const handleConfirm = ({ detail }) => {
    Toast.text(`${detail.value}`);
    setOpen(false);
  };

  const handleClick = () => setOpen(true);

  return (
    <div className="demo">
      <div onClick={handleClick}></div>
      <DatetimePicker
        title="选择完整时间"
        type="datetime"
        open={open}
        onClose={handleClose}
        onConfirm={handleConfirm}
      />
    </div>
  );
};

Props

参数 说明 类型 默认值
type 时间类型,可选值为 date time year-month month-day datehour string datetime
value 默认值,typetimevalue 格式为 HH:mm, 其他类型格式为 yyyy-MM-ddyyyy-MM-dd HH:mm string null
open datetime-picker 是否显示 boolean require
title 标题 string ''
showtoolbar 是否显示顶部栏 boolean false
confirmbuttontext 顶部栏确认按钮文字 string 确认
cancelbuttontext 顶部栏取消按钮文字 string 取消
forbidmaskclick 是否禁止遮罩层点击 boolean false
onClose 点击遮罩或者取消按钮 () => void
onConfirm 确定按钮点击回调 (e: {detail:{value: Date | string }})=> void
onChange picker 改变回调 (e: {detail:{value: Date | string }})=> void

DatePicker Props

当时间选择器类型为 date 或 datetime 时,支持以下 props:

参数 说明 类型 默认值
mindate 可选的最小时间,精确到分钟 yyyy-MM-ddyyyy-MM-dd HH:mm 十年前
maxdate 可选的最大时间,精确到分钟 yyyy-MM-ddyyyy-MM-dd HH:mm 十年后

TimerPicker Props

当时间选择器类型为 time 时,支持以下 props:

参数 说明 类型 默认值
minhour 可选的最小小时 number 0
maxhour 可选的最大小时 number 23
minminute 可选的最小分钟 number 0
maxminute 可选的最大分钟 number 59

方法

名称 说明 类型
setValue 用于设置选择器数据,typetimevalue 格式为 HH:mm, 其他类型格式为 yyyy-MM-ddyyyy-MM-dd HH:mm (value: string) => void
getValues 获取选择器选中的数据,通常配合自定义头部时使用 () => SelectedColumn[]
setFilter 设置选项过滤函数 (type: string, values: string[]) => string[]
setFormatter 设置选项格式化函数 (type: string, value: string) => string

类型定义

type SelectedColumn = {
  value: string
  index: number
};
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/LShere/ls-design.git
git@gitee.com:LShere/ls-design.git
LShere
ls-design
ls-design
master

搜索帮助