feat: 增加时间选择组件

.umirc.js

@@ -88,6 +88,7 @@ export default {
           'TimeRangePicker',
           'MqttView',
           'ExportExcel',
+          'DatePickerCustom',
         ],
       },
       {

packages/base-components/DatePickerCustom/README.md

+# `@wisdom-components/DatePickerCustom`
+
+> TODO: description
+
+## Usage
+
+```
+const datePicker = require('@wisdom-components/DatePickerCustom');
+
+// TODO: DEMONSTRATE API
+```

packages/base-components/DatePickerCustom/package.json

+{
+  "name": "@wisdom-components/datepickercustom",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/base-components/DatePickerCustom/src/DatePickerCustom.md

+---
+title: DatePicker - 时间选择器
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+# DatePickerCustom 时间选择器
+
+## 代码演示
+
+<code src="./demos/base.tsx">
+
+## API
+
+api 参考 Antd Table 组件 https://ant.design/components/date-picker-cn/#API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| onChange | 改变选择的时间，重写 antd 方法，返回起始时间对象 | function(date, dateString){ } | -- |

packages/base-components/DatePickerCustom/src/demos/base.tsx

+import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Input } from 'antd';
+import DatePickerCustom from '../index';
+
+const Demo = (props) => {
+  const [startTime, setStartTime] = useState('');
+  const [endTime, setEndTime] = useState('');
+  const onChange = (date, dateString) => {
+    console.log(date);
+    setStartTime(date.startTime);
+    setEndTime(date.endTime);
+  };
+  return (
+    <>
+      <DatePickerCustom onChange={onChange} picker="day" style={{ marginRight: '10px' }} />
+      <DatePickerCustom onChange={onChange} picker="week" style={{ marginRight: '10px' }} />
+      <DatePickerCustom onChange={onChange} picker="month" style={{ marginRight: '10px' }} />
+      <DatePickerCustom onChange={onChange} picker="year" style={{ marginRight: '10px' }} />
+      <div style={{ display: 'flex', marginTop: '10px' }}>
+        <Input
+          value={startTime}
+          placeholder="起始时间"
+          style={{ marginRight: '10px', width: '250px' }}
+        />
+        <Input
+          value={endTime}
+          placeholder="结束时间"
+          style={{ marginRight: '10px', width: '250px' }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Demo;

packages/base-components/DatePickerCustom/src/index.js

+import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import moment from 'moment';
+import { DatePicker } from 'antd';
+const FORMATS = {
+  day: 'YYYY-MM-DD',
+  week: 'YYYY-wo',
+  month: 'YYYY-MM',
+  year: 'YYYY',
+};
+const STANTFORMAT = 'YYYY-MM-DD 00:00:00';
+const ENDFORMAT = 'YYYY-MM-DD 23:59:59';
+const DatePickerCustom = (props) => {
+  const modes = props.picker ? props.picker : 'day';
+  const selectedDate = props.value ? props.value : new Date();
+  const onChange = (date, dateString) => {
+    const dateTime = moment(date).format('YYYY-MM-DD');
+    let startTime = null;
+    let endTime = null;
+    switch (modes) {
+      case 'day':
+        startTime = moment(dateTime);
+        endTime = moment(dateTime);
+        break;
+      case 'week':
+        debugger;
+        startTime = moment(dateTime).startOf(modes);
+        endTime = moment(dateTime).endOf(modes);
+        break;
+      case 'month':
+        startTime = moment(dateTime).startOf(modes);
+        endTime = moment(dateTime).endOf(modes);
+        break;
+      case 'year':
+        startTime = moment(dateTime).startOf(modes);
+        endTime = moment(dateTime).endOf(modes);
+        break;
+      default:
+        startTime = moment(dateTime);
+        endTime = moment(dateTime);
+        break;
+    }
+    props.onChange(
+      { startTime: startTime.format(STANTFORMAT), endTime: endTime.format(ENDFORMAT) },
+      dateString,
+    );
+  };
+  const customFormat = (value) => {
+    let name = null;
+    switch (modes) {
+      case 'day':
+        name = value.format(FORMATS[modes]);
+        if (name === getTime(0, 'days', FORMATS[modes])) {
+          name = '今天';
+        } else if (name === getTime(1, 'days', FORMATS[modes])) {
+          name = '昨天';
+        }
+        break;
+      case 'week':
+        name = getMonthWeek(value);
+        if (value.format('YYYY-wo') === getTime(0, 'week', FORMATS[modes])) {
+          name = '本周';
+        } else if (value.format('YYYY-wo') === getTime(1, 'week', FORMATS[modes])) {
+          name = '上周';
+        }
+        break;
+      case 'month':
+        name = value.format(FORMATS[modes]);
+        if (name === getTime(0, 'month', FORMATS[modes])) {
+          name = '本月';
+        } else if (name === getTime(1, 'month', FORMATS[modes])) {
+          name = '上月';
+        }
+        break;
+      case 'year':
+        name = value.format(FORMATS[modes]);
+        if (name === getTime(0, 'year', FORMATS[modes])) {
+          name = '今年';
+        } else if (name === getTime(1, 'year', FORMATS[modes])) {
+          name = '去年';
+        }
+        break;
+      default:
+        break;
+    }
+    return name;
+  };
+  const getTime = (num, type, format) => {
+    return moment(new Date()).subtract(num, type).format(format);
+  };
+  const getMonthWeek = (value) => {
+    const a = value.format('YYYY'),
+      b = value.format('MM'),
+      c = value.format('DD');
+    let date = new Date(a, parseInt(b) - 1, c),
+      w = date.getDay(),
+      d = date.getDate();
+    if (w == 0) {
+      w = 7;
+    }
+    let config = {
+      getMonth: moment(date).format('MM'),
+      getYear: date.getFullYear(),
+      getWeek: Math.ceil((d + 6 - w) / 7),
+    };
+    return '第' + config.getWeek + '周(' + config.getYear + '/' + config.getMonth + ')';
+  };
+  return (
+    <DatePicker
+      {...props}
+      defaultValue={selectedDate ? moment(selectedDate) : ''}
+      format={customFormat}
+      onChange={onChange}
+    />
+  );
+};
+
+export default DatePickerCustom;