@osiris70cl/simple-react-date-picker NPM

Simple React date picker

Simple react date picker is a simple package that allows you to display a calendar and select a date. Currently this package offers 2 different calendars. A single month display calendar and a double month display calendar. The double month display calendar is still a work in progress and should be viable in the coming weeks.

Prerequisites

A node version of 20 or more is required to make this package work.

Importing the different calendars

Prerequisite

As of today, the package is still in it's early days and more over in it's 1+ version; importing the style at the root of your project is necessary.

For exemple in a nextjs 14 app, you can import it in your general layout where you would manipulate the <head>.

import "@osiris70cl/simple-react-date-picker/dist/index.css";

Simple calendar

You can import the compotent in any pages of your app, making sure that they are client side pages. (For nextjs users, that would mean having a component with the "use client").

The <SingleDatePicker/> can be given multiple props.

Please note that all the props are optionnals. Meaning if you want to just display the calendar you can just call the component and not pass it any props.

Please also note that all the exemples in this documentation are being shown for a Nextjs 14 app.

Basic fucntion with just retrieving the selected date

With this method, you just need to call the component and pass it a function that will retrieve the data from the package. Please note that this will send a date type like :

"2024-07-13T14:22:14.428Z"

I higly recommend you to use the dayjs package to transform this date in your wanted format.

"use client";
import { SingleDatePicker } from "@osiris70cl/simple-react-date-picker";

export default function Page = () => {
  const [selectedDate, setSelectedDate] = useState();

  const handleSelectedDate = (date: any) => {
    setSelectedDate(date)
  }

  return (
    <div>
      <SingleDatePicker handleSelectedDate={handleSelectedDate} />
    </div>
  );
};

Retrieving a selected date and selected time period

This calendar also allows you to pass a time period and retrieve that data.

For this you will need to also pass a function to the component. In this exemple I kept the previous function as it made more sense to use both of them.

the data of the time will be returned for exmple as : 00:00 23:59

Please note that the hourSelection set to true is required to be able to display the time inputs.

"use client";
import { SingleDatePicker } from "@osiris70cl/simple-react-date-picker";

export default function Page = () => {
  const [selectedDate, setSelectedDate] = useState();
  const [startHour, setStartHour] = useState<any>();
  const [endHour, setEndHour] = useState<any>();

  const handleSelectedDate = (date: any) => {
    setSelectedDate(date)
  };

  const handleSlectedHours = (startHour: string, endHour: string) => {
    setStartHour(startHour);
    setEndHour(endHour);
   };

  return (
    <div>
      <SingleDatePicker
      handleSelectedDate={handleSelectedDate}
      handleSlectedHours={handleSlectedHours}
      hourSelection={true} />
    </div>
  );
};

Personnalizing the component

One of the core ideas of this package is to allow the user to personnalize the calendar.

That is why no font family, background color is applied to the calendar. The style you see is the default styling but you can modify it if you wish and this is how.

By passing this object, you can personnalize the background colors the buttons, current day and hovers. More freedom in the style will be coming in the futur if you wish.

const initalData = {
  arrow_background: "#1E90FF",
  arrow_color: "#A9A9A9",
  arrow_hover_background: "#B0C4DE",
  current_day_background: "#ff0000",
  day_hover_background: "#0000ff",
  initial_date: "2024-07-01",
  initial_start_hour: "00:00",
  initial_end_hour: "23:59",
  dayjsLocale: "fr", // fr, es, en, de are supported
};

"use client";
import { SingleDatePicker } from "@osiris70cl/simple-react-date-picker";

export default function Page = () => {
  const [selectedDate, setSelectedDate] = useState();
  const [startHour, setStartHour] = useState<any>();
  const [endHour, setEndHour] = useState<any>();


  const handleSelectedDate = (date: any) => {
    setSelectedDate(date)
  };

  const handleSlectedHours = (startHour: string, endHour: string) => {
    setStartHour(startHour);
    setEndHour(endHour);
   };

  return (
    <div>
      <SingleDatePicker
      handleSelectedDate={handleSelectedDate}
      handleSlectedHours={handleSlectedHours}
      hourSelection={true}
      initialData={initalData}
      />
    </div>
  );
};