https://github.com/faustienf/datepicker

📅 Make your DatePicker from calendar-components
https://github.com/faustienf/datepicker

datepicker daterange daterange-picker react react-date-picker react-date-range typescript

Last synced: about 1 month ago
JSON representation

📅 Make your DatePicker from calendar-components

• Host: GitHub
• URL: https://github.com/faustienf/datepicker
• Owner: faustienf
• License: mit
• Created: 2021-11-26T21:57:41.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-23T20:18:12.000Z (about 4 years ago)
• Last Synced: 2025-03-21T16:21:19.149Z (about 1 year ago)
• Topics: datepicker, daterange, daterange-picker, react, react-date-picker, react-date-range, typescript
• Language: TypeScript
• Homepage:
• Size: 1.46 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[](https://faustienf.github.io/datepicker/?path=/story/datepicker-range--default)

# ⚛️ Modular DatePicker

Make your DatePicker from calendar-components 📅 [Demo](https://faustienf.github.io/datepicker/?path=/story/datepicker-range--default)

## Usage

#### Simple datepicker

```js

// write a facade-component

const DatepickerSimple: FC = (props) => {

  const {

    selected = 0 as Timestamp,

    onSelect,

  } = props;

  // use hooks for manage states, e.g. switching a month

  const {

    currentMonthTimestamp,

    onPrevMonth,

    onNextMonth,

  } = useCalendarMonth(selected || Date.now() as Timestamp);

  return (

    

      {(dayTimestamp) => (

         onSelect(dayTimestamp)}

        >

          {/* display a date */}

          {(new Date(dayTimestamp)).getDate()}

        

      )}

    

  );

};

```

#### Datepicker with 2 calendars

```js

const BigDatepicker: FC = () => {

  ...

  return (

    <>

      {/* 1st calendar */}

      

        ...

      

      {/* 2nd calendar */}

      

        ...

      

    >

  );

};

```

## License

MIT