Package Exports

ez-date-range-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ez-date-range-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Another datepicker lib, yeah, but its a lot simpler.

You can try it here https://ezdatepicker.netlify.app/

Features

Easy control of the selectable range
Doesn't come with default input, so you get to make your own
Its just a calendar, so place anywhere you want
You can rename the month and weekdays easily

Installing

npm install ez-date-range-picker

yarn add ez-date-range-picker

Usage

import { DateRangePicker } from 'ez-date-range-picker';

function Home(){
  const [first, setFirst] = useState(undefined);
  const [last, setLast] = useState(undefined);
  const startDate = new Date()
  const limitDate = new Date('3-01-2022');
   return (
      <DateRangePicker
          first={first}
          last={last}  
          startDate={startDate}  
          limitDate={limitDate}  
          onFirstDateSelected={(date) => setFirst(date)} 
          onLastDateSelected={(date) => setLast(date)} 
          onRequestClose={() => alert('Requested Close')}
          onSelectionComplete={() => alert('Selected !')}  
          visible={true} 
          multiple={true}
        />
   )
  
}

Props explanation

 <DateRangePicker

  first={first} 
  // Must be a date

  last={last}   
  // Must be a date

  startDate={startDate}  
  // The first day that can be selected (optional)

  limitDate={limitDate}  
  // The last day that can be selected (optional)

  onFirstDateSelected={(date) => setFirst(date)} 
  // Callback when the day is clicked, you receive the date clicked 

  onLastDateSelected={(date) => setLast(date)} 
  // Callback when the day is clicked, you receive the date clicked

  onRequestClose={() => alert('Requested Close')} 
  // Callback when the user clicks outside the calendar

  onSelectionComplete={() => alert('Selected !')}  
  // Callback when the user picked both dates

  visible={true} // Diplay block or none

  multiple={true} // Diplay two calendars instead of one
  />

Some others props

 <DateRangePicker 
     weekdaysName={['周一', '周二', '周三', '周四', '周五', '周六', '星期日']}
     monthsName={["Jan", "February", "any name"]}
 />

These props allows you to rename the weekdays and month names. Just make sure you provide 7 days name, and 12 month names (/ω＼)

Customizing css

You can change some css by passing some props

 <DateRangePicker 
     customStyles={{
       HeaderContainer: {
         backgroundColor: 'pink',
       },
       ColorPallet: {
         BackgroundColor: {
           firstSelected: 'pink',
           lastSelected: 'green',
           between: "red"
         },
         BackgroundHoverColor: {
           allowed: "pink"
         }
       },
     }}
 />

ColorPallet props can only receive the new color value, but the components container can receive any valid css property.