react-horizontal-strip-datepicker

react horizontal strip datepicker

Usage no npm install needed!

<script type="module">
  import reactHorizontalStripDatepicker from 'https://cdn.skypack.dev/react-horizontal-strip-datepicker';
</script>

README

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

react-horizontal-strip-datepicker

A stable horizontal date picker with the option to scroll for web Example

Installation

Run yarn add react-horizontal-strip-datepicker

Usage

Import:

import ReactHorizontalDatePicker from "react-horizontal-strip-datepicker";

and use as:

<ReactHorizontalDatePicker
  selectedDay={onSelectedDay}
  enableScroll={true}
  enableDays={80}
/>

Available Props are

Prop Type Default Description
enableScroll Boolean false Set List to be scrollable
selectedDay Function Function to get the selected Day
enableDays Number 90 Number of days to render from current date

enableDays has no effect if enableScroll is true.

Example:

import React from 'react'

import ReactHorizontalDatePicker from 'react-horizontal-strip-datepicker'
import 'react-horizontal-strip-datepicker/dist/ReactHorizontalDatePicker.css'

const App = () => {
  const onSelectedDay = (d) => {
    console.log(d)
  }

  return (
    <ReactHorizontalDatePicker
      selectedDay={onSelectedDay}
      enableScroll={true}
      enableDays={180}
    />
  )
}

export default App