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

export default () => {
  return (
    <Form layout="vertical">
      <Form.Item label="基本用法">
        <DatePicker
          defaultValue={moment("2020-10-01")}
          onChange={value => console.log(value.format("YYYY/MM/DD"))}
          onOpenChange={open => console.log(open ? "open" : "close")}
        />
      </Form.Item>
      <Form.Item label="自定义格式">
        <DatePicker
          format="LL"
          defaultValue={moment("2020-10-01")}
          onChange={value => console.log(value.format("YYYY/MM/DD"))}
        />
      </Form.Item>
      <Form.Item label="包含时间">
        <DatePicker showTime onChange={value => console.log(value.format())} />
      </Form.Item>
      <Form.Item label="包含毫秒">
        <DatePicker
          format="YYYY-MM-DD HH:mm:ss.SSS"
          showTime={{ format: "HH:mm:ss.SSS", minuteStep: 30 }}
          defaultValue={moment("2020-10-01 10:30:30:300")}
          onChange={value => console.log(value.format())}
        />
      </Form.Item>
      <Form.Item label="自定义时间格式">
        <DatePicker
          format="YYYY-MM-DD HH:mm"
          showTime={{ format: "HH:mm", minuteStep: 30 }}
          defaultValue={moment("2020-10-01 10:30")}
          onChange={value => console.log(value.format())}
        />
      </Form.Item>
    </Form>
  );
};