xchain-components/src/components/XDatepicker/index.js

Xchain Components

/* eslint react/jsx-filename-extension: 0 */
import React from 'react';
import { Icon } from 'semantic-ui-react';
import {
  DateInput,
  TimeInput,
  DateTimeInput,
  DatesRangeInput
} from 'semantic-ui-calendar-react'

type Props = {
  name?: string,
  width?: string,
  placeholder?: string,
  fontSize?: string,
  selectedDate: string,
  dateFormat?: string,
  handleChange: () => void,
  pickerType?: string,
  minDate: string,
  maxDate: string,
  closeOnMouseLeave: boolean,
  closable:boolean

};

const XDatePicker = (props: Props) => {
  const {
    name, width, placeholder, selectedDate, handleChange, fontSize, dateFormat, pickerType, minDate, maxDate, closeOnMouseLeave, closable
  } = props;
  return (
    <div style={{ width, backgroundColor: 'transparent' }}>
      {
        pickerType == 'date' ? <DateInput
          style={{
            width,
            padding: '0px 0px',
            fontSize,
          }}
          dateFormat={dateFormat}
          minDate={minDate}
          maxDate={maxDate}
          closeOnMouseLeave={closeOnMouseLeave}
          closable={closable}
          name={name}
          placeholder={placeholder}
          value={selectedDate}
          iconPosition="left"
          icon={(
            <Icon
              name="calendar alternate outline"
              style={{
                color: '#b6c0cb',
                fontSize,
              }}
            />
          )}
          onChange={handleChange}
        /> : <DateTimeInput
            style={{
              width,
              padding: '0px 0px',
              fontSize,
            }}
            name={name}
            placeholder={placeholder}
            value={selectedDate}
            dateTimeFormat={dateFormat}
            minDate={minDate}
            maxDate={maxDate}
            closeOnMouseLeave={closeOnMouseLeave}
            closable={closable}
            iconPosition="left"
            icon={(
              <Icon
                name="calendar alternate outline"
                style={{
                  color: '#b6c0cb',
                  fontSize,
                }}
              />
            )}
            onChange={handleChange}
          />

      }


      {/* <DateInput
        style={{
          width,
          padding: '0px 0px',
          fontSize,
        }}
        dateFormat={dateFormat}
        name={name}
        placeholder={placeholder}
        value={selectedDate}
        iconPosition="left"
        icon={(
          <Icon
            name="calendar alternate outline"
            style={{
              color: '#b6c0cb',
              fontSize,
            }}
          />
        )}
        onChange={handleChange}
      /> */}

    </div>
  );
};

XDatePicker.defaultProps = {
  name: 'date',
  width: '100px',
  placeholder: 'Date',
  fontSize: '12px',
  dateFormat: 'DD/MM/YYYY',
  pickerType: 'date',
  closeOnMouseLeave:false,
  closable:true
};

export default XDatePicker;