https://github.com/siddharthborderwala/sassy-datepicker

Beautiful, minimal, accessible and customizable date-picker and time-picker for Reactjs.
https://github.com/siddharthborderwala/sassy-datepicker

datepicker hacktoberfest reactjs timepicker

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/siddharthborderwala/sassy-datepicker
• Owner: siddharthborderwala
• License: mit
• Created: 2021-11-14T07:33:07.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-21T12:54:23.000Z (about 2 years ago)
• Last Synced: 2024-10-07T23:18:25.346Z (3 months ago)
• Topics: datepicker, hacktoberfest, reactjs, timepicker
• Language: TypeScript
• Homepage: https://sassy-datepicker.netlify.app
• Size: 302 KB
• Stars: 56
• Watchers: 1
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


sassy-datepicker


[![npm version](https://badge.fury.io/js/sassy-datepicker.svg)](https://badge.fury.io/js/sassy-datepicker)

[![CI Status](https://github.com/sassy-labs/datepicker/actions/workflows/main.yml/badge.svg)](https://github.com/sassy-labs/datepicker/actions/workflows/main.yml)

[![Maintenance Status](https://badgen.net/badge/maintenance/active/green)](https://github.com/sassy-labs/datepicker#maintenance-status)

[![Bundle Size: Minified + Gzipped](https://img.shields.io/bundlephobia/minzip/[email protected]?color=blue&label=minzip)](https://bundlephobia.com/package/sassy-datepicker)

[![GitHub Issues: Chat With Us](https://badgen.net/badge/issues/chat%20with%20us/blue)](https://github.com/sassy-labs/datepicker/issues)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-blue.svg)](https://github.com/sassy-labs/datepicker/pulls)

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](#contents)

- [Installation and Usage](#installation-and-usage)

  - [Package Installation](#package-installation)

  - [Basic Usage](#basic-usage)

- [Documentation](#documentation)

## Installation and Usage

### Package Installation

```sh

yarn add sassy-datepicker

# or

npm install sassy-datepicker

```

### Basic Usage

The default export from the library is the `DatePicker` component.

```jsx

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 ;

}

function TimeInput() {

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

  const onChange = newTime => {

    console.log(`New time selected - ${newTime}`);

    setTime(newTime);

  };

  return ;

}

```

## Documentation

To view detailed documentation, go to [https://sassy-datepicker.netlify.app](https://sassy-datepicker.netlify.app)



Powered By Netlify