Overview

Our date picker widget offers the following features:

Display Options

• Flexible input methods: Choose between calendar view, text-only entry, or both
• Password field option for secure date input
• Custom static text display at the bottom of the calendar
• Current date highlighting with customizable colors

Date Selection Control

• Disable specific dates to prevent selection
• Define included dates to limit selection to specific dates only
• Custom highlighting for included/excluded dates

Advanced Features

• Apply custom highlighting to specific dates
• Display custom tooltip text on hover for highlighted dates
• Event triggers when users interact with the date picker (on entry, exit, or value change)

Documentation

1. Typical Usage Scenarios

Form Date Entry

The most common use case is within forms that require date input. Examples include:

• Registration forms with birthdate fields
• Scheduling a Bank Transfer
• Scheduling a Credit Card Payment
• Appointment booking systems
• Project management tools with deadline tracking

Restricted Date Selection

Ideal for scenarios where only certain dates should be selectable:

• Appointment scheduling (only showing dates with available slots)
• Event ticket booking (only showing dates with available seats)
• Service scheduling (excluding holidays or maintenance days)
• Course registration (only showing class dates)

Password-Protected Date Fields

Useful for sensitive date information:

• Medical appointment systems
• Financial applications with date-sensitive information
• HR systems with confidential employee information

2. Features and Limitations

Features

Display Flexibility

• Multiple Input Types: Toggle between calendar view, text-only entry, or combined mode
• Password Field Option: Mask date input for privacy when needed
• Custom Static Text: Add informational text below the calendar (e.g., "Business hours: 9AM-5PM")
• Current Date Highlighting: Automatically highlight today's date with customizable colors

Date Control

• Disabling Dates: Block selection of entire date ranges
• Included Dates: Restrict selection to only specified dates with custom highlighting
• Excluded Dates: Prevent selection of specific dates with custom highlighting
• Custom Date Highlighting: Apply different colors to specific dates (e.g., holidays, special events)

Interactive Elements

• Custom Tooltips: Display informative text when hovering over highlighted dates
• Event Callbacks: Execute custom code on three events:
  • On Enter: When the user focuses on the date picker
  • On Leave: When the user leaves the date picker
  • On Change: When the selected date changes