QuietHoursPicker
Reusable quiet hours picker component.
Usage
Components are auto-discovered. Use the component directly in any .wrn view:
<QuietHoursPicker label="Quiet hours" startName="quietStart" endName="quietEnd" start="22:00" end="08:00" />Legacy mount name: data-component="QuietHoursPicker".
Props and attributes
| Prop | Type | Requirement | Default |
|---|---|---|---|
label | string | Optional | "Quiet hours" |
startName | string | Optional | "quietStart" |
endName | string | Optional | "quietEnd" |
start | string | Optional | "22:00" |
end | string | Optional | "08:00" |
timezone | string | Optional | "UTC" |
disabled | boolean | Optional | false |
class | string | Optional | "" |
Slots
This component does not declare a slot.
Events
This component does not declare a custom event.
Source contract
Installed source: components/QuietHoursPicker.wrn
component QuietHoursPicker {
props {
label = "Quiet hours"
startName = "quietStart"
endName = "quietEnd"
start = "22:00"
end = "08:00"
timezone = "UTC"
disabled = false
class = ""
}
view {
<fieldset class="wire-fieldset {class}" disabled="{disabled}"><legend class="wire-label">{label}</legend><div class="wire-form-row"><label class="wire-field"><span class="wire-label">From</span><input type="time" name="{startName}" value="{start}" class="wire-input" /></label><label class="wire-field"><span class="wire-label">Until</span><input type="time" name="{endName}" value="{end}" class="wire-input" /></label></div><p class="wire-field-message wire-field-message--help">Timezone: {timezone}</p></fieldset>
}
}