移动端日期选择器

使用

import React, { useEffect, useRef } from "react";
import DatePicker from "@dsh-prose/date-picker";

function App(): JSX.Element {
  const dp = useRef<DatePicker | null>(null);
  useEffect(() => {
    dp.current = new DatePicker({
      allowMaskClose: false,
      // initDate: "2018-10-5",
      minDate: "2019-9-25",
      maxDate: "2021-11-25",
      onConfirm: (date) => {
        console.log("date", date);
      },
    });
  }, []);

  return (
    <>
      <button
        style={{
          display: "block",
          fontSize: 30,
          width: "80%",
          height: 44,
          margin: "10px auto",
        }}
        onClick={() => {
          dp.current?.trigger();
        }}
      >
        日期选择
      </button>
    </>
  );
}

export default App;

参数

| 参数 | 说明 | 默认值 | 类型 | 必选 | | -------------- | ---------------- | ------------ | ------------------------------- | :--: | | split | 分隔符 | - | string | × | | allowMaskClose | 允许点击蒙层关闭 | true | boolean | × | | minDate | 最小日期 | 2000-01-01 | string | × | | maxDate | 最大日期 | 当年当月当天 | string | × | | initDate | 初始化日期 | | string | × | | onConfirm | 选择时间 | | (date: string | null) => void; | × |

返回值

| 参数 | 说明 | 默认值 | 类型 | 必选 | | -------------- | --------------- | ------ | ---------------------- | :--: | | trigger | 显示切换 | | ()=> void; | × | | setCurrentDate | 设置当前时间 | | (date: string)=> void; | × | | getCurrentDate | 获取当前时间 | | ()=> string | null; | × | | destroy | 销毁 DOM 与事件 | | () => void; | × |