-
-
Basic Date Picker
-
Simple date selection without time
-
-
+
{
+ // Demonstrate basic date picker functionality
+ const datePicker = elementArg.querySelector('dees-input-datepicker');
+
+ if (datePicker) {
+ datePicker.addEventListener('change', (event: CustomEvent) => {
+ console.log('Basic date selected:', (event.target as DeesInputDatepicker).value);
+ });
+ }
+ }}>
+
+
+
+
-
-
Date and Time Picker
-
Date selection with time in 24-hour format
-
-
+
{
+ // Demonstrate date and time picker
+ const dateTimePicker = elementArg.querySelector('dees-input-datepicker[label="Event Date & Time"]');
+ const appointmentPicker = elementArg.querySelector('dees-input-datepicker[label="Appointment"]');
+
+ if (dateTimePicker) {
+ dateTimePicker.addEventListener('change', (event: CustomEvent) => {
+ const value = (event.target as DeesInputDatepicker).value;
+ console.log('24h format datetime:', value);
+ });
+ }
+
+ if (appointmentPicker) {
+ appointmentPicker.addEventListener('change', (event: CustomEvent) => {
+ const value = (event.target as DeesInputDatepicker).value;
+ console.log('12h format datetime:', value);
+ });
+ }
+ }}>
+
+
+
+
+
+
-
-
12-Hour Time Format
-
Date and time with AM/PM selector
-
-
+
{
+ // Demonstrate date constraints
+ const futureDatePicker = elementArg.querySelector('dees-input-datepicker');
+
+ if (futureDatePicker) {
+ // Show the min/max constraints in action
+ futureDatePicker.addEventListener('change', (event: CustomEvent) => {
+ const value = (event.target as DeesInputDatepicker).value;
+ if (value) {
+ const selectedDate = new Date(value);
+ const today = new Date();
+ const daysDiff = Math.floor((selectedDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+ console.log(`Selected date is ${daysDiff} days from today`);
+ }
+ });
+ }
+ }}>
+
+
+
+
-
-
Date Range Constraints
-
Limit selectable dates with min and max
-
-
+
{
+ // Demonstrate different date formats
+ const formatters = {
+ 'DD/MM/YYYY': 'European',
+ 'MM/DD/YYYY': 'US',
+ 'YYYY-MM-DD': 'ISO'
+ };
+
+ const datePickers = elementArg.querySelectorAll('dees-input-datepicker');
+ datePickers.forEach((picker) => {
+ picker.addEventListener('change', (event: CustomEvent) => {
+ const target = event.target as DeesInputDatepicker;
+ // Log the formatted value that's displayed in the input
+ const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
+ if (input) {
+ console.log(`${target.label} format:`, input.value);
+ }
+ });
+ });
+ }}>
+
+
+
+
+
+
+
+
+
+
-
-
Custom Date Format
-
Different date display format
-
-
+
{
+ // Demonstrate required field validation
+ const requiredPicker = elementArg.querySelector('dees-input-datepicker[required]');
+
+ if (requiredPicker) {
+ // Monitor blur events for validation
+ requiredPicker.addEventListener('blur', () => {
+ const picker = requiredPicker as DeesInputDatepicker;
+ const value = picker.getValue();
+ if (!value) {
+ console.log('Required date field is empty');
+ }
+ });
+ }
+ }}>
+
+
+
+
+
+
-
-
Required Field
-
Date picker as a required form field
-
-
+
{
+ // Demonstrate week start customization
+ const usPicker = elementArg.querySelector('dees-input-datepicker[label="US Calendar"]');
+ const euPicker = elementArg.querySelector('dees-input-datepicker[label="EU Calendar"]');
+
+ if (usPicker) {
+ console.log('US Calendar starts on Sunday (0)');
+ }
+ if (euPicker) {
+ console.log('EU Calendar starts on Monday (1)');
+ }
+ }}>
+
+
+
+
+
+
+
+
-
-
Disabled State
-
Date picker in disabled state
-
-
+
{
+ // Generate weekend dates for the current month
+ const generateWeekends = () => {
+ const weekends = [];
+ const now = new Date();
+ const year = now.getFullYear();
+ const month = now.getMonth();
+
+ // Get all weekends for current month
+ const date = new Date(year, month, 1);
+ while (date.getMonth() === month) {
+ if (date.getDay() === 0 || date.getDay() === 6) {
+ weekends.push(new Date(date).toISOString());
+ }
+ date.setDate(date.getDate() + 1);
+ }
+ return weekends;
+ };
+
+ const picker = elementArg.querySelector('dees-input-datepicker');
+ if (picker) {
+ picker.disabledDates = generateWeekends();
+ console.log('Disabled weekend dates for current month');
+ }
+ }}>
+
+
+
+
-
-
Week Starts on Sunday
-
Calendar with Sunday as first day of week
-
-
-
-
-
With Disabled Dates
-
Some dates are disabled and cannot be selected
-
-
-
-
-
Event Listeners
-
Check console for change events
-
-
+
{
+ // Interactive event demonstration
+ const picker = elementArg.querySelector('dees-input-datepicker');
+ const output = elementArg.querySelector('#event-output');
+
+ if (picker && output) {
+ picker.addEventListener('change', (event: CustomEvent) => {
+ const target = event.target as DeesInputDatepicker;
+ const value = target.value;
+ if (value) {
+ const date = new Date(value);
+ // Get the formatted value from the input element
+ const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
+ const formattedValue = input?.value || 'N/A';
+ output.innerHTML = `
+ Event triggered!
+ ISO Value: ${value}
+ Formatted: ${formattedValue}
+ Date object: ${date.toLocaleString()}
+ `;
+ } else {
+ output.innerHTML = 'Date cleared';
+ }
+ });
+
+ picker.addEventListener('blur', () => {
+ console.log('Datepicker lost focus');
+ });
+ }
+ }}>
+
+
+
+
+ Select a date to see event details...
+
+
+