import React from "react";
import moment from "moment";
import { DatePicker } from "@tencent/tea-component";
import { Form } from "../../form";

const { RangePicker, MonthPicker } = DatePicker;

export default () => {
  return (
    <Form layout="vertical">
      <Form.Item label="日期选择 range">
        <DatePicker
          defaultValue={moment("2020-10-01")}
          range={[moment("2020-09-01"), moment("2020-11-11")]}
          onChange={value => console.log(value.format("YYYY/MM/DD"))}
        />
      </Form.Item>
      <Form.Item label="包含时间的日期选择 range">
        <DatePicker
          showTime
          range={[moment("2019-12-02 12:30:00"), moment("2020-12-12 12:30:00")]}
          onChange={value => console.log(value.format())}
        />
      </Form.Item>
      <Form.Item label="月份选择 range">
        <MonthPicker
          defaultValue={moment("2020-10-01")}
          range={[moment("2019-09"), moment("2020-12")]}
          onChange={value => console.log(value.format("YYYY/MM/DD"))}
        />
      </Form.Item>
      <Form.Item label="包含时间的范围选择 range">
        <RangePicker
          range={[
            moment()
              .subtract(6, "d")
              .startOf("d"),
            moment().endOf("d"),
          ]}
          defaultValue={[
            moment()
              .subtract(6, "d")
              .startOf("d"),
            moment().endOf("d"),
          ]}
          showTime={{
            defaultValue: [
              moment("00:00:00", "HH:mm:ss"),
              moment("23:59:59", "HH:mm:ss"),
            ],
          }}
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </Form.Item>
    </Form>
  );
};