Modern Date Picker

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

Installation

npm install modern-date-picker-adnan

Usage

Basic Usage

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

<!-- Include the CSS -->
<link rel="stylesheet" href="node_modules/modern-date-picker-adnan/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-adnan/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();

Customization 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 | | width | string | '350px' | Width of the calendar container | | height | string | 'auto' | Height of the calendar container | | colors | object | see below | Custom colors for different calendar elements |

Color Options

The colors object accepts the following properties:

| Color Option | Type | Default | Description | |--------------|------|---------|-------------| | background | string | '#ffffff' | Background color of the calendar | | border | string | '#e0e0e0' | Border color of the calendar | | text | string | '#333333' | Text color | | headerBackground | string | '#f8f9fa' | Background color of the header | | todayBackground | string | '#e3f2fd' | Background color of today's date | | selectedBackground | string | '#2196f3' | Background color of the selected date | | selectedText | string | '#ffffff' | Text color of the selected date | | hoverBackground | string | '#f5f5f5' | Background color on hover | | otherMonthText | string | '#bdbdbd' | Text color for days from other months | | buttonHover | string | '#e3f2fd' | Background color of buttons on hover | | buttonActive | string | '#bbdefb' | Background color of buttons when active |

Example with Customization

const datePicker = new ModernDatePicker({
    container: '#calendar',
    width: '400px',
    height: '500px',
    colors: {
        background: '#f8f9fa',
        border: '#dee2e6',
        text: '#212529',
        headerBackground: '#e9ecef',
        todayBackground: '#cfe2ff',
        selectedBackground: '#0d6efd',
        selectedText: '#ffffff',
        hoverBackground: '#e9ecef',
        otherMonthText: '#adb5bd',
        buttonHover: '#e9ecef',
        buttonActive: '#dee2e6'
    },
    onDateSelect: (date) => {
        console.log('Selected date:', date);
    }
});

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