Discontinued

This package is not actively developed and contains no security updates. As it may be used in projects I'll leave it here. You should not use this package in any production app.

react-sharp-datepicker

Tiny datepicker for React(-js), currently uses moment to format dates. Will be removed when ready. No nonsense datepicker to keep development up-to-speed.

With this datepicker you can:

1. let a user type a date manually (with validation)
2. let a user select one from the popover
3. let a user pick a date-range
4. disable certain dates
5. disable all dates before a certain date
6. disable all dates after a certain date
7. clear a selected date

Please star if you like this software... :)

Prerequisites:

1. React, Babel
2. Moment (TODO: remove)

Installation:

npm i -S react-sharp-datepicker

Usage:

Most basic datepicker: (month and date are Date instances in the local state)

const {
    month,
    date,
} = this.state;

<DatePicker
    selectedDate={date}
    selectedMonth={month}
    onSelectDate={(newDate: Date) => {
      this.setState({ date: newDate });
    }}
    onSelectMonth={(newMonth: Date) => {
      this.setState({ month: newMonth });
    }}
/>

Most basic date-range-picker:

const {
    month,
    selectedStartDate,
    selectedEndDate,
} = this.state;

<DatePicker
    key="start-date"
    selectedDate={selectedStartDate}
    selectedStartDate={selectedStartDate}
    selectedEndDate={selectedEndDate}
    selectedMonth={month}
    onSelectDate={(date: Date) => {
      this.setState({ selectedStartDate: date });
    }}
    onSelectMonth={(newMonth: Date) => {
      this.setState({ month: newMonth });
    }}
/>
<DatePicker
    key="end-date"
    selectedDate={selectedEndDate}
    selectedStartDate={selectedStartDate}
    selectedEndDate={selectedEndDate}
    selectedMonth={month}
    onSelectDate={(date: Date) => {
      this.setState({ selectedStartDate: date });
    }}
    onSelectMonth={(newMonth: Date) => {
      this.setState({ month: newMonth });
    }}
/>

Please note that the first picker uses the selectedStartDate as the selectedDate property and the second uses selectedEndDate.

Properties:

DatePicker exposes the following properties for you to set:

locale: string
# Controls the display of the name of the month and the days of the week in the popover.
# defaults to: 'en-US'

placeholder: string
# Displays a placeholder when input is empty.
# defaults to 'dd-mm-yyyy'

format: string
# The format to use for input text.
# defaults to 'DD-MM-YYYY'

selectedDate: Date
# The currently selected date (the result).

onSelectDate: (date: Date) => void
# Callback, called when a date get's selected or a date has been parsed
# from input.

selectedMonth: Date
# The currently selected month (and year) in the popover.

onSelectMonth: (date: Date) => void
# Callback, called when user switches month or year in the popover.

enabledDates: Date[],
# Array of Date instances; all other Dates will be disabled.

disabledDates: Date[]
# Array of Date instances; these Dates will be disabled.

disableDatesBefore: Date
# All dates before the supplied date will be disabled.

disableDatesAfter: Date
# All dates after the supplied date will be disabled.

selectedStartDate: Date
# Use this one in a date-range picker, contains the selected start date.

selectedEndDate: Date
# Use this one in a date-range picker, contains the selected end date.

panelPosition: {
 horizontal: 'auto' | 'before' | 'inside-min' | 'center' | 'inside-max' | 'after',
 vertical: 'auto' | 'before' | 'inside-min' | 'center' | 'inside-max' | 'after'
}
# With the panel position you can force the panel to open in a position
# relative to the button.
# When set to auto, the DatePicker will calculate optimal position
# to keep the popover inside the parent.
# Defaults to 'auto' for both horizontal and vertical.

leadingContent: React.Node
# Optionally set content inside the DatePicker button, before the input.
# Could come in handy if you would want to place an icon or a label inside the button.

nextFocusable: () => React.Ref
# Optionally set a callback returning a  React ref to receive focus after date input.

icons: {
    calendarIcon: React.Node,
    validIcon: React.Node,
    invalidIcon: React.Node
}
# Override the default calendar, valid and invalid icons.

iconColors: {
  calendarIconColor: string,
  validIconColor: string,
  invalidIconColor: string
}
# Override the icon colors. (Could be done via css-styling using fill also)

style: {[key: string]: mixed}
# Basic style object to override css-style on the wrapper directly.

className: string
# Optionally set additional classNames on the wrapper.

Styling

See stylesheet below for all of the stylable properties:

/* Upper-most class */
.sharp-date-picker-wrapper {
}

/* Main button */
.sharp-date-picker-button {
}
.sharp-date-picker-button.open {
}

/* Main button input */
.sharp-date-picker-button input {
}
.sharp-date-picker-button input:focus {
}

/* Popover */
.sharp-date-picker-popover {
}

/* Popover => Year and Month selectors */
.sharp-year-selector {
}
.sharp-month-selector {
}

/* Year/Month => previous and next button */
.sharp-spinner-button {
}
.sharp-spinner-button:focus {
}
.sharp-spinner-button:active {
}

/* Year/Month => labels */
.sharp-year {
}
.sharp-month {
}

/* Popover => Days row */
.sharp-days-row {
}

/* Popover => Day */
.sharp-day {
}
/* Day => disabled variants */
.sharp-day.next-or-previous-month {
}
.sharp-day.excluded-date {
}
.sharp-day.disabled-date {
}

/* Day => current Date */
.sharp-day.today {
}

/* Day => selection variants */
.sharp-day.selected-start-date {
}
.sharp-day.selected-end-date {
}
.sharp-day.selected-in-between-date {
}

/* Day => control border radius for first and last range selections */
.sharp-day.selected-start-date.has-end-date {
}
.sharp-day.selected-end-date.has-start-date {
}