@nayojs/react-datetime-picker NPM

React DateTime Picker

Overview

React DateTime Picker is a robust and highly customizable date-time picker library for React applications. This component offers seamless integration with various UI designs, allowing developers to choose from a wide range of styling options or apply custom styles to match their projects' specific requirements.

datetime-picker

Installation

To install the library, use npm:

npm install @nayojs/react-datetime-picker

Features

Date Selection: Easily select dates using the intuitive date picker interface.
Time Selection: Includes a time picker for selecting specific hours and minutes.
Calendar View: Displays a fully interactive calendar for navigating through months and years.
Customizable Styles: Override default styles with ease using CSS classes or a utility function for merging styles.

Components

1. DatePicker

The DatePicker component combines the functionality of a calendar and time picker into a single component. It can be customized with styles and classes that are passed down to the Calendar and TimePicker components.

2. Calendar

The Calendar component provides a visual representation of a calendar where users can select a date. It is fully customizable, allowing developers to define the appearance of various parts of the calendar.

3. TimePicker

The TimePicker component allows users to select a specific time. Like the Calendar, it is highly customizable, with various style options for different elements.

Usage

DatePicker Example

Here’s a basic example of how to use the DatePicker component:

import React from 'react';
import { DatePicker } from '@nayojs/react-datetime-picker';

function App() {
  const selectDateHandler = (date) => {
    console.log('Selected Date:', date);
  };

  const selectTimeHandler = (time) => {
    console.log('Selected Time:', time);
  };

  return (
    <div>
      <Calendar selectDateHandler={selectDateHandler} selectTimeHandler={selectTimeHandler}/>
    </div>
  );
}

export default App;

Calendar Example

To use the Calendar component independently:

import React from 'react';
import { Calendar } from '@nayojs/react-datetime-picker';

function App() {
  const selectDateHandler = (date) => {
    console.log('Selected Date:', date);
  };

  return (
    <div>
      <Calendar selectDateHandler={selectDateHandler} />
    </div>
  );
}

export default App;

TimePicker Example

To use the TimePicker component independently:

import React from 'react';
import { TimePicker } from '@nayojs/react-datetime-picker';

function App() {
  const selectTimeHandler = (time) => {
    console.log('Selected Time:', time);
  };

  return (
    <div>
      <TimePicker selectTimeHandler={selectTimeHandler} />
    </div>
  );
}

export default App;

Custom Styling

The DatePicker, Calendar, and TimePicker components come with default styles, but you can easily override them by passing custom class names or styles.

Example: Custom Styles for DatePicker

import React from 'react';
import { DatePicker } from '@nayojs/react-datetime-picker';

function App() {
  const selectDateHandler = (date) => {
    console.log('Selected Date:', date);
  };

  return (
    <div>
      <DatePicker
        selectDateHandler={selectDateHandler}
        datePickerStyles={{
          containerStyles: { width: '300px' },
          triggerStyles: { padding: '10px', backgroundColor: '#f0f0f0' },
        }}
        calendarStyles={{
          containerStyles: { backgroundColor: '#fff' },
          dateStyles: { color: '#333' },
          selectedDateStyles: { backgroundColor: '#1A71FF', color: 'white' },
        }}
      />
    </div>
  );
}

export default App;

Style Prop Options

For each component, you can override specific style classes and styles:

DatePicker
- containerClass: Styles the main container of the date picker.
- triggerClass: Styles the trigger button/input.
- calendarClasses: Classes passed down to the Calendar component.
- calendarStyles: Styles passed down to the Calendar component.
Calendar
- containerClass: Styles the main container of the calendar.
- headerClass: Styles the header of the calendar.
- dateClass: Styles individual date cells.
- selectedDateClass: Styles the selected date.
- navigatorClass: Styles the navigation buttons.
TimePicker
- containerClass: Styles the main container of the time picker.
- triggerClass: Styles the trigger button/input.
- timeContainerClass: Styles the time selection container.
- timeItemClass: Styles each time option.
- selectedTimeItemClass: Styles the selected time option.

Default Styles

The library provides default styles for all components. If you do not override these styles, the components will use the following defaults:

Advanced Usage

Overriding Default Styles with Helper Function

To ensure that overriding a specific style doesn’t remove other default styles, use the mergeStyles utility function:

import React from 'react';
import { DatePicker, mergeStyles } from '@nayojs/react-datetime-picker';

const customStyles = mergeStyles({
  nayojsDatetimePickerContainer: 'background-color: blue;',
});

function App() {
  const selectDateHandler = (date) => {
    console.log('Selected Date:', date);
  };

  return (
    <div>
      <DatePicker
        selectDateHandler={selectDateHandler}
        datePickerStyles={customStyles}
      />
    </div>
  );
}

export default App;