343 lines
12 KiB
TypeScript
343 lines
12 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import './dees-panel.js';
|
|
import './dees-input-datepicker.js';
|
|
import type { DeesInputDatepicker } from './dees-input-datepicker.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
dees-panel {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
dees-panel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.demo-output {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
background: rgba(0, 105, 242, 0.1);
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.date-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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);
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Basic Date Picker'} .subtitle=${'Simple date selection without time'}>
|
|
<dees-input-datepicker
|
|
label="Select Date"
|
|
description="Choose a date from the calendar"
|
|
></dees-input-datepicker>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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);
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Date and Time Selection'} .subtitle=${'Date pickers with time selection in different formats'}>
|
|
<dees-input-datepicker
|
|
label="Event Date & Time"
|
|
description="Select both date and time (24-hour format)"
|
|
.enableTime=${true}
|
|
timeFormat="24h"
|
|
></dees-input-datepicker>
|
|
|
|
<dees-input-datepicker
|
|
label="Appointment"
|
|
description="Date and time with AM/PM selector (15-minute increments)"
|
|
.enableTime=${true}
|
|
timeFormat="12h"
|
|
.minuteIncrement=${15}
|
|
></dees-input-datepicker>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Demonstrate timezone functionality
|
|
const timezonePickers = elementArg.querySelectorAll('dees-input-datepicker');
|
|
|
|
timezonePickers.forEach((picker) => {
|
|
picker.addEventListener('change', (event: CustomEvent) => {
|
|
const target = event.target as DeesInputDatepicker;
|
|
console.log(`${target.label} value:`, target.value);
|
|
const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
|
|
if (input) {
|
|
console.log(`${target.label} formatted:`, input.value);
|
|
}
|
|
});
|
|
});
|
|
}}>
|
|
<dees-panel .title=${'Timezone Support'} .subtitle=${'Date and time selection with timezone awareness'}>
|
|
<dees-input-datepicker
|
|
label="Meeting Time (with Timezone)"
|
|
description="Select a date/time and timezone for the meeting"
|
|
.enableTime=${true}
|
|
.enableTimezone=${true}
|
|
timeFormat="24h"
|
|
timezone="America/New_York"
|
|
></dees-input-datepicker>
|
|
|
|
<dees-input-datepicker
|
|
label="Global Event Schedule"
|
|
description="Schedule an event across different timezones"
|
|
.enableTime=${true}
|
|
.enableTimezone=${true}
|
|
timeFormat="12h"
|
|
timezone="Europe/London"
|
|
.minuteIncrement=${30}
|
|
></dees-input-datepicker>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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`);
|
|
}
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Date Range Constraints'} .subtitle=${'Limit selectable dates with min and max values'}>
|
|
<dees-input-datepicker
|
|
label="Future Date Only"
|
|
description="Can only select dates from today to 90 days in the future"
|
|
.minDate=${new Date().toISOString()}
|
|
.maxDate=${new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString()}
|
|
></dees-input-datepicker>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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);
|
|
}
|
|
});
|
|
});
|
|
}}>
|
|
<dees-panel .title=${'Date Formats'} .subtitle=${'Different date display formats for various regions'}>
|
|
<div class="date-group">
|
|
<dees-input-datepicker
|
|
label="European Format"
|
|
dateFormat="DD/MM/YYYY"
|
|
.value=${new Date().toISOString()}
|
|
></dees-input-datepicker>
|
|
|
|
<dees-input-datepicker
|
|
label="US Format"
|
|
dateFormat="MM/DD/YYYY"
|
|
.value=${new Date().toISOString()}
|
|
></dees-input-datepicker>
|
|
|
|
<dees-input-datepicker
|
|
label="ISO Format"
|
|
dateFormat="YYYY-MM-DD"
|
|
.value=${new Date().toISOString()}
|
|
></dees-input-datepicker>
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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');
|
|
}
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Form States'} .subtitle=${'Required and disabled states'}>
|
|
<dees-input-datepicker
|
|
label="Birth Date"
|
|
description="This field is required"
|
|
.required=${true}
|
|
placeholder="Select your birth date"
|
|
></dees-input-datepicker>
|
|
|
|
<dees-input-datepicker
|
|
label="Disabled Date"
|
|
description="This field cannot be edited"
|
|
.disabled=${true}
|
|
.value=${new Date().toISOString()}
|
|
></dees-input-datepicker>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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)');
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Calendar Customization'} .subtitle=${'Different week start days for various regions'}>
|
|
<div class="date-group">
|
|
<dees-input-datepicker
|
|
label="US Calendar"
|
|
description="Week starts on Sunday"
|
|
.weekStartsOn=${0}
|
|
></dees-input-datepicker>
|
|
|
|
<dees-input-datepicker
|
|
label="EU Calendar"
|
|
description="Week starts on Monday"
|
|
.weekStartsOn=${1}
|
|
></dees-input-datepicker>
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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');
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Disabled Dates'} .subtitle=${'Calendar with specific dates disabled (weekends in current month)'}>
|
|
<dees-input-datepicker
|
|
label="Availability Calendar"
|
|
description="Weekends are disabled for the current month"
|
|
></dees-input-datepicker>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// 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 = `
|
|
<strong>Event triggered!</strong><br>
|
|
ISO Value: ${value}<br>
|
|
Formatted: ${formattedValue}<br>
|
|
Date object: ${date.toLocaleString()}
|
|
`;
|
|
} else {
|
|
output.innerHTML = '<em>Date cleared</em>';
|
|
}
|
|
});
|
|
|
|
picker.addEventListener('blur', () => {
|
|
console.log('Datepicker lost focus');
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Event Handling'} .subtitle=${'Interactive demonstration of change events'}>
|
|
<dees-input-datepicker
|
|
label="Event Demo"
|
|
description="Select a date to see the event details"
|
|
></dees-input-datepicker>
|
|
|
|
<div id="event-output" class="demo-output">
|
|
<em>Select a date to see event details...</em>
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
</div>
|
|
`; |