fmcalado/datepicker

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

sassy-datepicker

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

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

Contents

• Contents
• Installation and Usage
  • Package Installation
  • Basic Usage
• Documentation

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

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

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

Documentation

To view detailed documentation, go to https://sassy-datepicker.siddharthborderwala.com