146 lines
4.6 KiB
TypeScript
146 lines
4.6 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
import './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;
|
|
}
|
|
</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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
`; |