diff options
Diffstat (limited to '')
-rw-r--r-- | static/ts/components/date-time-input.ts (renamed from static/components/date-time-input.ts) | 70 |
1 files changed, 60 insertions, 10 deletions
diff --git a/static/components/date-time-input.ts b/static/ts/components/date-time-input.ts index 20e9a505..33201653 100644 --- a/static/components/date-time-input.ts +++ b/static/ts/components/date-time-input.ts @@ -1,12 +1,35 @@ +/** + * `<date-time-input />` + * + * @category Web Components + * @mergeTarget components + * @module + */ + export { DateTimeInput } import { makeElement, parseDate } from '../lib' - -/* '<date-time-input />' */ +/** + * The HTML component `<date-time-input />`. + * An element for input for date-times. Similar to + * @example + * ```html + * <input type="date"/> + * <input type="time"/> + * ``` + * + * But as a single unit. + * + * ### Attributes + * - dateonly + * + */ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { + /** Our time input element */ readonly time: HTMLInputElement; + /** Our date input element */ readonly date: HTMLInputElement; constructor() { @@ -22,22 +45,30 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { }) as HTMLInputElement } + /** + We set our children first when mounted. + + This can be in the constructor for chromium, but NOT firefox... + + - Vivaldi 4.3.2439.63 stable + - Mozilla Firefox 94.0.1 + */ connectedCallback() { - /* This can be in the constructor for chromium, but NOT firefox... - Vivaldi 4.3.2439.63 stable - Mozilla Firefox 94.0.1 - */ - /* - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes - https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute - */ this.replaceChildren(this.date, this.time) } + /** + Attributes which we want notifications when they are change. + + Part of the Web Component API + + - `dateonly` + */ static get observedAttributes() { return ['dateonly'] } + /** Part of the Web Component API */ attributeChangedCallback(name: string, _: string | null, to: string | null): void { switch (name) { case 'dateonly': @@ -54,10 +85,16 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { } } + /** + Setting this to true disabled the time part of the input, and makes + any output only have date components (alternativly, the time component + set to zero). + */ get dateonly(): boolean { return this.hasAttribute('dateonly'); } + /** See getter */ set dateonly(b: boolean) { if (b) { this.setAttribute('dateonly', ""); @@ -66,6 +103,7 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { } } + /** See getter */ set value(date: Date) { let [d, t] = date.format("~L~Y-~m-~dT~H:~M").split('T'); this.date.value = d; @@ -74,6 +112,7 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { this.dateonly = date.dateonly; } + /** Returns current value as a Date object. */ get value(): Date { let dt; let date = this.date.value; @@ -88,6 +127,7 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { return dt; } + /** Returns current value as an ISO-8601 formatted string. */ get stringValue(): string { if (this.dateonly) { return this.value.format("~Y-~m-~d") @@ -96,6 +136,13 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { } } + /** + Set the selected date. + + @param new_value + If given a date, set the input to that date. + If given a string, parse it as an ISO-8601 formatted datetime. + */ set stringValue(new_value: Date | string) { let date, time, dateonly = false; if (new_value instanceof Date) { @@ -110,6 +157,9 @@ class DateTimeInput extends /* HTMLInputElement */ HTMLElement { this.time.value = time; } + /** + Adds an event listener to both the date and time input. + */ addEventListener(type: string, proc: ((e: Event) => void)) { if (type != 'input') throw "Only input supported"; |