@zenequityui/date-picker v0.9.6

Installation

To install a component run

$ npm install @zenequityui/date-picker --save

Please import CSS styles via

@import '/path__to__node_modules/@zenequityui/date-picker/dist/index.min.css

Usage

Single Date Selector

import { DatePicker } from '@zenequityui/date-picker';

const moment = require('moment');
initialState = {
  selectedDate: moment(new Date()),
};

<DatePicker
  onChange={(value) => {
    setState({
      selectedDate: value,
    });
  }}
  renderInput={() => (
    !state.selectedDate ? <span>Start Date</span> : state.selectedDate
  )}
  value={{
    startMoment: state.selectedDate,
  }}
  htmlAttributes={{
    isOutsideRange: () => false,
  }}
/>

Future Date Disabled

import { DatePicker } from '@zenequityui/date-picker';

const moment = require('moment');
initialState = {
  selectedDate: moment(new Date()),
};

<DatePicker
  onChange={(value) => {
    setState({
      selectedDate: value,
    });
  }}
  renderInput={() => (
    !state.selectedDate ? <span>Start Date</span> : state.selectedDate
  )}
  value={{
    startMoment: state.selectedDate,
  }}
  htmlAttributes={{
    isOutsideRange: (day) => (day.isAfter(moment(), 'days')),
  }}
/>

Past Date Disabled

import { DatePicker } from '@zenequityui/date-picker';

const moment = require('moment');
initialState = {
  selectedDate: moment(new Date()),
};

<DatePicker
  onChange={(value) => {
    setState({
      selectedDate: value,
    });
  }}
  renderInput={() => (
    !state.selectedDate ? <span>Start Date</span> : state.selectedDate
  )}
  value={{
    startMoment: state.selectedDate,
  }}
  htmlAttributes={{
    isOutsideRange: (day) => (day.isBefore(moment(), 'days')),
  }}
/>

Empty Date Selector

import { DatePicker } from '@zenequityui/date-picker';

const moment = require('moment');
initialState = {
  selectedDate: '',
};

<DatePicker
  onChange={(value) => {
    setState({
      selectedDate: value,
    });
  }}
  renderInput={() => (
    !state.selectedDate ? <span>Start Date</span> : state.selectedDate
  )}
  value={{
    startMoment: state.selectedDate,
  }}
  htmlAttributes={{
    isOutsideRange: () => false,
  }}
/>

Range Date Selector

import { DatePicker } from '@zenequityui/date-picker';

const moment = require('moment');
initialState = {
  startDate: moment(new Date()),
  endDate: moment(new Date()),
};

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div style={{ width: '100%', marginRight: '10px' }}>
    <DatePicker
      onChange={(value) => {
        const updatedEndDate = !state.endDate || moment(state.endDate).isBefore(moment(value), 'days') ? value : null;

        setState({
          startDate: value,
          ...(updatedEndDate ? { endDate: updatedEndDate } : {}),
        });
      }}
      isDayBlocked={(day) => (day.isBefore(moment(), 'days'))}
      renderInput={() => (
        !state.startDate ? <span>Start Date</span> : state.startDate
      )}
      value={{
        startMoment: state.startDate,
      }}
    />
  </div>

  <div style={{ width: '100%', marginLeft: '10px' }}>
    <DatePicker
      onChange={(value) => {
        setState({
          endDate: value,
        });
      }}
      isDayBlocked={(day) => (
        day.isBefore(state.startDate ? moment(state.startDate) : moment(), 'days')
      )}
      renderInput={() => (
        !state.endDate ? <span>End Date</span> : state.endDate
      )}
      value={{
        startMoment: state.endDate,
      }}
    />
  </div>
</div>