1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
/* globals cal */
"use strict";
// Wrap in a block to prevent leaking to window scope.
{
const format = new Intl.DateTimeFormat(undefined, {
month: "short",
day: "2-digit",
year: "numeric",
});
const parts = ["month", "day", "year"];
function getParts(date) {
return format.formatToParts(date).reduce((prev, curr) => {
if (parts.includes(curr.type)) {
prev[curr.type] = curr.value;
}
return prev;
}, {});
}
/**
* CalendarMinidate displays a date in a visually appealing box meant to be
* glanced at quickly to figure out the date of an event.
*/
class CalendarMinidate extends HTMLElement {
/**
* @type {HTMLElement}
*/
_monthSpan;
/**
* @type {HTMLElement}
*/
_daySpan;
/**
* @type {HTMLElement}
*/
_yearSpan;
constructor() {
super();
this.attachShadow({ mode: "open" });
document.l10n.connectRoot(this.shadowRoot);
this.shadowRoot.appendChild(
document.getElementById("calendarMinidate").content.cloneNode(true)
);
this._monthSpan = this.shadowRoot.querySelector(".calendar-minidate-month");
this._daySpan = this.shadowRoot.querySelector(".calendar-minidate-day");
this._yearSpan = this.shadowRoot.querySelector(".calendar-minidate-year");
}
/**
* Setting the date property will trigger the rendering of this widget.
*
* @type {calIDateTime}
*/
set date(value) {
let { month, day, year } = getParts(cal.dtz.dateTimeToJsDate(value));
this._monthSpan.textContent = month;
this._daySpan.textContent = day;
this._yearSpan.textContent = year;
}
/**
* Provides the displayed date as a string in the format
* "month day year".
*
* @type {string}
*/
get fullDate() {
return `${this._monthSpan.textContent} ${this._daySpan.textContent} ${this._yearSpan.textContent}`;
}
}
customElements.define("calendar-minidate", CalendarMinidate);
}
|
