x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Default --><input type="text" name="default_datepicker" id="default_datepicker" placeholder="Pick a date" class="input" data-controller="datepicker" /><!-- Datetime --><input type="text" name="datetime_datepicker" id="datetime_datepicker" placeholder="Pick a date" class="input" data-controller="datepicker" data-datepicker-type-value="datetime" /><!-- Disabled Dates --><input type="text" name="disabled_dates_datepicker" id="disabled_dates_datepicker" value="2028-01-01" placeholder="Pick a date" class="input" data-controller="datepicker" data-datepicker-disable-value="["2028-01-10","2028-01-11","2028-01-12"]" /><!-- Multiple --><input type="text" name="multiple_datepicker" id="multiple_datepicker" placeholder="Pick dates" class="input" data-controller="datepicker" data-datepicker-mode-value="multiple" /><!-- Range --><input type="text" name="range_datepicker" id="range_datepicker" placeholder="Pick dates" class="input" data-controller="datepicker" data-datepicker-mode-value="range" data-datepicker-show-months-value="2" /><!-- Time --><input type="text" name="time_datepicker" id="time_datepicker" placeholder="Pick a time" class="input" data-controller="datepicker" data-datepicker-type-value="time" />1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%# Default %><%= text_field_tag "default_datepicker", nil, placeholder: "Pick a date", class: "input", data: { controller: "datepicker" } %><%# Datetime %><%= text_field_tag "datetime_datepicker", nil, placeholder: "Pick a date", class: "input", data: { controller: "datepicker", datepicker_type_value: "datetime" } %><%# Disabled Dates %><%= text_field_tag "disabled_dates_datepicker", "2028-01-01", placeholder: "Pick a date", class: "input", data: { controller: "datepicker", datepicker_disable_value: ["2028-01-10", "2028-01-11", "2028-01-12"] } %><%# Multiple %><%= text_field_tag "multiple_datepicker", nil, placeholder: "Pick dates", class: "input", data: { controller: "datepicker", datepicker_mode_value: "multiple" } %><%# Range %><%= text_field_tag "range_datepicker", nil, placeholder: "Pick dates", class: "input", data: { controller: "datepicker", datepicker_mode_value: "range", datepicker_show_months_value: 2 } %><%# Time %><%= text_field_tag "time_datepicker", nil, placeholder: "Pick a time", class: "input", data: { controller: "datepicker", datepicker_type_value: "time" } %>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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
@import url("https://esm.sh/flatpickr@4.6.13/dist/flatpickr.min.css");.flatpickr-calendar { --calendar-size: 250px; --container-size: 220px; --day-size: var(--size-8); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--rounded-md); box-shadow: var(--shadow-md); font-size: var(--text-sm); inline-size: var(--calendar-size); .flatpickr-innerContainer { justify-content: center; padding-block-end: var(--size-3); } .flatpickr-days { inline-size: var(--container-size); } .dayContainer { inline-size: var(--container-size); min-inline-size: var(--container-size); max-inline-size: var(--container-size); } .dayContainer + .dayContainer { box-shadow: -1px 0 0 var(--color-border); } .flatpickr-months { .flatpickr-month { color: var(--color-text); } span.cur-month { font-size: var(--text-sm); font-weight: var(--font-medium); } svg { fill: var(--color-border-dark); } .flatpickr-prev-month:hover svg { fill: var(--color-text); } .flatpickr-next-month:hover svg { fill: var(--color-text); } } .flatpickr-monthDropdown-months { appearance: none; border-radius: var(--rounded-md); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-normal); padding: 0; text-align: center; &:hover { background: var(--color-border-light); } } .numInputWrapper { input { border-radius: var(--rounded-md); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-normal); padding: 0; text-align: center; } span { border-color: var(--color-border); } span:hover { background: transparent; } span.arrowUp::after { border-bottom-color: var(--color-text); } span.arrowDown::after { border-top-color: var(--color-text); } &:hover { background: transparent; } } .flatpickr-weekday { color: var(--color-text-subtle); font-weight: var(--font-normal); } .flatpickr-time { .hasTime & { border-top-color: var(--color-border); } .hasTime.noCalendar & { border: 0; } .numInput { background: transparent; color: var(--color-text); } .flatpickr-time-separator { color: var(--color-text); } .flatpickr-am-pm { background: transparent; color: var(--color-text); } } .flatpickr-day { border-radius: var(--rounded-md); border-color: transparent !important; box-shadow: none !important; color: var(--color-text); height: var(--day-size); line-height: var(--day-size); margin-block-start: var(--size-2); max-width: var(--day-size); &:is(.inRange) { border-radius: 0; } &:is(.today, .inRange, :hover, :focus) { background: var(--color-border-light); color: var(--color-text); } &:is( .flatpickr-disabled, .flatpickr-disabled:hover, .prevMonthDay, .nextMonthDay, .notAllowed, .notAllowed.prevMonthDay, .notAllowed.nextMonthDay ) { color: var(--color-text-subtle); } &:is( .selected, .startRange, .endRange, .selected.inRange, .startRange.inRange, .endRange.inRange, .selected:focus, .startRange:focus, .endRange:focus, .selected:hover, .startRange:hover, .endRange:hover, .selected.prevMonthDay, .startRange.prevMonthDay, .endRange.prevMonthDay, .selected.nextMonthDay, .startRange.nextMonthDay, .endRange.nextMonthDay ) { background: var(--color-primary); color: var(--color-text-reversed); } } &::before, &::after { display: none; }}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
import { Controller } from "@hotwired/stimulus"import flatpickr from "https://esm.sh/flatpickr@4.6.13?standalone"export default class extends Controller { static values = { type: String, disable: Array, mode: { type: String, default: "single" }, showMonths: { type: Number, default: 1 }, dateFormat: { type: String, default: "F d, Y" }, dateTimeFormat: { type: String, default: "F d, Y H:i" } } connect() { if (this.typeValue == "time") { this.flatpickr = flatpickr(this.element, this.#timeOptions) } else if (this.typeValue == "datetime") { this.flatpickr = flatpickr(this.element, this.#dateTimeOptions) } else { this.flatpickr = flatpickr(this.element, this.#basicOptions) } } disconnect() { this.flatpickr.destroy() } get #timeOptions() { return { dateFormat: "H:i", enableTime: true, noCalendar: true } } get #dateTimeOptions() { return { ...this.#baseOptions, altFormat: this.dateTimeFormatValue, dateFormat: "Y-m-d H:i", enableTime: true } } get #basicOptions() { return { ...this.#baseOptions, altFormat: this.dateFormatValue, dateFormat: "Y-m-d" } } get #baseOptions() { return { altInput: true, disable: this.disableValue, mode: this.modeValue, showMonths: this.showMonthsValue } }}