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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
/**
* `<date-time-input />`
*
* @category Web Components
* @mergeTarget components
* @module
*/
export { DateTimeInput }
import { makeElement, parseDate } from '../lib'
/**
* 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() {
super();
this.date = makeElement('input', {
type: 'date'
}) as HTMLInputElement
this.time = makeElement('input', {
type: 'time',
disabled: this.dateonly
}) 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.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':
if (to == null) {
this.time.disabled = false
} else {
if (to == '' || to == name) {
this.time.disabled = true;
} else {
throw new TypeError(`Invalid value for attribute dateonly: ${to}`)
}
}
break;
}
}
/**
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', "");
} else {
this.removeAttribute('dateonly');
}
}
/** See getter */
set value(date: Date) {
let [d, t] = date.format("~L~Y-~m-~dT~H:~M").split('T');
this.date.value = d;
this.time.value = t;
this.dateonly = date.dateonly;
}
/** Returns current value as a Date object. */
get value(): Date {
let dt;
let date = this.date.value;
if (this.dateonly) {
dt = parseDate(date);
dt.dateonly = true;
} else {
let time = this.time.value;
dt = parseDate(date + 'T' + time)
dt.dateonly = false;
}
return dt;
}
/** Returns current value as an ISO-8601 formatted string. */
get stringValue(): string {
if (this.dateonly) {
return this.value.format("~Y-~m-~d")
} else {
return this.value.format("~Y-~m-~dT~H:~M:~S")
}
}
/**
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) {
date = new_value.format("~L~Y-~m-~d");
time = new_value.format("~L~H:~M:~S");
dateonly = new_value.dateonly;
} else {
[date, time] = new_value.split('T')
}
this.dateonly = dateonly;
this.date.value = date;
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";
this.date.addEventListener(type, proc);
this.time.addEventListener(type, proc);
}
}
|
