/**
 * title: "日期与时间选择交互"
 * description: "通过format属性控制日期格式。"
 */
import React from 'react';
import { DatePicker } from '@alicloud/console-components';
import moment from 'moment';

const titleStyle = {
  margin: '4px 0 4px',
  color: '#1D1D1F',
  height: 20,
};

const contentStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(2, 1fr)',
  gap: 36,
};

const startValue = moment('2020-07-25', 'YYYY-MM-DD', true);
export default () => {
  return (
    <div style={contentStyle}>
      <div>
        <div style={titleStyle}>简短</div>
        月+日&nbsp;
        <DatePicker defaultValue={startValue} format="MM-DD" />
        <br />
        <br />
        年+月&nbsp;
        <DatePicker defaultValue={startValue} format="YYYY-MM" />
      </div>
      <div>
        <div style={titleStyle}>标准</div>
        年+月+日（中）&nbsp;
        <DatePicker defaultValue={startValue} format="YYYY-MM-DD" />
        <br />
        <br />
        年+月+日（英）&nbsp;
        <DatePicker defaultValue={startValue} />
      </div>
      <div>
        <div style={titleStyle}>完整</div>
        年+月+日（中）&nbsp;
        <DatePicker defaultValue={startValue} format="YYYY年MM月DD日" />
        <br />
        <br />
        年+月+日（英）&nbsp;
        <DatePicker defaultValue={startValue} />
      </div>
    </div>
  );
};