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 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()}`);
  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;


Lightweight Accessible Date Picker For React

Download Details:

Author: sassy-labs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

Add Comment