React-select-date NPM

react-select-date

A React Calendar that consists of between single-date, multiple-date, range and slots booking features.Purely date calculated from JavaScript Date Object.

Live Demo: https://stoic-shirley-7fca42.netlify.app

Range and Multiple select

npm.io

Single and Duel slots

npm.io

Customizable DateField

npm.io

Getting Started

Installation

Run npm i react-select-date

Usage

`SingelDate`

import Calendar from "react-select-date";

function MyComponent() {
  return (
      <Calendar 
        onSelect={(date) => console.log(date)}
      />
  );
}

export default MyComponent;

`DateRange`

import Calendar from "react-select-date";

function MyComponent() {
  return (
      <Calendar 
        onSelect={(date) => console.log(date)}
        selectDateType="range"
        // select-date color
        templateClr="blue"
      />
  );
}

export default MyComponent;

`Multiple With DuelSlots`

import Calendar from "react-select-date";

function MyComponent() {
  const duelSlotDates = [
      { date: "2021-07-02", totalSlot: "30", avaliableSlot: "4" },
      { date: "2021-07-10", totalSlot: "30", avaliableSlot: "5" },
      { date: "2021-7-15", totalSlot: "280", avaliableSlot: "160" },
      { date: "2021-07-07", totalSlot: "30", avaliableSlot: "14" },
    ]
  return (
      <Calendar
        onSelect={(date) => console.log(date)}
        selectDateType="multiple"
        duelSlotDates={duelSlotDates}
      />
  );
}

export default MyComponent;

Options

Property	type	Default Value	Description
selectDateType	String	single	defines the selection type of single,multiple or range
onSelect	Func		callback function for returns the selected date
singleSlotDates	*Object[]	[]	defines the avilable slots
duelSlotDates	*Object[]	[]	defines the avilable and total slots
templateClr	String	green	defines the selecte date color(green or blue)
disableCertainDates	*Object[]	[]	disables the specific dates
disableDates	String		disables the past or future dates
disableDays	*Object[]	[]	disables the day
minDate	String/Date Object		defines minimum date. Disabled earlier dates
maxDate	String/Date Object		defines maximam date. Disabled later dates
slotInfo	Boolean	true	show/hide visibility of slotInfo
showDatelabel	Boolean	false	show/hide visibility of label for date input
showDateInputField	Boolean	true	show/hide visibility of date input
showSelectMonthArrow	Boolean	false	whether month select field can be editable and visibility of arrow
showSelectYearArrow	Boolean	false	whether year select field can be editable and visibility of arrow
showArrow	Boolean	true	show/hide visibility of left arrow and right arrow

Default value

Property	type	Example	Description
defaultValue(Single)	Object	{ date: "2021-9-9" }	defines the default value for single select
defaultValue(Multiple)	Array	"2021-8-15", "2021-08-01", "2021-08-20"	defines the default value for multiple select
defaultValue(Range)	Object	{ startDate: "2021-8-15", endDate: "2021-8-20" }	defines the default value for range select

About Calendar

This Calendar was developed using Hooks and Javascript date object without any dependencies. The calendar has options where users can choose between single-date, multiple-date, range and slots booking features.

Single-Date Select

The single-date selection is a fully controlled component that allows users to select a single date from the calendar table. The user can select the date from date-input after entering the valid date. On click of the Enter button inside the respective field or when focus is moved, it will trigger the selectDate Func. The date-input field will throw an error message if the date is not valid.The slotInfo props shows the colors of selected-Date and disabled-Date.

Multiple-Date Select

The multiple Date selection is a fully controlled component that allows users to select multiple dates. The functionality is same as single-date to select the dates.

DateRange

The dateRange is a fully controlled component that allows users to select a date range. The user can select the date range from either the date-input field or the calendar table. Selected dates can be controlled using onSelect props. The DateRange also manages internal state for partial dates that are manually entered(Although onSelect will not trigger until a date has been filled completely. In that case, date-input field will throw an error message if the date is not valid).

Slots

Slots booking is a fully controlled component that allows users to view the avilable and total slots. In slots booking, the user can change the type of selection through selectDateType props. The user can display only avilable slots by sending singleSlotDates value, In order to view avilable slots and total slots the user needs to send duelSlotDates value(It should be noted that user cannot send both the singleSlotDates and duelSlotDates at the same time).

// example slots values
singleSlotDates = {[ { date: "2021-07-03", avaliableSlot: "7" } ]}
duelSlotDates = {[ { date: "2021-07-02", totalSlot: "30", avaliableSlot: "4" } ]}

Overriding styles

Feel free to override the styles, can customize the calendar styles as you expect.

// Few Example:

// to change the disable number style
.cld_container .cld_disableDate{
  color: red;
}

// to change the selected date style
// if using templateClr = blue replace the "cld_greenHighlight" classname to "cld_blueHighlight"
.cld_container .cld_greenHighlight{
   background-color: #ff8100; 
}

// to change the selected disable date style
.cld_container .cld_disablebgColor{
   color: #ffffff;
   background: #ff9595;
}

// to change the calender background style
#root .cld_container{
  background-color: #fafad2;
}