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

const { RangePicker } = DatePicker;

export default () => {
  return (
    <Form layout="vertical">
      <Form.Item label="基本用法">
        <RangePicker
          defaultValue={[moment("2020-10-01"), moment("2020-11-11")]}
          onChange={value =>
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            )
          }
          onOpenChange={open => console.log(open ? "open" : "close")}
        />
      </Form.Item>
      <Form.Item label="包含时间">
        <RangePicker
          defaultValue={[moment("2020-10-01"), moment("2020-11-11")]}
          showTime
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </Form.Item>
      <Form.Item label="包含毫秒">
        <RangePicker
          format="YYYY-MM-DD HH:mm:ss.SSS"
          defaultValue={[moment("2020-10-01"), moment("2020-11-11")]}
          showTime={{ format: "HH:mm:ss.SSS" }}
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </Form.Item>
      <Form.Item label="自定义时间格式">
        <RangePicker
          separator="至"
          format="YYYY-MM-DD HH:mm"
          showTime={{ format: "HH:mm", minuteStep: 30 }}
          defaultValue={[
            moment("2020-10-01 10:30"),
            moment("2020-11-11 22:30"),
          ]}
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </Form.Item>
      <Form.Item label="季度区间选择">
        <RangePicker
          separator="至"
          calendarType="quarter"
          defaultValue={[
            moment()
              .set({ quarter: 1 })
              .startOf("quarter"),
            moment()
              .set({ quarter: 3 })
              .endOf("quarter"),
          ]}
          range={[
            moment()
              .set({ year: 1990 })
              .startOf("year"),
            moment()
              .set({ year: 2030 })
              .endOf("year"),
          ]}
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </Form.Item>

      <Form.Item label="月份区间选择">
        <RangePicker
          separator="至"
          calendarType="month"
          defaultValue={[
            moment()
              .set({ month: 1 })
              .startOf("month"),
            moment()
              .set({ month: 3 })
              .endOf("month"),
          ]}
          range={[
            moment()
              .set({ year: 1990 })
              .startOf("year"),
            moment()
              .set({ year: 2030 })
              .endOf("year"),
          ]}
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </Form.Item>
    </Form>
  );
};