Skip to content

Commit 8f93dc7

Browse files
eternicodeeternicode
committed
Move inline datepicker css changes to .less file
1 parent 529782a commit 8f93dc7

File tree

3 files changed

+166
-153
lines changed

3 files changed

+166
-153
lines changed

‎css/datepicker.css

Lines changed: 126 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,16 @@
1616
/*.dow {
1717
border-top: 1px solid #ddd !important;
1818
}*/
19-
}
2019

20+
}
2121
.datepicker-inline {
22-
width: 220px;
23-
/* height: 220px; */
22+
width: 220px;
2423
}
25-
26-
.datepicker-float {
24+
.datepicker-dropdown {
2725
top: 0;
28-
left: 0;
26+
left: 0;
2927
}
30-
31-
.datepicker-float:before {
28+
.datepicker-dropdown:before {
3229
content: '';
3330
display: inline-block;
3431
border-left: 7px solid transparent;
@@ -39,7 +36,7 @@
3936
top: -7px;
4037
left: 6px;
4138
}
42-
.datepicker-float:after {
39+
.datepicker-dropdown:after {
4340
content: '';
4441
display: inline-block;
4542
border-left: 6px solid transparent;
@@ -72,29 +69,31 @@
7269
-webkit-border-radius: 4px;
7370
-moz-border-radius: 4px;
7471
border-radius: 4px;
75-
/* vitalets: required to disable css inheritance when display inline inside table */
76-
border: none !important;
77-
background-color: transparent !important;
72+
border: none;
73+
}
74+
.table-striped .datepicker table tr td,
75+
.table-striped .datepicker table tr th {
76+
background-color: transparent;
7877
}
79-
.datepicker td.day:hover {
80-
background: #eeeeee !important; /* disable inheritance for inline */
78+
.datepicker table tr td.day:hover {
79+
background: #eeeeee;
8180
cursor: pointer;
8281
}
83-
.datepicker td.old,
84-
.datepicker td.new {
82+
.datepicker table tr td.old,
83+
.datepicker table tr td.new {
8584
color: #999999;
8685
}
87-
.datepicker td.disabled,
88-
.datepicker td.disabled:hover {
86+
.datepicker table tr td.disabled,
87+
.datepicker table tr td.disabled:hover {
8988
background: none;
9089
color: #999999;
9190
cursor: default;
9291
}
93-
.datepicker td.today,
94-
.datepicker td.today:hover,
95-
.datepicker td.today.disabled,
96-
.datepicker td.today.disabled:hover {
97-
background-color: #fde19a !important; /* disable inheritance for inline */
92+
.datepicker table tr td.today,
93+
.datepicker table tr td.today:hover,
94+
.datepicker table tr td.today.disabled,
95+
.datepicker table tr td.today.disabled:hover {
96+
background-color: #fde19a;
9897
background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
9998
background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
10099
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
@@ -105,45 +104,45 @@
105104
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
106105
border-color: #fdf59a #fdf59a #fbed50;
107106
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
108-
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
109-
}
110-
.datepicker td.today:hover,
111-
.datepicker td.today:hover:hover,
112-
.datepicker td.today.disabled:hover,
113-
.datepicker td.today.disabled:hover:hover,
114-
.datepicker td.today:active,
115-
.datepicker td.today:hover:active,
116-
.datepicker td.today.disabled:active,
117-
.datepicker td.today.disabled:hover:active,
118-
.datepicker td.today.active,
119-
.datepicker td.today:hover.active,
120-
.datepicker td.today.disabled.active,
121-
.datepicker td.today.disabled:hover.active,
122-
.datepicker td.today.disabled,
123-
.datepicker td.today:hover.disabled,
124-
.datepicker td.today.disabled.disabled,
125-
.datepicker td.today.disabled:hover.disabled,
126-
.datepicker td.today[disabled],
127-
.datepicker td.today:hover[disabled],
128-
.datepicker td.today.disabled[disabled],
129-
.datepicker td.today.disabled:hover[disabled] {
130-
background-color: #fdf59a !important; /* disable inheritance for inline */
131-
}
132-
.datepicker td.today:active,
133-
.datepicker td.today:hover:active,
134-
.datepicker td.today.disabled:active,
135-
.datepicker td.today.disabled:hover:active,
136-
.datepicker td.today.active,
137-
.datepicker td.today:hover.active,
138-
.datepicker td.today.disabled.active,
139-
.datepicker td.today.disabled:hover.active {
107+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
108+
}
109+
.datepicker table tr td.today:hover,
110+
.datepicker table tr td.today:hover:hover,
111+
.datepicker table tr td.today.disabled:hover,
112+
.datepicker table tr td.today.disabled:hover:hover,
113+
.datepicker table tr td.today:active,
114+
.datepicker table tr td.today:hover:active,
115+
.datepicker table tr td.today.disabled:active,
116+
.datepicker table tr td.today.disabled:hover:active,
117+
.datepicker table tr td.today.active,
118+
.datepicker table tr td.today:hover.active,
119+
.datepicker table tr td.today.disabled.active,
120+
.datepicker table tr td.today.disabled:hover.active,
121+
.datepicker table tr td.today.disabled,
122+
.datepicker table tr td.today:hover.disabled,
123+
.datepicker table tr td.today.disabled.disabled,
124+
.datepicker table tr td.today.disabled:hover.disabled,
125+
.datepicker table tr td.today[disabled],
126+
.datepicker table tr td.today:hover[disabled],
127+
.datepicker table tr td.today.disabled[disabled],
128+
.datepicker table tr td.today.disabled:hover[disabled] {
129+
background-color: #fdf59a;
130+
}
131+
.datepicker table tr td.today:active,
132+
.datepicker table tr td.today:hover:active,
133+
.datepicker table tr td.today.disabled:active,
134+
.datepicker table tr td.today.disabled:hover:active,
135+
.datepicker table tr td.today.active,
136+
.datepicker table tr td.today:hover.active,
137+
.datepicker table tr td.today.disabled.active,
138+
.datepicker table tr td.today.disabled:hover.active {
140139
background-color: #fbf069 \9;
141140
}
142-
.datepicker td.active,
143-
.datepicker td.active:hover,
144-
.datepicker td.active.disabled,
145-
.datepicker td.active.disabled:hover {
146-
background-color: #006dcc !important; /* disable inheritance for inline */
141+
.datepicker table tr td.active,
142+
.datepicker table tr td.active:hover,
143+
.datepicker table tr td.active.disabled,
144+
.datepicker table tr td.active.disabled:hover {
145+
background-color: #006dcc;
147146
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
148147
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
149148
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
@@ -154,43 +153,43 @@
154153
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
155154
border-color: #0044cc #0044cc #002a80;
156155
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
157-
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
156+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
158157
color: #fff;
159158
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
160159
}
161-
.datepicker td.active:hover,
162-
.datepicker td.active:hover:hover,
163-
.datepicker td.active.disabled:hover,
164-
.datepicker td.active.disabled:hover:hover,
165-
.datepicker td.active:active,
166-
.datepicker td.active:hover:active,
167-
.datepicker td.active.disabled:active,
168-
.datepicker td.active.disabled:hover:active,
169-
.datepicker td.active.active,
170-
.datepicker td.active:hover.active,
171-
.datepicker td.active.disabled.active,
172-
.datepicker td.active.disabled:hover.active,
173-
.datepicker td.active.disabled,
174-
.datepicker td.active:hover.disabled,
175-
.datepicker td.active.disabled.disabled,
176-
.datepicker td.active.disabled:hover.disabled,
177-
.datepicker td.active[disabled],
178-
.datepicker td.active:hover[disabled],
179-
.datepicker td.active.disabled[disabled],
180-
.datepicker td.active.disabled:hover[disabled] {
160+
.datepicker table tr td.active:hover,
161+
.datepicker table tr td.active:hover:hover,
162+
.datepicker table tr td.active.disabled:hover,
163+
.datepicker table tr td.active.disabled:hover:hover,
164+
.datepicker table tr td.active:active,
165+
.datepicker table tr td.active:hover:active,
166+
.datepicker table tr td.active.disabled:active,
167+
.datepicker table tr td.active.disabled:hover:active,
168+
.datepicker table tr td.active.active,
169+
.datepicker table tr td.active:hover.active,
170+
.datepicker table tr td.active.disabled.active,
171+
.datepicker table tr td.active.disabled:hover.active,
172+
.datepicker table tr td.active.disabled,
173+
.datepicker table tr td.active:hover.disabled,
174+
.datepicker table tr td.active.disabled.disabled,
175+
.datepicker table tr td.active.disabled:hover.disabled,
176+
.datepicker table tr td.active[disabled],
177+
.datepicker table tr td.active:hover[disabled],
178+
.datepicker table tr td.active.disabled[disabled],
179+
.datepicker table tr td.active.disabled:hover[disabled] {
181180
background-color: #0044cc;
182181
}
183-
.datepicker td.active:active,
184-
.datepicker td.active:hover:active,
185-
.datepicker td.active.disabled:active,
186-
.datepicker td.active.disabled:hover:active,
187-
.datepicker td.active.active,
188-
.datepicker td.active:hover.active,
189-
.datepicker td.active.disabled.active,
190-
.datepicker td.active.disabled:hover.active {
182+
.datepicker table tr td.active:active,
183+
.datepicker table tr td.active:hover:active,
184+
.datepicker table tr td.active.disabled:active,
185+
.datepicker table tr td.active.disabled:hover:active,
186+
.datepicker table tr td.active.active,
187+
.datepicker table tr td.active:hover.active,
188+
.datepicker table tr td.active.disabled.active,
189+
.datepicker table tr td.active.disabled:hover.active {
191190
background-color: #003399 \9;
192191
}
193-
.datepicker td span {
192+
.datepicker table tr td span {
194193
display: block;
195194
width: 23%;
196195
height: 54px;
@@ -202,19 +201,19 @@
202201
-moz-border-radius: 4px;
203202
border-radius: 4px;
204203
}
205-
.datepicker td span:hover {
204+
.datepicker table tr td span:hover {
206205
background: #eeeeee;
207206
}
208-
.datepicker td span.disabled,
209-
.datepicker td span.disabled:hover {
207+
.datepicker table tr td span.disabled,
208+
.datepicker table tr td span.disabled:hover {
210209
background: none;
211210
color: #999999;
212211
cursor: default;
213212
}
214-
.datepicker td span.active,
215-
.datepicker td span.active:hover,
216-
.datepicker td span.active.disabled,
217-
.datepicker td span.active.disabled:hover {
213+
.datepicker table tr td span.active,
214+
.datepicker table tr td span.active:hover,
215+
.datepicker table tr td span.active.disabled,
216+
.datepicker table tr td span.active.disabled:hover {
218217
background-color: #006dcc;
219218
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
220219
background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
@@ -226,43 +225,43 @@
226225
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
227226
border-color: #0044cc #0044cc #002a80;
228227
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
229-
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
228+
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
230229
color: #fff;
231230
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
232231
}
233-
.datepicker td span.active:hover,
234-
.datepicker td span.active:hover:hover,
235-
.datepicker td span.active.disabled:hover,
236-
.datepicker td span.active.disabled:hover:hover,
237-
.datepicker td span.active:active,
238-
.datepicker td span.active:hover:active,
239-
.datepicker td span.active.disabled:active,
240-
.datepicker td span.active.disabled:hover:active,
241-
.datepicker td span.active.active,
242-
.datepicker td span.active:hover.active,
243-
.datepicker td span.active.disabled.active,
244-
.datepicker td span.active.disabled:hover.active,
245-
.datepicker td span.active.disabled,
246-
.datepicker td span.active:hover.disabled,
247-
.datepicker td span.active.disabled.disabled,
248-
.datepicker td span.active.disabled:hover.disabled,
249-
.datepicker td span.active[disabled],
250-
.datepicker td span.active:hover[disabled],
251-
.datepicker td span.active.disabled[disabled],
252-
.datepicker td span.active.disabled:hover[disabled] {
232+
.datepicker table tr td span.active:hover,
233+
.datepicker table tr td span.active:hover:hover,
234+
.datepicker table tr td span.active.disabled:hover,
235+
.datepicker table tr td span.active.disabled:hover:hover,
236+
.datepicker table tr td span.active:active,
237+
.datepicker table tr td span.active:hover:active,
238+
.datepicker table tr td span.active.disabled:active,
239+
.datepicker table tr td span.active.disabled:hover:active,
240+
.datepicker table tr td span.active.active,
241+
.datepicker table tr td span.active:hover.active,
242+
.datepicker table tr td span.active.disabled.active,
243+
.datepicker table tr td span.active.disabled:hover.active,
244+
.datepicker table tr td span.active.disabled,
245+
.datepicker table tr td span.active:hover.disabled,
246+
.datepicker table tr td span.active.disabled.disabled,
247+
.datepicker table tr td span.active.disabled:hover.disabled,
248+
.datepicker table tr td span.active[disabled],
249+
.datepicker table tr td span.active:hover[disabled],
250+
.datepicker table tr td span.active.disabled[disabled],
251+
.datepicker table tr td span.active.disabled:hover[disabled] {
253252
background-color: #0044cc;
254253
}
255-
.datepicker td span.active:active,
256-
.datepicker td span.active:hover:active,
257-
.datepicker td span.active.disabled:active,
258-
.datepicker td span.active.disabled:hover:active,
259-
.datepicker td span.active.active,
260-
.datepicker td span.active:hover.active,
261-
.datepicker td span.active.disabled.active,
262-
.datepicker td span.active.disabled:hover.active {
254+
.datepicker table tr td span.active:active,
255+
.datepicker table tr td span.active:hover:active,
256+
.datepicker table tr td span.active.disabled:active,
257+
.datepicker table tr td span.active.disabled:hover:active,
258+
.datepicker table tr td span.active.active,
259+
.datepicker table tr td span.active:hover.active,
260+
.datepicker table tr td span.active.disabled.active,
261+
.datepicker table tr td span.active.disabled:hover.active {
263262
background-color: #003399 \9;
264263
}
265-
.datepicker td span.old {
264+
.datepicker table tr td span.old {
266265
color: #999999;
267266
}
268267
.datepicker th.switch {

‎js/bootstrap-datepicker.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
if(this.isInline) {
6565
this.picker.addClass('datepicker-inline');
6666
} else {
67-
this.picker.addClass('dropdown-menu');
67+
this.picker.addClass('datepicker-dropdown dropdown-menu');
6868
}
6969
$(document).on('mousedown', function (e) {
7070
// Clicked outside the datepicker, hide it
@@ -720,7 +720,7 @@
720720
Method show() does not set display css correctly and datepicker is not shown.
721721
Changed to .css('display', 'block') solve the problem.
722722
See https://github.com/vitalets/x-editable/issues/37
723-
723+
724724
In jquery 1.7.2+ everything works fine.
725725
*/
726726
//this.picker.find('>div').hide().filter('.datepicker-'+DPGlobal.modes[this.viewMode].clsName).show();
@@ -930,7 +930,7 @@
930930
'</table>'+
931931
'</div>'+
932932
'</div>';
933-
933+
934934
$.fn.datepicker.DPGlobal = DPGlobal;
935-
935+
936936
}( window.jQuery );

0 commit comments

Comments
 (0)