Datelite DatePicker Library Examples

Icon Examples

Default Icon (Right)

With default calendar icon:

No date selected

JavaScript Code

const picker = new DatePicker('#icon-right', {
    // Icon options
    showIcon: true,
    iconPosition: 'right', // default
    
    // Basic options
    mode: 'single',
    format: 'Y-m-d',
    
    // Event callback
    onChange: function(date) {
        console.log('Selected:', date);
    }
});

Icon on Left

Icon positioned left:

No date selected

JavaScript Code

const picker = new DatePicker('#icon-left', {
    showIcon: true,
    iconPosition: 'left', // position on left
    
    mode: 'single',
    format: 'Y-m-d'
});

Custom Icon

Custom calendar icon:

No date selected

JavaScript Code

const picker = new DatePicker('#custom-icon', {
    showIcon: true,
    customIcon: '📅', // emoji or HTML
    
    mode: 'single',
    format: 'Y-m-d'
});

// You can also use HTML/SVG:
// customIcon: '<i class="fas fa-calendar"></i>'

No Icon

Without icon:

No date selected

JavaScript Code

const picker = new DatePicker('#no-icon', {
    showIcon: false, // disable icon
    
    mode: 'single',
    format: 'Y-m-d'
});

Single Date Selection

Basic Single Date

Select a date:

No date selected

With Time Selection

Select date and time:

No date selected

Range Date Selection

Date Range (Auto-close)

Select date range: Closes automatically after selecting both dates

No range selected

JavaScript Code

const rangePicker = new DatePicker('#range-date', {
    mode: 'range', // enable range selection
    format: 'Y-m-d',
    closeOnSelect: true, // auto-close after both dates
    
    onChange: function(dateRange) {
        if (dateRange.start && dateRange.end) {
            console.log('Range:', dateRange.start, 'to', dateRange.end);
        }
    }
});

Range with Confirmation

Range with Apply/Cancel:

No range selected

JavaScript Code

const confirmPicker = new DatePicker('#range-confirm', {
    mode: 'range',
    confirmRange: true, // show Apply/Cancel buttons
    applyButtonText: 'Apply',
    cancelButtonText: 'Cancel',
    
    onChange: function(dateRange) {
        // Only fires when Apply is clicked
        console.log('Confirmed range:', dateRange);
    }
});

Custom Button Text

Custom Apply/Cancel text:

No range selected

JavaScript Code

const customPicker = new DatePicker('#range-custom-buttons', {
    mode: 'range',
    confirmRange: true,
    applyButtonText: 'Confirm Selection', // custom text
    cancelButtonText: 'Reset', // custom text
    
    onChange: function(dateRange) {
        console.log('Custom range:', dateRange);
    }
});

Multiple Date Selection

Multiple Dates

Select multiple dates:

No dates selected

Inline Calendar

Always Visible

No date selected

With Restrictions

No date selected

Month/Year Dropdown Examples

Both Dropdowns

Month & Year dropdowns:

Month Dropdown Only

Month dropdown only:

Year Dropdown Only

Year dropdown only:

Limited Year Range

Limited years (2020-2030):

Icon Control API

Dynamic Icon Control

Icon Control Demo:

Use buttons to control icon behavior

Date Blocking Examples

Block Weekends

Weekends disabled:

No date selected

Block Past Dates

Past dates blocked:

No date selected

Block Specific Dates

Holidays blocked:

No date selected

Block Date Ranges

Vacation periods blocked:

No date selected

Only Specific Days Allowed

Only certain dates allowed:

No date selected

Custom Block Function

Custom logic (no Fridays):

No date selected

Positioning Examples

Append to Body

Appended to body:

No date selected

Fixed Position (X: 100, Y: 200)

Fixed coordinates:

No date selected

JavaScript Code

const fixedPicker = new DatePicker('#fixed-position', {
    mode: 'single',
    
    // Fixed positioning
    positionX: 100, // 100px from left
    positionY: 200, // 200px from top
    
    format: 'Y-m-d'
});

// Dynamic positioning
fixedPicker.setPosition(300, 400); // change position
fixedPicker.resetPosition(); // back to auto

Custom Container

Append to custom div:

Custom Container (datepicker will appear here)

No date selected

Custom Container

Append to custom div:

Custom Container (datepicker will appear here)

No date selected

With Offset (X: +50, Y: +20)

Position with offset:

No date selected

CSS Customization Examples

Green Theme

Custom green theme:

No date selected

CSS Customization

/* CSS Variables Override */
.datepicker-container.green-theme {
  --dp-primary-color: #28a745;
  --dp-primary-hover: #218838;
  --dp-primary-light: #d4edda;
  --dp-border-focus: #28a745;
}

/* JavaScript */
const picker = new DatePicker('#green-theme', {
  theme: 'green-theme'
});

Purple Theme

Custom purple theme:

No date selected

CSS Variables

.datepicker-container.purple-theme {
  --dp-primary-color: #6f42c1;
  --dp-primary-hover: #5a32a3;
  --dp-primary-light: #e2d9f3;
}

/* Available Variables: */
/* --dp-day-size: 36px */
/* --dp-border-radius-md: 6px */
/* --dp-font-size-base: 14px */
/* --dp-spacing-lg: 16px */

Large Size Theme

Larger components:

No date selected

Size Customization

.datepicker-container.large-theme {
  --dp-day-size: 48px;
  --dp-button-height: 40px;
  --dp-font-size-base: 16px;
  --dp-font-size-lg: 18px;
  --dp-container-min-width: 320px;
}

/* All 50+ CSS variables available for customization */

Position Control API

Dynamic Position Control

Position Control Demo:

Use buttons to control positioning

Date Blocking Control API

Dynamic Date Blocking Control

Blocking Control Demo:

Use buttons to control date blocking

Range Confirmation Control API

Dynamic Range Confirmation Control

Range Control Demo:

Use buttons to control range confirmation

Dropdown Control API

Dynamic Dropdown Control

Dropdown Control Demo:

API Methods Demonstration

Programmatic Control

API Demo Input:

Use the buttons above to test API methods