@lightspeed/cirrus-datepicker v1.3.2

Cirrus Date Picker

For all things Date and Time.

See story on how to use.

TODO

• RTL support
• Support different start of week
• DateRange with only 1 month calendar
• An actual TimePicker component

Installation

First, make sure you have been through the install steps steps required to add Flame in your application. Although it's not required to have Flame installed to use Logo, you will need to install its peer dependencies.

If using Yarn:

yarn add @lightspeed/cirrus-datepicker

Or using npm:

npm i -S @lightspeed/cirrus-datepicker

Usage

Components

<DateRange>

Translations

When adding translations to the DateRange, it is important to use the right translation key for the component to pick up the string.

Here is a sample translation object:

{
  START_DATE_NOT_DEFINED: 'The start date is not defined',
  END_DATE_NOT_DEFINED: 'The end date is not defined',
  START_DATE_FORMAT_NOT_VALID: 'The start date is not valid',
  END_DATE_FORMAT_NOT_VALID: 'The end date is not valid',
  START_DATE_MUST_BE_BEFORE_END_DATE: 'The start date should be before the end date',
  END_DATE_MUST_BE_AFTER_START_DATE: 'The end date should be after the start date',
  START_DATE_NOT_WITHIN_RANGE: 'The start date is not within the accepted range',
  END_DATE_NOT_WITHIN_RANGE: 'The end date is not within the accepted range',
  APPLY: 'Apply',
  DAY_TITLE_FREE: (date: any) => `Choose: ${date}`,
  DAY_TITLE_SELECTED: (date: any) => `Selected. ${date}`,
  // This field is optional and will default to the dateFormat
  START_DATE_INPUT_PLACEHOLDER: 'yyyy/MM/dd';
  // This field is optional and will default to the dateFormat
  END_DATE_INPUT_PLACEHOLDER: 'yyyy/MM/dd';
}

Example Usage

import { DateRange } from '@lightspeed/cirrus-datepicker';

const translations = {
  // ...
};

const App = () => {
  const [dates, setDates] = useState({
    startDate: new Date(2019, 6, 21),
    endDate: new Date(2019, 6, 27),
  });

  return (
    <DateRange
      startDate={dates.startDate}
      endDate={dates.endDate}
      dateFormat="yyyy/MM/dd"
      translations={translations}
      onSubmit={dates => {
        console.log(dates);
      }}
    />
  );
};

Example Usage - With Presets

import { DateRange, createWeekPreset, createMonthPreset } from '@lightspeed/cirrus-datepicker';

const translations = {
  // ...
};

const lastWeek = createWeekPreset({ label: 'Last week', amountOfWeeks: 1, relativeStart: -1 });
const thisWeek = createWeekPreset({ label: 'This week', amountOfWeeks: 1 });

const App = () => {
  const [dates, setDates] = useState({
    startDate: new Date(2019, 6, 21),
    endDate: new Date(2019, 6, 27),
  });

  return (
    <DateRange
      startDate={dates.startDate}
      endDate={dates.endDate}
      dateFormat="yyyy/MM/dd"
      presetDates={[
        {
          label: 'Some Arbitrary Preset',
          startDate: new Date(2019, 6, 28),
          endDate: new Date(2019, 6, 29),
        },
        {
          label: 'Another Preset',
          startDate: new Date(2019, 5, 1),
          endDate: new Date(2019, 5, 14),
        },
        {}, // this makes a separator
        lastWeek,
        thisWeek,
      ]}
      translations={translations}
      onSubmit={dates => {
        console.log(dates);
      }}
    />
  );
};

<DateRangePicker>

Translations

When adding translations to the DateRangePicker, it is important to use the right translation key for the component to pick up the string.

Here is a sample translation object:

{
  START_DATE_NOT_DEFINED: 'The start date is not defined',
  END_DATE_NOT_DEFINED: 'The end date is not defined',
  START_DATE_FORMAT_NOT_VALID: 'The start date is not valid',
  END_DATE_FORMAT_NOT_VALID: 'The end date is not valid',
  START_DATE_MUST_BE_BEFORE_END_DATE: 'The start date should be before the end date',
  END_DATE_MUST_BE_AFTER_START_DATE: 'The end date should be after the start date',
  START_DATE_NOT_WITHIN_RANGE: 'The start date is not within the accepted range',
  END_DATE_NOT_WITHIN_RANGE: 'The end date is not within the accepted range',
  APPLY: 'Apply',
  DAY_TITLE_FREE: (date: any) => `Choose: ${date}`,
  DAY_TITLE_SELECTED: (date: any) => `Selected. ${date}`,
  // This field is optional and will default to the dateFormat
  START_DATE_INPUT_PLACEHOLDER: 'yyyy/MM/dd';
  // This field is optional and will default to the dateFormat
  END_DATE_INPUT_PLACEHOLDER: 'yyyy/MM/dd';
}

