react-ease-picker

react-ease-picker

DatePicker and RangePicker base on easepick.

How to Use

Step 1.

npm i react-ease-picker

Step 2.

import { DatePicker, RangePicker } from "react-ease-picker";

function App() {
  return (
    <>
      <DatePicker
        onSelect={(date) => {
          console.log(date);
        }}
      />
      <RangePicker
        minDate="2020-01-01"
        maxDate="2023-01-01"
        onSelect={(start, end) => {
          console.log(start, end);
        }}
        presets={[
          {
            label: "Last Week",
            startDate: "2022-01-01",
            endDate: "2023-01-01",
          },
          {
            label: "Last Month",
            startDate: "2021-01-01",
            endDate: "2023-01-01",
          },
        ]}
        position="right"
      />
    </>
  );
}

export default App;

Props

type CommonProps = {
  className?: string;
  minDate?: string;
  maxDate?: string;
  format?: string;
  placeholder?: string;
  position?: "left" | "right";
  resetButton?: boolean;
  weekNumbers?: boolean;
  firstDay?: number;
  lang?: string;
  scrollToDate?: boolean;
  documentClick?: boolean | (() => void);
  autoApply?: boolean;
  locale?: {
    cancel?: string;
    apply?: string;
  };
  offsetTop?: number;
  offsetLeft?: number;
  grid?: number;
  calendars?: number;
  css?: string;
  testId?: string;
  options?: EasePickOptions;
  defaultOptions?: EasePickOptions;
  setup?: EasePickOptions["setup"];
};

export type DatePickerProps = CommonProps & {
  date?: string;
  onSelect: (date: string) => void;
};

export type RangePickerPreset = {
  label: string;
  startDate?: string;
  endDate?: string;
};

export type RangePickerProps = CommonProps & {
  startDate?: string;
  endDate?: string;
  onSelect: (start: string, end: string) => void;
  presets?: RangePickerPreset[];
  presetPosition?: "left" | "right" | "top" | "bottom";
  daysLocale?: {
    one?: string;
    two?: string;
    few?: string;
    many?: string;
    other?: string;
  };
};

Customize

:root {
  --ease-color-bg-default: #fff;
  --ease-color-bg-secondary: #f2f5f8;
  --ease-color-fg-default: #1e293b;
  --ease-color-fg-primary: #2e6fda;
  --ease-color-fg-secondary: #64748b;
  --ease-color-fg-selected: #fff;
  --ease-color-fg-muted: #64748b;
  --ease-color-fg-accent: #e63757;
  --ease-color-btn-primary-bg: #2e6fda;
  --ease-color-btn-primary-fg: #fff;
  --ease-color-btn-primary-border: #2e6fda;
  --ease-color-btn-primary-hover-bg: #2c67cd;
  --ease-color-btn-primary-hover-fg: #fff;
  --ease-color-btn-primary-hover-border: #2c67cd;
  --ease-color-btn-primary-disabled-bg: #80aff8;
  --ease-color-btn-primary-disabled-fg: #fff;
  --ease-color-btn-primary-disabled-border: #80aff8;
  --ease-color-btn-secondary-bg: #fff;
  --ease-color-btn-secondary-fg: #475569;
  --ease-color-btn-secondary-border: #cbd5e1;
  --ease-color-btn-secondary-hover-bg: #f8fafc;
  --ease-color-btn-secondary-hover-fg: #475569;
  --ease-color-btn-secondary-hover-border: #cbd5e1;
  --ease-color-btn-secondary-disabled-bg: #cbd5e1;
  --ease-color-btn-secondary-disabled-fg: #fff;
  --ease-color-btn-secondary-disabled-border: #cbd5e1;
  --ease-color-border-default: #cbd5e1;
  --ease-color-border-locked: #f9f9f9;
  --ease-day-width: 43px;
  --ease-day-height: 37px;
  --ease-z-index: 40;
  --ease-border-radius: 2px;
  --ease-primary-color: #2e6fda;
  --ease-secondary-color: #64748b;
  --ease-font-family: inherit;
  --ease-box-shadow: 0 4px 28px 0 rgb(0 0 0 / 12%);
  --ease-month-name-font-weight: 700;
  --ease-focus-color: #94a3b8;
  --ease-select-outline-color: #e5e7eb;
  --ease-color-fg-locked: #9e9e9e;
  --ease-color-bg-locked: #ffab91;
  --ease-color-bg-unavailable: #f9f9f9;
  --ease-color-bg-inrange: #e6effe;
  --ease-color-bg-tooltip: #fff;
  --ease-color-fg-tooltip: #1e293b;
}