update
This commit is contained in:
Juergen Kunz
@ -1,146 +1,307 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
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>
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
padding: 32px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.demo-description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
${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">
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Basic Date Picker</div>
|
||||
<div class="demo-description">Simple date selection without time</div>
|
||||
<dees-input-datepicker
|
||||
label="Select Date"
|
||||
description="Choose a date from the calendar"
|
||||
placeholder="Pick a date"
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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"
|
||||
placeholder="Pick a date"
|
||||
></dees-input-datepicker>
|
||||
</dees-panel>
|
||||
</dees-demowrapper>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Date and Time Picker</div>
|
||||
<div class="demo-description">Date selection with time in 24-hour format</div>
|
||||
<dees-input-datepicker
|
||||
label="Event Date & Time"
|
||||
description="Select both date and time"
|
||||
.enableTime=${true}
|
||||
timeFormat="24h"
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">12-Hour Time Format</div>
|
||||
<div class="demo-description">Date and time with AM/PM selector</div>
|
||||
<dees-input-datepicker
|
||||
label="Appointment"
|
||||
.enableTime=${true}
|
||||
timeFormat="12h"
|
||||
.minuteIncrement=${15}
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Date Range Constraints</div>
|
||||
<div class="demo-description">Limit selectable dates with min and max</div>
|
||||
<dees-input-datepicker
|
||||
label="Future Date Only"
|
||||
description="Can only select dates from today onwards"
|
||||
.minDate=${new Date().toISOString()}
|
||||
.maxDate=${new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString()}
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Custom Date Format</div>
|
||||
<div class="demo-description">Different date display format</div>
|
||||
<dees-input-datepicker
|
||||
label="European Format"
|
||||
dateFormat="DD/MM/YYYY"
|
||||
.value=${new Date().toISOString()}
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Required Field</div>
|
||||
<div class="demo-description">Date picker as a required form field</div>
|
||||
<dees-input-datepicker
|
||||
label="Birth Date"
|
||||
description="This field is required"
|
||||
.required=${true}
|
||||
placeholder="Select your birth date"
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Disabled State</div>
|
||||
<div class="demo-description">Date picker in disabled state</div>
|
||||
<dees-input-datepicker
|
||||
label="Disabled Date"
|
||||
.disabled=${true}
|
||||
.value=${new Date().toISOString()}
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Week Starts on Sunday</div>
|
||||
<div class="demo-description">Calendar with Sunday as first day of week</div>
|
||||
<dees-input-datepicker
|
||||
label="US Calendar"
|
||||
.weekStartsOn=${0}
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">With Disabled Dates</div>
|
||||
<div class="demo-description">Some dates are disabled and cannot be selected</div>
|
||||
<dees-input-datepicker
|
||||
label="Availability Calendar"
|
||||
description="Weekends are disabled"
|
||||
.disabledDates=${[
|
||||
new Date(2024, 0, 6).toISOString(), // Saturday
|
||||
new Date(2024, 0, 7).toISOString(), // Sunday
|
||||
new Date(2024, 0, 13).toISOString(), // Saturday
|
||||
new Date(2024, 0, 14).toISOString(), // Sunday
|
||||
new Date(2024, 0, 20).toISOString(), // Saturday
|
||||
new Date(2024, 0, 21).toISOString(), // Sunday
|
||||
new Date(2024, 0, 27).toISOString(), // Saturday
|
||||
new Date(2024, 0, 28).toISOString(), // Sunday
|
||||
]}
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="demo-title">Event Listeners</div>
|
||||
<div class="demo-description">Check console for change events</div>
|
||||
<dees-input-datepicker
|
||||
label="Event Demo"
|
||||
@change="${(e: CustomEvent) => console.log('Date changed:', (e.target as any).value)}"
|
||||
></dees-input-datepicker>
|
||||
</div>
|
||||
<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>
|
||||
`;
|
||||
Reference in New Issue
Block a user