Skip to content

Commit 9ff4d2f

Browse files
author
Sacha Trauwaen
committed
fix datepicker in bootstrap 4
1 parent 4de3b62 commit 9ff4d2f

7 files changed

+421
-373
lines changed

‎OpenContent/Components/Alpaca/AlpacaEngine.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@ private void RegisterFields(bool bootstrap)
227227
{
228228
ClientResourceManager.RegisterScript(Page, "~/DesktopModules/OpenContent/js/lib/moment/min/moment-with-locales.min.js", FileOrder.Js.DefaultPriority, "DnnPageHeaderProvider");
229229
ClientResourceManager.RegisterScript(Page, "~/DesktopModules/OpenContent/js/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js", FileOrder.Js.DefaultPriority + 1, "DnnPageHeaderProvider");
230-
ClientResourceManager.RegisterStyleSheet(Page, "~/DesktopModules/OpenContent/js/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css", FileOrder.Css.DefaultPriority);
230+
ClientResourceManager.RegisterStyleSheet(Page, "~/DesktopModules/OpenContent/js/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css", FileOrder.Css.DefaultPriority);
231231
}
232232
if (allFields || fieldTypes.Contains("ckeditor") || fieldTypes.Contains("mlckeditor"))
233233
{

‎OpenContent/js/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css

+1-369
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎OpenContent/js/lib/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css.old

+374
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,374 @@
1+
/*!
2+
* Datetimepicker for Bootstrap 3
3+
* version : 4.17.47
4+
* https://github.com/Eonasdan/bootstrap-datetimepicker/
5+
*/
6+
.bootstrap-datetimepicker-widget {
7+
list-style: none;
8+
}
9+
.bootstrap-datetimepicker-widget.dropdown-menu {
10+
display: block;
11+
margin: 2px 0;
12+
padding: 4px;
13+
width: 19em;
14+
}
15+
@media (min-width: 768px) {
16+
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
17+
width: 38em;
18+
}
19+
}
20+
@media (min-width: 992px) {
21+
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
22+
width: 38em;
23+
}
24+
}
25+
@media (min-width: 1200px) {
26+
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
27+
width: 38em;
28+
}
29+
}
30+
.bootstrap-datetimepicker-widget.dropdown-menu:before,
31+
.bootstrap-datetimepicker-widget.dropdown-menu:after {
32+
content: '';
33+
display: inline-block;
34+
position: absolute;
35+
}
36+
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
37+
border-left: 7px solid transparent;
38+
border-right: 7px solid transparent;
39+
border-bottom: 7px solid #ccc;
40+
border-bottom-color: rgba(0, 0, 0, 0.2);
41+
top: -7px;
42+
left: 7px;
43+
}
44+
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
45+
border-left: 6px solid transparent;
46+
border-right: 6px solid transparent;
47+
border-bottom: 6px solid white;
48+
top: -6px;
49+
left: 8px;
50+
}
51+
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
52+
border-left: 7px solid transparent;
53+
border-right: 7px solid transparent;
54+
border-top: 7px solid #ccc;
55+
border-top-color: rgba(0, 0, 0, 0.2);
56+
bottom: -7px;
57+
left: 6px;
58+
}
59+
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
60+
border-left: 6px solid transparent;
61+
border-right: 6px solid transparent;
62+
border-top: 6px solid white;
63+
bottom: -6px;
64+
left: 7px;
65+
}
66+
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
67+
left: auto;
68+
right: 6px;
69+
}
70+
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
71+
left: auto;
72+
right: 7px;
73+
}
74+
.bootstrap-datetimepicker-widget .list-unstyled {
75+
margin: 0;
76+
}
77+
.bootstrap-datetimepicker-widget a[data-action] {
78+
padding: 6px 0;
79+
}
80+
.bootstrap-datetimepicker-widget a[data-action]:active {
81+
box-shadow: none;
82+
}
83+
.bootstrap-datetimepicker-widget .timepicker-hour,
84+
.bootstrap-datetimepicker-widget .timepicker-minute,
85+
.bootstrap-datetimepicker-widget .timepicker-second {
86+
width: 54px;
87+
font-weight: bold;
88+
font-size: 1.2em;
89+
margin: 0;
90+
}
91+
.bootstrap-datetimepicker-widget button[data-action] {
92+
padding: 6px;
93+
}
94+
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
95+
position: absolute;
96+
width: 1px;
97+
height: 1px;
98+
margin: -1px;
99+
padding: 0;
100+
overflow: hidden;
101+
clip: rect(0, 0, 0, 0);
102+
border: 0;
103+
content: "Increment Hours";
104+
}
105+
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
106+
position: absolute;
107+
width: 1px;
108+
height: 1px;
109+
margin: -1px;
110+
padding: 0;
111+
overflow: hidden;
112+
clip: rect(0, 0, 0, 0);
113+
border: 0;
114+
content: "Increment Minutes";
115+
}
116+
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
117+
position: absolute;
118+
width: 1px;
119+
height: 1px;
120+
margin: -1px;
121+
padding: 0;
122+
overflow: hidden;
123+
clip: rect(0, 0, 0, 0);
124+
border: 0;
125+
content: "Decrement Hours";
126+
}
127+
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
128+
position: absolute;
129+
width: 1px;
130+
height: 1px;
131+
margin: -1px;
132+
padding: 0;
133+
overflow: hidden;
134+
clip: rect(0, 0, 0, 0);
135+
border: 0;
136+
content: "Decrement Minutes";
137+
}
138+
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
139+
position: absolute;
140+
width: 1px;
141+
height: 1px;
142+
margin: -1px;
143+
padding: 0;
144+
overflow: hidden;
145+
clip: rect(0, 0, 0, 0);
146+
border: 0;
147+
content: "Show Hours";
148+
}
149+
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
150+
position: absolute;
151+
width: 1px;
152+
height: 1px;
153+
margin: -1px;
154+
padding: 0;
155+
overflow: hidden;
156+
clip: rect(0, 0, 0, 0);
157+
border: 0;
158+
content: "Show Minutes";
159+
}
160+
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
161+
position: absolute;
162+
width: 1px;
163+
height: 1px;
164+
margin: -1px;
165+
padding: 0;
166+
overflow: hidden;
167+
clip: rect(0, 0, 0, 0);
168+
border: 0;
169+
content: "Toggle AM/PM";
170+
}
171+
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
172+
position: absolute;
173+
width: 1px;
174+
height: 1px;
175+
margin: -1px;
176+
padding: 0;
177+
overflow: hidden;
178+
clip: rect(0, 0, 0, 0);
179+
border: 0;
180+
content: "Clear the picker";
181+
}
182+
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
183+
position: absolute;
184+
width: 1px;
185+
height: 1px;
186+
margin: -1px;
187+
padding: 0;
188+
overflow: hidden;
189+
clip: rect(0, 0, 0, 0);
190+
border: 0;
191+
content: "Set the date to today";
192+
}
193+
.bootstrap-datetimepicker-widget .picker-switch {
194+
text-align: center;
195+
}
196+
.bootstrap-datetimepicker-widget .picker-switch::after {
197+
position: absolute;
198+
width: 1px;
199+
height: 1px;
200+
margin: -1px;
201+
padding: 0;
202+
overflow: hidden;
203+
clip: rect(0, 0, 0, 0);
204+
border: 0;
205+
content: "Toggle Date and Time Screens";
206+
}
207+
.bootstrap-datetimepicker-widget .picker-switch td {
208+
padding: 0;
209+
margin: 0;
210+
height: auto;
211+
width: auto;
212+
line-height: inherit;
213+
}
214+
.bootstrap-datetimepicker-widget .picker-switch td span {
215+
line-height: 2.5;
216+
height: 2.5em;
217+
width: 100%;
218+
}
219+
.bootstrap-datetimepicker-widget table {
220+
width: 100%;
221+
margin: 0;
222+
}
223+
.bootstrap-datetimepicker-widget table td,
224+
.bootstrap-datetimepicker-widget table th {
225+
text-align: center;
226+
border-radius: 4px;
227+
}
228+
.bootstrap-datetimepicker-widget table th {
229+
height: 20px;
230+
line-height: 20px;
231+
width: 20px;
232+
}
233+
.bootstrap-datetimepicker-widget table th.picker-switch {
234+
width: 145px;
235+
}
236+
.bootstrap-datetimepicker-widget table th.disabled,
237+
.bootstrap-datetimepicker-widget table th.disabled:hover {
238+
background: none;
239+
color: #777777;
240+
cursor: not-allowed;
241+
}
242+
.bootstrap-datetimepicker-widget table th.prev::after {
243+
position: absolute;
244+
width: 1px;
245+
height: 1px;
246+
margin: -1px;
247+
padding: 0;
248+
overflow: hidden;
249+
clip: rect(0, 0, 0, 0);
250+
border: 0;
251+
content: "Previous Month";
252+
}
253+
.bootstrap-datetimepicker-widget table th.next::after {
254+
position: absolute;
255+
width: 1px;
256+
height: 1px;
257+
margin: -1px;
258+
padding: 0;
259+
overflow: hidden;
260+
clip: rect(0, 0, 0, 0);
261+
border: 0;
262+
content: "Next Month";
263+
}
264+
.bootstrap-datetimepicker-widget table thead tr:first-child th {
265+
cursor: pointer;
266+
}
267+
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
268+
background: #eeeeee;
269+
}
270+
.bootstrap-datetimepicker-widget table td {
271+
height: 54px;
272+
line-height: 54px;
273+
width: 54px;
274+
}
275+
.bootstrap-datetimepicker-widget table td.cw {
276+
font-size: .8em;
277+
height: 20px;
278+
line-height: 20px;
279+
color: #777777;
280+
}
281+
.bootstrap-datetimepicker-widget table td.day {
282+
height: 20px;
283+
line-height: 20px;
284+
width: 20px;
285+
}
286+
.bootstrap-datetimepicker-widget table td.day:hover,
287+
.bootstrap-datetimepicker-widget table td.hour:hover,
288+
.bootstrap-datetimepicker-widget table td.minute:hover,
289+
.bootstrap-datetimepicker-widget table td.second:hover {
290+
background: #eeeeee;
291+
cursor: pointer;
292+
}
293+
.bootstrap-datetimepicker-widget table td.old,
294+
.bootstrap-datetimepicker-widget table td.new {
295+
color: #777777;
296+
}
297+
.bootstrap-datetimepicker-widget table td.today {
298+
position: relative;
299+
}
300+
.bootstrap-datetimepicker-widget table td.today:before {
301+
content: '';
302+
display: inline-block;
303+
border: solid transparent;
304+
border-width: 0 0 7px 7px;
305+
border-bottom-color: #337ab7;
306+
border-top-color: rgba(0, 0, 0, 0.2);
307+
position: absolute;
308+
bottom: 4px;
309+
right: 4px;
310+
}
311+
.bootstrap-datetimepicker-widget table td.active,
312+
.bootstrap-datetimepicker-widget table td.active:hover {
313+
background-color: #337ab7;
314+
color: #fff;
315+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
316+
}
317+
.bootstrap-datetimepicker-widget table td.active.today:before {
318+
border-bottom-color: #fff;
319+
}
320+
.bootstrap-datetimepicker-widget table td.disabled,
321+
.bootstrap-datetimepicker-widget table td.disabled:hover {
322+
background: none;
323+
color: #777777;
324+
cursor: not-allowed;
325+
}
326+
.bootstrap-datetimepicker-widget table td span {
327+
display: inline-block;
328+
width: 54px;
329+
height: 54px;
330+
line-height: 54px;
331+
margin: 2px 1.5px;
332+
cursor: pointer;
333+
border-radius: 4px;
334+
}
335+
.bootstrap-datetimepicker-widget table td span:hover {
336+
background: #eeeeee;
337+
}
338+
.bootstrap-datetimepicker-widget table td span.active {
339+
background-color: #337ab7;
340+
color: #fff;
341+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
342+
}
343+
.bootstrap-datetimepicker-widget table td span.old {
344+
color: #777777;
345+
}
346+
.bootstrap-datetimepicker-widget table td span.disabled,
347+
.bootstrap-datetimepicker-widget table td span.disabled:hover {
348+
background: none;
349+
color: #777777;
350+
cursor: not-allowed;
351+
}
352+
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
353+
height: 27px;
354+
line-height: 27px;
355+
}
356+
.bootstrap-datetimepicker-widget.wider {
357+
width: 21em;
358+
}
359+
.bootstrap-datetimepicker-widget .datepicker-decades .decade {
360+
line-height: 1.8em !important;
361+
}
362+
.input-group.date .input-group-addon {
363+
cursor: pointer;
364+
}
365+
.sr-only {
366+
position: absolute;
367+
width: 1px;
368+
height: 1px;
369+
margin: -1px;
370+
padding: 0;
371+
overflow: hidden;
372+
clip: rect(0, 0, 0, 0);
373+
border: 0;
374+
}

0 commit comments

Comments
 (0)