<dy-date-range-picker>
A component that enables users to select a range of dates. It provides options for quick range selection and supports both date-only and date-time range selections.
<dy-date-range-picker> Example
Loading...
<dy-date-range-picker
.value=${[1644475003294,1644575003294]}
.clearable=${true}
.quickRanges=${ [ {"label":"Last Week","value":"-1w"}, {"label":"Last Month","value":"-1M"} ] }
@clear=${(evt) => evt.target.value = null}
@change=${(evt) => evt.target.value = evt.detail}></dy-date-range-picker>
<dy-date-range-picker> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
placeholder(placeholder) |
Yes | string |
clearable(clearable) |
Yes | boolean |
disabled(disabled) |
Yes | boolean |
value |
Yes | DateRangeValue |
quickRanges |
Yes | { label: string; value: DateRangeValue }[] |
change |
Emitter<DateRangeValue> |
|
clear |
Emitter |
Instance Methods
| Method | Type |
|---|---|
showPicker |
() => void |
Other
| Type | Value |
|---|---|
| Event | change, clear |
| CSS State | active |
<dy-date-range-panel> Example
Loading...
<dy-date-range-panel style=${"width: 360px;"}></dy-date-range-panel>
<dy-date-range-panel> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
value |
Yes | DateRangeValue |
change |
Emitter<number[]> |
Other
| Type | Value |
|---|---|
| Event | change |
| Part | panel |