Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-horizontal-strip-datepicker

Shavron1.2kMIT3.0.2

react horizontal strip datepicker

react, react date-picker, horizontal-datepicker, scrollable datepicker, horizontal-calender, web, whatsapp

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