JSFiddle - React, Tailwind, and code Playground

by Aaron Fryer

TypeScript

import * as moment from 'moment';
import * as React from 'react';
import { v4 as uuid } from 'uuid';
import Bem from '../../../utils/Bem';
import { Button } from '../../Button';
import './styles.css';

/**
 * CustomDatePicker Component used for browser who don't support the HTML5 date field <input type="date" /> fields throughout the app
 * 
 * @param {string} defaultValue - optional parameter provides the default value of the date picker. Must be in the RFC 3339 format YYYY-MM-DD
 * @param {any} onChange - specifies the onChange function
 * @param {string} icon - optional parameter to specify what the icon will be. If no icon then no icon will be displayed
 * @param {string} max - optional parameter to specify what the maximum date that can be selected
 * @param {string} min - optional parameter to specify what the minimum date that can be selected
 * @param {string} value - optional parameter to specify the value of component (makes component controlled)
 * @param {string} label - optional parameter for field label
 * 
 */

const BEM = {
  components: {
    datePicker: new Bem('c-date-picker'),
    headerButton: new Bem('c-date-picker-header-button'),
    headerText: new Bem('c-date-picker-header-text'),
    tableCell: new Bem('c-date-picker-table-cell'),
  },
  layouts: {
    datePickerContainer: new Bem('l-date-picker-container'),
    datePickerControls: new Bem('l-date-picker-controls'),
    datePickerDropdown: new Bem('l-date-picker-header-dropdown'),
    datePickerHeader: new Bem('l-date-picker-header'),
    datePickerTable: new Bem('l-date-picker-table'),
  }
};

class CustomDatePicker extends React.PureComponent<any, any> {
  constructor(props: any) {
    super(props);

    this.state = {
      active: false,
      component: React.createRef(),
      daysInMonth: null,
      instance: new Bem(`js-date-picker`).with(uuid()),
      month: props.value ? moment(props.value).startOf('month') : moment(props.defaultValue).startOf('month'),
      value:...