@dsh-prose/date-picker NPM

移动端日期选择器

使用

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;	×