Dark Mode

AmPmTimePicker

A lightweight, customizable web component timepicker

1. Basic Examples

Default (24h)

<time-picker></time-picker>

AM/PM Mode (12h)

<time-picker use-ampm="true" value="14:30"></time-picker>

Hidden Toggle Button

<time-picker hide-button value="09:00"></time-picker>

Custom Labels & Interval (15m)

<time-picker use-ampm="true" interval="15" hour-label="HH"
                        min-label="MM" ampm-label="AM/PM"></time-picker>

2. Component States

Disabled State

<time-picker disabled value="10:00"></time-picker>

Read-only State

<time-picker readonly value="15:45"></time-picker>

3. Time Range & Constraints

Restrict selectable time ranges using start-time and end-time attributes.

Specific Range (09:00 - 17:59)

<time-picker start-time="09:00"
                        end-time="17:59"></time-picker>

Start from 14:30

<time-picker start-time="14:30"></time-picker>

AM/PM with End Time (13:59) & 15m Interval

<time-picker use-ampm="true" end-time="13:59"
                        interval="15"></time-picker>

Reactive Range (Dynamic Constraints)

Select a time in either picker to dynamically restrict the other's range.

const startPicker = document.getElementById('start-picker');
const endPicker = document.getElementById('end-picker');

startPicker.addEventListener('change', (e) => {
  if (e.detail.value) endPicker.setAttribute('start-time', e.detail.value);
  else endPicker.removeAttribute('start-time');
});

endPicker.addEventListener('change', (e) => {
  if (e.detail.value) startPicker.setAttribute('end-time', e.detail.value);
  else startPicker.removeAttribute('end-time');
});

4. Batch Configuration (JS)

Apply common attributes globally using JavaScript. Notice how the last picker overrides the interval.

Common Class Configuration

Overrides interval to 30 and use-ampm to false

<!-- HTML -->
<time-picker class="common-time-demo"></time-picker>
<time-picker class="common-time-demo"></time-picker>
<time-picker class="common-time-demo" interval="30"></time-picker>

<!-- JavaScript -->
const defaultOptions = {
  'use-ampm': 'true',
  'interval': '15',
  'hour-label': 'Hour',
  'min-label': 'Min',
  'ampm-label': 'AM/PM'
};
document.querySelectorAll('.common-time-demo').forEach(picker => {
  Object.entries(defaultOptions).forEach(([key, value]) => {
    if (!picker.hasAttribute(key)) {
      picker.setAttribute(key, value);
    }
  });
});

5. Custom Styling

Customize the appearance using CSS Custom Properties.

Purple Theme with Rounded Corners

.custom-styled {
  --ampm-primary-color: #6c5ce7;
  --ampm-border-radius: 20px;
}

.custom-styled::part(container) {
  background-color: #f0f0ff;
}

/* Dark mode override */
[data-theme="dark"] .custom-styled::part(container) {
  background-color: #1a1a2e;
}

Custom Invalid Color (Required & Empty)

<time-picker style="--ampm-invalid-color: #ff9800;"
                        required></time-picker>

6. Advanced Styling (::part & States)

Customize internal elements directly using the ::part() selector and attribute selectors.

Extreme Customization (Neon Theme)

<time-picker class="neon-styled" 
             dropdown-class="neon-dropdown">

/* Host styling (::part) */
.neon-styled {
    --ampm-primary-color: #ff5e00;
    --ampm-border-radius: 20px;
}
.neon-styled::part(container) {
  background-color: #fff;        /* light mode: white bg */
  border: 2px solid #ff5e00;
  box-shadow: 0 4px 10px rgba(255, 94, 0, 0.3);
}
.neon-styled::part(input) { color: #ff5e00; }
.neon-styled::part(toggle-btn) {
  background-color: #ff5e00; color: #111;
}

/* Dropdown styling */
.neon-dropdown {
  background-color: #fff;        /* light mode: white bg */
  border: 2px solid #ff5e00;
  color: #ff5e00;
}
.neon-dropdown .ampm-header {
  background-color: #f5f5f5;     /* light mode: light header */
  border-bottom: 1px solid #ff5e00;
}
.neon-dropdown .ampm-item.ampm-active {
  background-color: #ff5e00; color: #111;
}

/* Dark mode: black bg + stronger glow */
[data-theme="dark"] .neon-styled::part(container) {
  background-color: #000;
  box-shadow: 0 0 20px rgba(255,94,0,0.8),
              inset 0 0 10px rgba(255,94,0,0.1);
}
[data-theme="dark"] .neon-dropdown {
  background-color: #000;
  box-shadow: 0 0 25px rgba(255,94,0,0.6);
}

Disabled State Direct Override

.state-styled[disabled]::part(container) {
  background-color: #ffeaa7;
  border-color: #fdcb6e;
}

7. Form Integration

This component supports ElementInternals, allowing it to work seamlessly with native HTML forms.

Form Data: Waiting for submission...

8. Dynamic Runtime Updates

Modify attributes via JavaScript and see the component react instantly. Try changing these while the dropdown is open!

⬅️ UI reacts instantly!