phoenix-components-library/react/components/Datepicker/Datepicker.jsx

Component library for Phoenix Frontend Projects.

import React from "react";
import PropTypes from "prop-types";
import moment from "moment";
import { DatePicker } from "antd";

import "./Datepicker-antd.css";
import "./Datepicker.css";

const propTypes = {
  onDatepickerChange: PropTypes.func,
  onDatepickerOkClick: PropTypes.func,
  placeholder: PropTypes.string,
  format: PropTypes.string,
  defaultValue: PropTypes.instanceOf(Date),
  showTime: PropTypes.bool,
  disabled: PropTypes.bool
};

const defaultProps = {
  onDatepickerChange: () => {},
  onDatepickerOkClick: () => {},
  placeholder: "Placeholder",
  format: "YYYY-MM-DD",
  defaultValue: null,
  showTime: false,
  disabled: false
};

const Datepicker = props => {
  const {
    showTime,
    format,
    placeholder,
    onDatepickerChange,
    onDatepickerOkClick,
    defaultValue,
    disabled
  } = props;

  const onDateChange = (momentDate, dateString) => {
    onDatepickerChange(momentDate.toDate(), dateString);
  };

  const onOkClick = momentDate => {
    onDatepickerOkClick(momentDate.toDate());
  };

  const getDefaultValue = () => {
    if (!props.defaultValue) {
      return {};
    }
    return { defaultValue: moment(defaultValue) };
  };

  return (
    <div className="es-datepicker">
      <DatePicker
        showTime={showTime}
        format={format}
        placeholder={placeholder}
        onChange={onDateChange}
        onOk={onOkClick}
        disabled={disabled}
        {...getDefaultValue()}
      />
    </div>
  );
};

Datepicker.propTypes = propTypes;
Datepicker.defaultProps = defaultProps;

export { Datepicker };