Skip to content

Beautiful, minimal, accessible and customizable date-picker and time-picker for Reactjs.


Notifications You must be signed in to change notification settings


Repository files navigation


npm version CI Status Maintenance Status Bundle Size: Minified + Gzipped GitHub Issues: Chat With Us PRs Welcome

Beautiful, minimal, customizable and accessible date-picker and time-picker for react.

Sassy DatePicker Snapshot

Why use sassy-datepicker?

  • Beautiful picker
  • Smooth and slick transitions
  • Simple and Easy to Use
  • Fully Customizable
  • First Class Accessibility
  • Small bundle size
  • Extremely Performant


Installation and Usage

Package Installation

yarn add sassy-datepicker
# or
npm install sassy-datepicker

Basic Usage

The default export from the library is the DatePicker component.

import { useState } from 'react';
import DatePicker, { TimePicker } from 'sassy-datepicker';
import 'sassy-datepicker/dist/styles.css';

function DateInput() {
  const [date, setDate] = useState(new Date());

  const onChange = newDate => {
    console.log(`New date selected - ${newDate.toString()}`);

  return <DatePicker onChange={onChange} value={date} />;

function TimeInput() {
  const [time, setTime] = useState({ hours: 15, minutes: 30 });

  const onChange = newTime => {
    console.log(`New time selected - ${newTime}`);

  return <TimePicker onChange={onChange} value={time} />;


To view detailed documentation, go to

Powered By Netlify Netlify