datepickerfromscratch

A custom date picker component for React applications, built with Vite and TypeScript.

Installation

Install the package using npm:

  npm i datepickerfromscratch

Usage

Import the DatePicker component and its stylesheet in your React application:

  import { useState } from 'react';
  import { DatePicker } from 'datepickerfromscratch';
  import 'datepickerfromscratch/style.css';

Then, in the same folder than the file where you call the component DatePicker, create a file named datepickerfromscratch.d.ts containing:

declare module 'datepickerfromscratch';

And you are set!

Example usage in a component:

  function App() {
    const [selectedDate, setSelectedDate] = useState(null);

    const handleDateChange = (date) => {
      setSelectedDate(date);
    };

    return (
      <DatePicker
        id="my-datepicker"
        selectedDate={selectedDate}
        onChange={handleDateChange}
      />
    );
  }

  export default App;

Set the selectedDate state to control the date picker and use the onChange handler to receive the selected date.

Props

Name	Type	Required	Description
id	string	Yes	Unique identifier for the date picker.
selectedDate	Date	No	The currently selected date.
onChange	function	Yes	Callback function when the date is changed.
..............	..........	........	...........................................

Dependencies

This component does not require any additional dependencies to be installed by the library user.

Dependencies

Documentation is available in /out/global.html