/**
 * title: "日期与时间选择交互"
 * description: "如果需要同时选择时间，可以通过 showTime 属性开启，showTime 支持传入 TimePickerPanel 的属性，例如 format, defaultValue 等。"
 */
import React from 'react';
import { DatePicker } from '@alicloud/console-components';
import moment from 'moment';

const titleStyle = {
  margin: '40px 0 4px',
  color: '#1D1D1F',
  height: 20,
};
const onChange = (val) => console.log(val);
const startValue = moment('2017-11-20', 'YYYY-MM-DD', true);

export default () => {
  return (
    <div>
      <div style={titleStyle}>默认</div>
      <DatePicker onChange={onChange} format="YYYY-MM-DD" showTime />
      <div style={titleStyle}>完成选择</div>
      <DatePicker
        onChange={onChange}
        defaultValue={startValue}
        format="YYYY-MM-DD"
        showTime
      />
      <div style={titleStyle}>禁用</div>
      <DatePicker onChange={onChange} disabled showTime />
    </div>
  );
};