diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2022-04-23 22:13:53 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2022-04-23 22:22:20 +0200 |
commit | 460dd689177ab0083327eeaec859735e55dcf8ef (patch) | |
tree | 12b29ae603e67b736b8e3a7690633dce0a4c2fb8 /static/components | |
parent | Update comment on cal-table. (diff) | |
download | calp-460dd689177ab0083327eeaec859735e55dcf8ef.tar.gz calp-460dd689177ab0083327eeaec859735e55dcf8ef.tar.xz |
Introduce component date-jump.
Diffstat (limited to '')
-rw-r--r-- | static/components/date-jump.ts | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/static/components/date-jump.ts b/static/components/date-jump.ts new file mode 100644 index 00000000..fd3908ae --- /dev/null +++ b/static/components/date-jump.ts @@ -0,0 +1,40 @@ +export { DateJump } + +/* Replace backend-driven [today] link with frontend, with one that + gets correctly set in the frontend. Similarly, update the go to + specific date button into a link which updates wheneven the date + form updates. +*/ +class DateJump extends HTMLElement { + + readonly golink: HTMLAnchorElement; + readonly input: HTMLInputElement; + + constructor() { + super(); + + this.golink = document.createElement('a') + this.golink.classList.add('btn'); + this.golink.textContent = "➔" + this.input = document.createElement('input') + this.input.type = 'date'; + } + + connectedCallback() { + + /* Form is just here so the css works out */ + let form = document.createElement('form'); + form.replaceChildren(this.input, this.golink); + this.replaceChildren(form); + + this.input.onchange = () => { + let date = this.input.valueAsDate!.format('~Y-~m-~d'); + this.golink.href = `${date}.html` + } + + let now = (new Date).format("~Y-~m-~d") + this.input.value = now; + /* onchange isn't triggered by manually setting the value */ + this.golink.href = `${now}.html` + } +} |