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
{% extends "base.html" %}
{%- block control -%}<section>
<style>
.multi { display: flex }
ul.control, .multi > ul {
display: grid;
gap: 5px;
grid-template-columns: repeat(3, min-content);
list-style-type: none;
}
</style>
<p><a href="-year{{Q}}" title="Past year">↓</a>
{% if input.inputType != "time" %}
<a href="year/{{Q}}" title="Edit year">{{ T.year }}</a>
<a href="+year{{Q}}" title="Next year">↑</a>
<a href="-month{{Q}}" title="Past month">↓</a>
{{ T.month }}
<a href="+month{{Q}}" title="Next month">↑</a>
{% endif %}
{% if input.inputType != "month" %}
{% if input.inputType != "time" %}
<a href="-date{{Q}}" title="Past day">↓</a>
{{ T.date }}
<a href="+date{{Q}}" title="Next day">↑</a>
{% endif %}
{# NOTE: "week" handling is largely a matter of switching to +/- 7days #}
{% if input.inputType != "date" && input.inputType != "week" %}
<a href="-hour{{Q}}" title="Past hour">↓</a>
{{ T.hour|pad2 }}
<a href="+hour{{Q}}" title="Next hour">↑</a>
:
<a href="-minute{{Q}}" title="Past minute">↓</a>
{{ T.minute|pad2 }}
<a href="+minute{{Q}}" title="Next minute">↑</a>
<a href="meridiem{{Q}}" title="Toggle AM/PM">{{ T.meridiem }}</a>
{% if input.inputType != "datetime-local" && input.inputType != "time" %}
<a href="-zone{{Q}}" title="Previous timezone">↓</a>
<a href="zone/{{Q}}">{{ T.zone }}</a>
<a href="+zone{{Q}}" title="Next zone">↑</a></p>
{% endif %}
{% endif %}
{% endif %}
<p><a href="now{{Q}}" title="Select current date & time">Now</a></a>
<div class="multi">
{% if input.inputType != "time" %}
<ul>
<li><a href="month=0{{Q}}">January</a></li>
<li><a href="month=1{{Q}}">Febuary</a></li>
<li><a href="month=2{{Q}}">March</a></li>
<li><a href="month=3{{Q}}">April</a></li>
<li><a href="month=4{{Q}}">May</a></li>
<li><a href="month=5{{Q}}">June</a></li>
<li><a href="month=6{{Q}}">July</a></li>
<li><a href="month=7{{Q}}">August</a></li>
<li><a href="month=8{{Q}}">September</a></li>
<li><a href="month=9{{Q}}">October</a></li>
<li><a href="month=10{{Q}}">November</a></li>
<li><a href="month=11{{Q}}">December</a></li>
</ul>
{% endif %}
{% if input.inputType != "month" %}
{# TODO: Do we want to refine this for "week" inputs? #}
{% if input.inputType != "time" %}
<ul style="grid-template-columns: repeat(7, min-content)">
{% for i in 1|seqTo(T.daysInMonth) %}
<li {% if i == 1 %}style="grid-column: {{ T.monthStart }}"{% endif %}>
<a href="date={{ i }}{{Q}}">{{ i }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if input.inputType != "date" && input.inputType != "week" %}
<ul>{% for i in 1|seqTo(12) %}
<li><a href="hour={{ i }}{{Q}}">{{ i|pad2 }}:{{ T.minute|pad2 }}</a></li>
{% endfor %}</ul>
<ul>{% for i in 0|seqTo(5, 55) %}
<li><a href="minute={{ i }}{{Q}}">{{ T.hour|pad2 }}:{{ i|pad2 }}</a></li>
{% endfor %}</ul>
{% endif %}
{% endif %}
</div>
</section>{%- endblock -%}