"use strict";

require("./demo5.css");

var _ = _interopRequireDefault(require(".."));

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var RangePicker = _["default"].RangePicker;
var defaultVal = '2020-02-02';
var defaultRangeVal = ['2020-01-01', '2020-02-02'];

function customizeFormatter(v) {
  return "DATE: ".concat(v.format('YYYY/MM/DD'));
}

function App() {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "app"
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    defaultValue: defaultVal,
    format: "YYYY/MM/DD"
  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    defaultValue: defaultVal,
    showTime: true,
    format: "YYYY/MM/DD HH:mm:ss"
  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    defaultValue: defaultVal,
    format: "YYYY/MM/DD HH:mm",
    showTime: true,
    timePanelProps: {
      format: 'HH:mm'
    }
  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(RangePicker, {
    defaultValue: defaultRangeVal,
    format: "YYYY/MM/DD"
  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(RangePicker, {
    defaultValue: defaultRangeVal,
    format: "YYYY/MM/DD HH:mm:ss",
    showTime: true
  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    defaultValue: defaultVal,
    format: customizeFormatter
  })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
    style: {
      backgroundColor: '#f3f3f3',
      padding: '10px'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    theme: "grey",
    defaultValue: defaultVal,
    format: "YYYY/MM/DD"
  })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    theme: "grey",
    defaultValue: defaultVal,
    showTime: true,
    format: "YYYY/MM/DD HH:mm:ss"
  })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    theme: "grey",
    defaultValue: defaultVal,
    format: "YYYY/MM/DD HH:mm",
    showTime: true,
    timePanelProps: {
      format: 'HH:mm'
    }
  })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(RangePicker, {
    theme: "grey",
    defaultValue: defaultRangeVal,
    format: "YYYY/MM/DD"
  })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(RangePicker, {
    theme: "grey",
    defaultValue: defaultRangeVal,
    format: "YYYY/MM/DD HH:mm:ss",
    showTime: true
  })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
    theme: "grey",
    defaultValue: defaultVal,
    format: customizeFormatter
  }))));
}

_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(App, null), document.getElementById('date-picker2-demo-5'));