s3d-react-datepicker v0.1.3

React DatePicker Component

A React implementation of the jQuery UI DateTimePicker plugin.

Overview

DatePicker is a React component for selecting dates, inspired by the jQuery UI DateTimePicker plugin. It provides a user-friendly interface for choosing dates with various configuration options.

Features

• Interactive calendar for date selection.
• Month and year dropdowns for easy navigation.
• Customizable date format and language/locale.
• Support for minimum and maximum selectable dates.
• Right-to-left display option.
• Callback function for handling date changes.

Installation

To install the DatePicker component in your React project, use the following command:

npm install s3d-react-datepicker

Usage

Import the DatePicker component into your React application:

import DatePicker from 's3d-react-datepicker';

Use the component in your JSX:

const YourComponent = () => {
    return (
        <div>
            <h1>My App</h1>
            <DatePicker />
        </div>
    );
};

Props

Examples

// Basic usage without optional props
<Datepicker />

// Using the optional 'name' prop for form association
<Datepicker name="eventDate" />

// Associating 'id' for accessibility with a label
<label htmlFor="birthdate">Birthdate :</label>
<Datepicker id="birthdate" />

// Providing 'options' for custom configuration
<Datepicker options={{ format: 'DD/MM/YYYY' }} />

// Using 'ref' to access Datepicker functions programmatically
const datepickerRef = useRef();
<Datepicker ref={datepickerRef}

// Using the 'onChange' prop to log the selected date to the console
<DatePicker onChange={(date) => {console.log('Selected date:', date?.format('DD/MM/YYYY'));}}/>

Exposed Functions

The Datepicker component exposes the following functions through the ref prop :

• resetDatePicker() : Resets the date picker to its initial state.

Options

The options prop allows you to configure the behavior of the DateTimePicker component. Here are some key options:

Style Customization

The DatePicker component provides flexibility in customizing its appearance through the styles option. You can customize different parts of the DatePicker component using either of the following approaches:

1. Using CSS Class

   You can provide the name of a CSS class to override or add new styles.

2. Using Object Style

   Alternatively, you can provide an object containing specific CSS properties to apply styles directly. This allows you to define individual styles for different elements of the DatePicker.

Available Style Options

Note :

The class name approach can be used to easily redefine specific CSS variables within the datepickerContainer. The following variables can be overridden

Example for Style Customization

To customize the style of the DatePicker, you can pass an object of styles as part of the options :

   /* custom.css file */
   .custom-datepickerContainer {
       /* override DatePicker variable */
       --s3d-dp--color-background: #f0f0f0;
       border-radius: 10px;       
   }
   
   .custom-menu-dropdown-style {
       padding: 10px;
   }
   
    /* ... other custom styles ... */

import "./custom.css";
import React, { useRef } from "react";
import DatePicker from "s3d-react-datepicker";

const App = () => {
    
    const customStyles = {
        inputField: { height: 40 },
        datepickerContainer: "custom-datepickerContainer",
        navigationSection: { background: "lightblue" },
        dropdownContainer: "custom-menu-dropdown-style",
        weekdaysHeader: { fontWeight: "bold" },
        daysGrid: { color: "green" },
    };

    return (
        <div>
            <h1>My App</h1>
            <DatePicker options={{ styles: customStyles }} />
        </div>
    );
};

export default App;

License

This DateTimePicker component is open-source and available under the MIT License.