Modern Date Picker

A modern, customizable date picker component that can be easily integrated into any web application.

Installation

npm install modern-date-picker

Usage

Basic Usage

<!-- Add this to your HTML -->
<div id="calendar"></div>

<!-- Include the CSS -->
<link rel="stylesheet" href="node_modules/modern-date-picker/dist/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<!-- Include the JavaScript -->
<script src="node_modules/modern-date-picker/dist/index.js"></script>

// Initialize the date picker
const datePicker = new ModernDatePicker({
    container: '#calendar',
    onDateSelect: (date) => {
        console.log('Selected date:', date);
    }
});

// Get the selected date
const selectedDate = datePicker.getSelectedDate();

// Set a specific date
datePicker.setDate(new Date('2024-03-15'));

// Clean up when done
datePicker.destroy();

Options

The date picker accepts the following options:

| Option | Type | Default | Description | |--------|------|---------|-------------| | container | string | HTMLElement | required | CSS selector or DOM element where the calendar will be rendered | | onDateSelect | function | undefined | Callback function that receives the selected date | | initialDate | Date | new Date() | Initial date to display | | showTodayButton | boolean | true | Whether to show the "Today" button | | showMonthYearSelectors | boolean | true | Whether to show month and year selectors |

Methods

| Method | Description | |--------|-------------| | getSelectedDate() | Returns the currently selected date or null if no date is selected | | setDate(date: Date) | Sets the calendar to display and select a specific date | | destroy() | Removes the calendar and cleans up event listeners |

Styling

The date picker comes with a default style, but you can customize it by overriding the CSS classes:

• .calendar-container - Main container
• .calendar-header - Header section with navigation
• .calendar-weekdays - Weekday labels
• .calendar-grid - Grid containing the days
• .calendar-day - Individual day cells
• .current-month - Days of the current month
• .other-month - Days from adjacent months
• .today - Today's date
• .selected - Selected date

License

MIT