<dy-date-picker>
A component that allows users to select a date or date-time from a calendar interface. It supports both date-only and date-time selection modes.
<dy-date-picker> Example
Loading...
<dy-date-picker
.value=${1644475003294}
.placeholder=${"Placeholder"}
.clearable=${true}
@clear=${(evt) => evt.target.value = null}
@change=${(evt) => evt.target.value = evt.detail}></dy-date-picker> <dy-date-picker
.value=${1644475003294}
.time=${true}
.clearable=${true}
@clear=${(evt) => evt.target.value = null}
@change=${(evt) => evt.target.value = evt.detail}></dy-date-picker>
<dy-date-picker> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
placeholder(placeholder) |
Yes | string |
time(time) |
Yes | boolean |
clearable(clearable) |
Yes | boolean |
disabled(disabled) |
Yes | boolean |
value |
Yes | number |
change |
Emitter<number> |
|
clear |
Emitter |
Instance Methods
| Method | Type |
|---|---|
showPicker |
() => void |
Other
| Type | Value |
|---|---|
| Event | change, clear |
| CSS State | active |
<dy-date-panel> Example
Loading...
<dy-date-panel style=${"width: 300px;"}></dy-date-panel>
<dy-date-panel> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
time(time) |
Yes | boolean |
change |
Emitter<number> |
|
datehover |
Emitter<number> |
|
value |
Yes | number |
highlights |
Yes | number[][] |
initValue |
Yes | number |
Other
| Type | Value |
|---|---|
| Event | change, datehover |
| Part | day-cell |