sunmao-sdk/src/component/FormRender/widgets/antd/date.jsx

榫卯-开箱即用赋能-sdk

/**
 * Updated by fateriddle on 2019-12-12.
 * 日期组件
 */

import React, { useMemo } from "react";
import { DatePicker, TimePicker } from "antd";
import moment from "moment";
import { getFormat } from "../../base/utils";

export default ({
  invalid,
  schema,
  options, // rangeDay 为最近几天   rangeDayStart ：对标时间（默认当天）（格式YYYY-MM-DD）
  value,
  name,
  onChange,
  disabled,
  readOnly
}) => {
  const style = invalid
    ? { borderColor: "#ff4d4f", boxShadow: "0 0 0 2px rgba(255,77,79,.2)" }
    : {};
  const { format = "dateTime" } = schema;
  let _format = format;
  if (options && options.format) {
    _format = options.format;
  }

  _format = getFormat(_format);

  const DateComponent = format === "time" ? TimePicker : DatePicker;

  // 最近几天
  const [_rangeDay, _rangeDayStart] = useMemo(() => {
    let day,
      startData = moment();
    try {
      day = parseInt(options.rangeDay) || 0; // 最近几天
    } catch {}
    try {
      startData = moment(options.rangeDayStart); // 最近几天  的对比起始时间
    } catch {}
    return [day, startData];
  }, [options?.rangeDay]);

  let _value = value || "";
  if (_value) {
    _value = moment(_value, _format);
  }

  const _onChange = (value, string) => {
    onChange(name, string);
  };

  const dateParams = {
    ...options,
    value: _value,
    style: { width: "100%", ...style },
    disabled: disabled || readOnly,
    onChange: _onChange,
    disabledDate: current => {
      return (
        !!_rangeDay &&
        current &&
        _rangeDayStart.diff(current, "days") > _rangeDay
      );
    }
  };

  // TODO: format是在options里自定义的情况，是否要判断一下要不要showTime
  if (format === "dateTime") {
    dateParams.showTime = true;
  }

  if (["week", "month", "quarter", "year"].indexOf(format) > -1) {
    dateParams.picker = format;
  }

  return <DateComponent {...dateParams} />;
};