Example Usage

import { DateRangePicker } from '@lightspeed/cirrus-datepicker';

const translations = {
  // ...
};

const App = () => {
  const [dates, setDates] = useState({
    startDate: new Date(2019, 6, 21),
    endDate: new Date(2019, 6, 27),
  });

  return (
    <DateRangePicker
      startDate={dates.startDate}
      endDate={dates.endDate}
      dateFormat="yyyy/MM/dd"
      translations={translations}
      onSubmit={dates => {
        console.log(dates);
      }}
    />
  );
};

Example Usage - With Presets

import {
  DateRangePicker,
  createWeekPreset,
  createMonthPreset,
} from '@lightspeed/cirrus-datepicker';

const translations = {
  // ...
};

const lastWeek = createWeekPreset({ label: 'Last week', amountOfWeeks: 1, relativeStart: -1 });
const thisWeek = createWeekPreset({ label: 'This week', amountOfWeeks: 1 });
const thisMonth = createMonthPreset({ label: 'This month', amountOfMonths: 1 });
const nextMonth = createMonthPreset({ label: 'Next month', amountOfMonths: 1, relativeStart: 1 });

const App = () => {
  const [dates, setDates] = useState({
    startDate: new Date(2019, 6, 21),
    endDate: new Date(2019, 6, 27),
  });

  return (
    <DateRangePicker
      startDate={dates.startDate}
      endDate={dates.endDate}
      dateFormat="yyyy/MM/dd"
      presetDates={[
        {
          label: 'Some Arbitrary Preset',
          startDate: new Date(2019, 6, 28),
          endDate: new Date(2019, 6, 29),
        },
        {
          label: 'Another Preset',
          startDate: new Date(2019, 5, 1),
          endDate: new Date(2019, 5, 14),
        },
        {}, // this makes a separator
        lastWeek,
        thisWeek,
        {},
        thisMonth,
        nextMonth,
      ]}
      translations={translations}
      onSubmit={dates => {
        console.log(dates);
      }}
    />
  );
};

<DatePicker>

Translations

When adding translations to the DatePicker, it is important to use the right translation key for the component to pick up the string.

Here is a sample translation object:

{
  DATE_NOT_DEFINED: 'The date is not defined',
  DATE_NOT_VALID: 'The date is not valid',
  DATE_NOT_WITHIN_RANGE: 'The date is not within the accepted range',
  APPLY: 'Apply Button Text',
  DAY_TITLE_FREE: (date: any) => `Choose: ${date}`,
  DAY_TITLE_SELECTED: (date: any) => `Selected. ${date}`,
  // This field is optional and will default to the dateFormat
  INPUT_PLACEHOLDER: 'yyyy/MM/dd'
}

Example Usage

import { DateRangePicker } from '@lightspeed/cirrus-datepicker';

const translations = {
  // ...
};

const App = () => {
  const [dates, setDates] = useState(new Date(2019, 6, 21));

  return (
    <DatePicker
      date={date}
      dateFormat="yyyy/MM/dd"
      translations={translations}
      onSubmit={values => {
        console.log(values);
      }}
    />
  );
};

createWeekPreset

Helper function to rapidly generate some presets used in the DateRangePicker.

const lastWeek = createWeekPreset({ label: 'Last week', amountOfWeeks: 1, relativeStart: -1 });
const thisWeek = createWeekPreset({ label: 'This week', amountOfWeeks: 1 });
const nextWeek = createWeekPreset({ label: 'Next week', amountOfWeeks: 1, relativeStart: 1 });

createMonthPreset

Helper function to rapidly generate some presets used in the DateRangePicker.

const lastMonth = createMonthPreset({ label: 'Last month', amountOfMonths: 1, relativeStart: -1 });
const thisMonth = createMonthPreset({ label: 'This month', amountOfMonths: 1 });
const nextMonth = createMonthPreset({ label: 'Next month', amountOfMonths: 1, relativeStart: 1 });

<TimeSelect>

Experimental Component Ahead

Example Usage

import { TimeSelect } from '@lightspeed/cirrus-datepicker';

const App = () => {
  return (
    <TimeSelect
      onChange={nextDate => {
        console.log(nextDate);
      }}
    />
  );
};