diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 0bd2e6d5..84fb0fc9 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - 🚨 BREAKING: changed the `alt` attribute to `label` in `` for consistency with other components - Added `role="status"` to `` +- Added `valueAsDate` and `valueAsNumber` properties to `` [#570](https://github.com/shoelace-style/shoelace/issues/570) - Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633) - Fixed an a11y bug in `` where `aria-describedby` referenced an id in the shadow root - Fixed a bug in `` where tabbing didn't work properly in Firefox [#596](https://github.com/shoelace-style/shoelace/issues/596) diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 89ce4619..f0ac1044 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -143,6 +143,26 @@ export default class SlInput extends LitElement { /** The input's inputmode attribute. */ @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'; + /** Gets or sets the current value as a `Date` object. Only valid when `type` is `date`. */ + get valueAsDate() { + return this.input.valueAsDate as Date; + } + + set valueAsDate(newValue: Date) { + this.input.valueAsDate = newValue; + this.value = this.input.value; + } + + /** Gets or sets the current value as a number. */ + get valueAsNumber() { + return this.input.valueAsNumber as number; + } + + set valueAsNumber(newValue: number) { + this.input.valueAsNumber = newValue; + this.value = this.input.value; + } + connectedCallback() { super.connectedCallback(); this.handleSlotChange = this.handleSlotChange.bind(this);