design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

add datepicker

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-30 10:40:23 +00:00
parent 49ad998b2c
commit 9a9aea56da
5 changed files with 1093 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
ts_web/elements/dees-input-datepicker.demo.ts Normal file
View File

@ -0,0 +1,146 @@
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>
`;