add datepicker

ts_web/pages/input-showcase.ts

@@ -443,6 +443,32 @@ export const inputShowcase = () => html`
         Specialized input components for specific data types like phone numbers, IBAN, and file uploads.
       </p>
 
+      <dees-panel .title=${'Date & Time Picker'} .subtitle=${'Calendar-based date selection'}>
+        <div class="demo-grid">
+          <dees-input-datepicker
+            .label=${'Event Date'}
+            .placeholder=${'Select date'}
+            .description=${'Choose a date from the calendar'}
+          ></dees-input-datepicker>
+
+          <dees-input-datepicker
+            .label=${'Appointment Time'}
+            .enableTime=${true}
+            .timeFormat=${'12h'}
+            .description=${'Date and time with AM/PM'}
+          ></dees-input-datepicker>
+
+          <dees-input-datepicker
+            .label=${'Deadline'}
+            .enableTime=${true}
+            .timeFormat=${'24h'}
+            .minuteIncrement=${15}
+            .minDate=${new Date().toISOString()}
+            .description=${'Future dates only, 15 min increments'}
+          ></dees-input-datepicker>
+        </div>
+      </dees-panel>
+
       <dees-panel .title=${'Phone & IBAN'}>
         <div class="demo-grid">
           <dees-input-phone