安装

npm install @xintao1105/date-time-picker

or

yarn add @xintao1105/date-time-picker

示例代码

import DateTimePicker from '@xintao1105/date-time-picker';
import type { interProps } from '@xintao1105/date-time-picker';

const ars:interProps = {
    onClick: (e) => { console.log("onClick", e) }
  }

<DateTimePicker {...ars}/>

日期格式 + 时间格式参考示例

const dateFormat = [
  {
    name: "无",
    value: "",
  },
  {
    name: "2021年1月1日",
    value: "yyyy年M月d日",
  },
  {
    name: "2021年01月01日",
    value: "yyyy年MM月dd日",
  },
  {
    name: "2021-1-1",
    value: "yyyy-M-d",
  },
  {
    name: "2021-01-01",
    value: "yyyy-MM-dd",
  },
  {
    name: "2021.1.1",
    value: "yyyy.M.d",
  },
  {
    name: "2021.01.01",
    value: "yyyy.MM.dd",
  },
  {
    name: "2021/01/01",
    value: "yyyy/MM/dd",
  },
  {
    name: "2021/01",
    value: "yyyy/MM",
  },
  {
    name: "2021-01",
    value: "yyyy-MM",
  },
  {
    name: "2021.01",
    value: "yyyy.MM",
  },
  {
    name: "1月1日",
    value: "M月d日",
  },
  {
    name: "1-1",
    value: "M-d",
  },
  {
    name: "1.1",
    value: "M.d",
  },
  {
    name: "01.01",
    value: "MM.dd",
  },
  {
    name: "2021",
    value: "yyyy",
  },
  {
    name: "1月",
    value: "M月",
  },
  {
    name: "1日",
    value: "d日",
  },
];

timeFormat 时间格式类型
const timeFormat = [
  {
    name: "无",
    value: "",
  },
  {
    name: "8时0分0秒",
    value: "H时m分s秒",
  },
  {
    name: "8时0分",
    value: "H时m分",
  },
  {
    name: "8时",
    value: "HH时",
  },
  {
    name: "0分",
    value: "m分",
  },
  {
    name: "0秒",
    value: "s秒",
  },
  {
    name: "08:00:00",
    value: "HH:mm:ss",
  },
  {
    name: "08:00",
    value: "HH:mm",
  },
  {
    name: "08(时)",
    value: "HH(时)",
  },
];

参数类型

interface dataProps {
  startTime?: string;
  value?: string;
  endTime?: string;
}

export interface style {
  fontFamily?: string;
  fontSize?: number;
  color?: string;
  fontWeight?: string | number;
  letterSpacing?: number;
  lineHeight?: number;
  fontStyle?: string;
}

interface fillColor {
  startVal: string;
  endVal: string;
  direction: number;
}


export interface interProps {
  base?: {
    width: number;
    height: number;
  };
  /**
   * 日期格式
   * @default dateFormat = "yyyy-MM-dd"
   */
  dateFormat?: string;
  /**
   * 时间格式
   * @default timeFormat = "HH:mm:ss"
   */
  timeFormat?: string;
  /**
   * 起始时间 格式要求分隔符，且数据优先级大于此处设置
   * @default startTime = ""
   */
  startTime?: string;
  /**
   * 结束时间 格式要求分隔符，且数据优先级大于此处设置
   * @default endTime = ""
   */
  endTime?: string;
  /**
   * 交互方式 点击日期 | 点击确认按钮
   * @type {String}
   * @default interactiveType = "determine"
   */
  interactiveType?: "date" | "determine";
  /**
   * 选择器文本样式
   * @default selectortextStyle = { "fontFamily": "Microsoft Yahei", "fontSize": 16, "color": "#ffffff", "fontWeight": "normal", "letterSpacing": 0, "fontStyle": "normal"}
   */
  selectortextStyle?: style;
  /**
   * 选择器文本缩进
   * @default textIndent = 10
   */
  textIndent?: number;
  /**
   * 选择器文本背景色: 开始色值 | 结束色值 | 角度
   * @default fillColor = {"startVal": "#0A1015","endVal": "#0A1015","direction": 0}
   */
  selectorbackgroundColor?: fillColor;
  /**
   * 边框
   * @default frame = true
   */
  frame?: boolean;
  /**
   * 边框粗细 当frame = true 是生效
   * @default thickness = 1
   */
  thickness?: number;
  /**
   * 边框默认颜色 当frame = true 是生效
   * @default defaultColor = "#CCCCCC"
   */
  defaultColor?: string;
  /**
   * 边框激活颜色 当frame = true 是生效
   * @default activationColor = "#EEEEEE"
   */
  activationColor?: string;
  /**
   * 日历布局
   * @type {string}
   * @default layoutType = "down"
   */
  layoutType?: "up" | "down";
  /**
   * 日历间距
   * @default spacing = 5
   */
  spacing?: number;
  /**
   * 日历位置类型
   * @default locationType = "left"
   */
  locationType?: "left" | "auto" | "right";
  /**
   * 日历框尺寸 当locationType = "left" | "right" 时生效; 单位px
   * @default frameSize = {"w": 300,"h": 300}
   */
  frameSize?: {
    w: number;
    h: number;
  };
  /**
   * 日历背景色
   * @default backgroundColor = "#091015"
   */
  backgroundColor?: string;
  /**
   * 日历主题色块
   * @default themeColor = "#4281F7"
   */
  themeColor?: string;
  /**
   * 日历文本样式
   * @default calendartextStyle = {"fontFamily": "Microsoft Yahei","fontSize": 16,"color": "#ffffff","fontWeight": "normal","letterSpacing": 0,"lineHeight": 0,"fontStyle": "normal"}
   */
  calendartextStyle?: style;
  /**
   * 日历装饰线
   * @default decorativeLine = "#323538"
   */
  decorativeLine?: string;
  /**
   * 日历按钮文本样式
   * @default calendartextStyle = {"fontFamily": "Microsoft Yahei","fontSize": 16,"color": "#ffffff","fontWeight": "normal","letterSpacing": 0,"lineHeight": 0,"fontStyle": "normal"}
   */
  buttonStyle?: style;
  /**
   * 数据
   */
  data?: dataProps;
  /**
   * 点击回调
   */
  readonly onClick?: (e: any) => void;
}