add valueAsDate & valueAsNumber to input; fixes #570

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 `<sl-avatar>` for consistency with other components
 - Added `role="status"` to `<sl-spinner>`
+- Added `valueAsDate` and `valueAsNumber` properties to `<sl-input>` [#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 `<sl-tooltip>` where `aria-describedby` referenced an id in the shadow root
 - Fixed a bug in `<sl-radio>` where tabbing didn't work properly in Firefox [#596](https://github.com/shoelace-style/shoelace/issues/596)

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);