Lightweight Accessible Date Picker For React – sassy-datepicker

sassy-datepicker is a lightweight, customizable, accessible, and beautiful date picker component for React.

How to use it:

1. Install and import the sassy-datepicker.

# Yarn
$ yarn add sassy-datepicker

# NPM
$ npm i sassy-datepicker

import { useState } from 'react';
import DatePicker from 'sassy-datepicker';

2. Add the date picker to the app.

function Example() {
  const [date, setDate] = useState(new Date());
  const onChange = newDate => {
    console.log(`New date selected - ${newDate.toString()}`);
    setDate(newDate);
  };
  return <DatePicker onChange={onChange} selected={date} />;
}

3. Available component props.

/**
 * This function is called when the selected date is changed.
 */
onChange?: (date: Date) => void;
/**
 * The selected date.
 */
selected?: Date;
/**
 * The minimum date that can be selected (inclusive).
 */
minDate?: Date;
/**
 * The maximum date that can be selected (inclusive).
 */
maxDate?: Date;

Preview:

Download Details:

Author: sassy-labs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/sassy-labs/datepicker#example

License: MIT