Skip to content

Commit a6465f8

Browse files
gregzhang616gregzhang616
committed
solve the
1 parent 74ef6fc commit a6465f8

8 files changed

+190
-67
lines changed

‎dist/css/jquery.datepicker.css

+62-27
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
.gmi-date-picker {
22
width: 254px;
3-
transition: all ease-in-out 0.2s;
4-
opacity: 0;
5-
transform: scale(0, 0); }
3+
-webkit-transition: all ease-in-out 0.2s;
4+
transition: all ease-in-out 0.2s; }
65
.gmi-date-picker.has-time {
76
width: 324px; }
87
.gmi-date-picker__header__icon-btn {
@@ -23,7 +22,8 @@
2322
background-color: #fff;
2423
border: 1px solid #d3dce6;
2524
border-radius: 2px;
26-
box-shadow: 0 2px 5px #ccc;
25+
-webkit-box-shadow: 0 2px 5px #ccc;
26+
box-shadow: 0 2px 5px #ccc;
2727
margin: 5px 0;
2828
z-index: 2008; }
2929
.gmi-picker-panel a {
@@ -53,8 +53,8 @@
5353
width: 50%;
5454
float: left;
5555
padding: 0 5px;
56-
-moz-box-sizing: border-box;
57-
box-sizing: border-box; }
56+
-webkit-box-sizing: border-box;
57+
box-sizing: border-box; }
5858
.gmi-picker-panel__body__header--time__wrapper .gmi-input {
5959
width: 100%;
6060
display: inline-block; }
@@ -65,14 +65,15 @@
6565
-moz-appearance: none;
6666
border-radius: 2px;
6767
border: 1px solid #bfcbd9;
68-
-moz-box-sizing: border-box;
69-
box-sizing: border-box;
68+
-webkit-box-sizing: border-box;
69+
box-sizing: border-box;
7070
color: #1f2d3d;
7171
display: block;
7272
line-height: 1;
7373
outline: none;
7474
padding: 3px 10px;
7575
font-size: 13px;
76+
-webkit-transition: border-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
7677
transition: border-color 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); }
7778
.gmi-picker-panel__body__header--time__wrapper .gmi-input__inner:hover {
7879
border: 1px solid #038cd6; }
@@ -100,8 +101,8 @@
100101
.gmi-picker-panel .gmi-date-table td {
101102
width: 32px;
102103
height: 32px;
103-
-moz-box-sizing: border-box;
104-
box-sizing: border-box;
104+
-webkit-box-sizing: border-box;
105+
box-sizing: border-box;
105106
text-align: center;
106107
cursor: pointer;
107108
vertical-align: middle;
@@ -180,9 +181,8 @@
180181

181182
.gmi-date-range-picker {
182183
width: 520px;
183-
transition: all ease-in-out 0.2s;
184-
opacity: 0;
185-
transform: scale(0, 0); }
184+
-webkit-transition: all ease-in-out 0.2s;
185+
transition: all ease-in-out 0.2s; }
186186
.gmi-date-range-picker.has-time {
187187
width: 660px; }
188188
.gmi-date-range-picker__body {
@@ -195,16 +195,16 @@
195195
padding-bottom: 5px; }
196196
.gmi-date-range-picker__body .gmi-picker-panel__body__main {
197197
width: 50%;
198-
-moz-box-sizing: border-box;
199-
box-sizing: border-box;
198+
-webkit-box-sizing: border-box;
199+
box-sizing: border-box;
200200
margin: 0;
201201
padding: 15px; }
202202
.gmi-date-range-picker__header--time__wrapper .gmi-input {
203203
float: left;
204204
width: 50%;
205205
padding: 0 5px;
206-
-moz-box-sizing: border-box;
207-
box-sizing: border-box; }
206+
-webkit-box-sizing: border-box;
207+
box-sizing: border-box; }
208208
.gmi-date-range-picker__header__icon-btn {
209209
color: #97a8be !important;
210210
position: absolute;
@@ -233,9 +233,12 @@
233233
color: #475669;
234234
background-color: #fff;
235235
border: 1px solid #d1dbe5;
236-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
236+
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
237+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
237238
border-radius: 2px;
238-
transform-origin: center top 0;
239+
-webkit-transform-origin: center top 0;
240+
-ms-transform-origin: center top 0;
241+
transform-origin: center top 0;
239242
z-index: 2011;
240243
-webkit-user-select: none;
241244
-moz-user-select: none;
@@ -253,14 +256,16 @@
253256
color: #fff;
254257
position: absolute;
255258
font-size: 14px;
259+
-webkit-transform: translateY(-50%);
260+
-ms-transform: translateY(-50%);
256261
transform: translateY(-50%);
257262
line-height: 16px;
258263
background-color: #039cef;
259264
height: 32px;
260265
left: 0;
261266
right: 0;
262-
-moz-box-sizing: border-box;
263-
box-sizing: border-box;
267+
-webkit-box-sizing: border-box;
268+
box-sizing: border-box;
264269
padding-top: 6px;
265270
text-align: left; }
266271
.gmi-time-panel__body:after {
@@ -269,14 +274,16 @@
269274
color: #fff;
270275
position: absolute;
271276
font-size: 14px;
277+
-webkit-transform: translateY(-50%);
278+
-ms-transform: translateY(-50%);
272279
transform: translateY(-50%);
273280
line-height: 16px;
274281
background-color: #039cef;
275282
height: 32px;
276283
left: 66.66667%;
277284
right: 0;
278-
-moz-box-sizing: border-box;
279-
box-sizing: border-box;
285+
-webkit-box-sizing: border-box;
286+
box-sizing: border-box;
280287
padding-top: 6px;
281288
text-align: left; }
282289
.gmi-time-panel__body__item {
@@ -314,9 +321,37 @@
314321
cursor: not-allowed; }
315322

316323
.picker-show {
317-
opacity: 1;
318-
transform: scale(1, 1); }
324+
animation: showPanel 0.2s ease-in-out;
325+
-webkit-animation: showPanel 0.2s ease-in-out;
326+
-webkit-animation-fill-mode: forwards;
327+
animation-fill-mode: forwards; }
319328

320329
.picker-hide {
321-
opacity: 0;
322-
transform: scale(0, 0); }
330+
animation: hidePanel 0.2s ease-in-out;
331+
-webkit-animation: hidePanel 0.2s ease-in-out;
332+
-webkit-animation-fill-mode: forwards;
333+
animation-fill-mode: forwards; }
334+
335+
@-webkit-keyframes showPanel {
336+
0% {
337+
opacity: 0;
338+
-webkit-transform: scale(0, 0);
339+
transform: scale(0, 0);
340+
-ms-transform: scale(0, 0); }
341+
100% {
342+
opacity: 1;
343+
-webkit-transform: scale(1, 1);
344+
transform: scale(1, 1);
345+
-ms-transform: scale(1, 1); } }
346+
347+
@-webkit-keyframes hidePanel {
348+
0% {
349+
opacity: 1;
350+
-webkit-transform: scale(1, 1);
351+
transform: scale(1, 1);
352+
-ms-transform: scale(1, 1); }
353+
100% {
354+
opacity: 0;
355+
-webkit-transform: scale(0, 0);
356+
transform: scale(0, 0);
357+
-ms-transform: scale(0, 0); } }

‎dist/css/jquery.datepicker.min.css

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

‎dist/js/jquery.datepicker.js

+45-14
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,11 @@
330330
var TIME_PANEL_WIDTH = 154;
331331
// Const KEY_CODE_ENTER
332332
var KEY_CODE_ENTER = 13;
333+
// Const IE_MODE
334+
var inBrowser = typeof window !== 'undefined';
335+
var UA = inBrowser && window.navigator.userAgent.toLowerCase();
336+
var isIE = UA && /msie|trident/.test(UA);
337+
var IE_MODE = document.documentMode;
333338

334339
var DatePicker = function ($el, options) {
335340
var datepicker = this;
@@ -404,11 +409,13 @@
404409
// append picker panel into the dom tree
405410
datepicker.$pickerPanel = $(dateDom).appendTo($body).css({
406411
position: 'absolute',
407-
zIndex: parseInt(zIndex, 10),
408-
transformOrigin: originX + ' 0',
409-
msTransformOrigin: originX + ' 0'
412+
zIndex: parseInt(zIndex, 10)
410413
});
411414

415+
if (!isIE || (isIE && IE_MODE > 9)) {
416+
datepicker.$pickerPanel.css({transformOrigin: originX + ' 0', msTransformOrigin: originX + ' 0'});
417+
}
418+
412419
// set position for time panel
413420
if (datepicker.$pickerPanel.find('.gmi-time-panel').length > 0) {
414421
var $timePanel = datepicker.$pickerPanel.find('.gmi-time-panel');
@@ -1910,21 +1917,29 @@
19101917
datepicker.$pickerPanel.show();
19111918
// set picker panel position
19121919
core._setDatePanelPosition();
1913-
setTimeout(function () {
1914-
datepicker.$pickerPanel.removeClass('picker-hide').addClass('picker-show');
1920+
1921+
animation(datepicker.$pickerPanel, 'picker-show', function () {
19151922
core._trigger('show.datepicker');
1916-
}, 0);
1923+
});
1924+
// datepicker.$pickerPanel.removeClass('picker-hide').addClass('picker-show');
1925+
// setTimeout(function () {
1926+
//
1927+
// }, 0);
19171928
},
19181929
_hidePickerPanel: function () {
19191930
var type = datepicker.type;
19201931
var currentView = datepicker.currentView;
19211932
if (datepicker.$pickerPanel.is(':hidden')) return;
19221933
if (type === 'date-range' || type === 'datetime-range' || type === 'month' || type === 'year') {
1923-
datepicker.$pickerPanel.addClass('picker-hide').removeClass('picker-show');
1924-
setTimeout(function () {
1934+
// datepicker.$pickerPanel.addClass('picker-hide').removeClass('picker-show');
1935+
// setTimeout(function () {
1936+
// datepicker.$pickerPanel.hide();
1937+
// core._trigger('hide.datepicker');
1938+
// }, 100);
1939+
animation(datepicker.$pickerPanel, 'picker-hide', function () {
19251940
datepicker.$pickerPanel.hide();
19261941
core._trigger('hide.datepicker');
1927-
}, 100);
1942+
});
19281943
} else {
19291944
switch (currentView) {
19301945
case 'yearView':
@@ -1939,13 +1954,18 @@
19391954
default:
19401955
break;
19411956
}
1942-
datepicker.$pickerPanel.addClass('picker-hide').removeClass('picker-show');
1943-
setTimeout(function () {
1957+
// datepicker.$pickerPanel.addClass('picker-hide').removeClass('picker-show');
1958+
// setTimeout(function () {
1959+
// datepicker.$pickerPanel.hide().find('.gmi-date-table').show()
1960+
// .siblings('table').hide();
1961+
// core._trigger('hide.datepicker');
1962+
// datepicker.currentView = 'dateView';
1963+
// }, 100);
1964+
animation(datepicker.$pickerPanel, 'picker-hide', function () {
19441965
datepicker.$pickerPanel.hide().find('.gmi-date-table').show()
1945-
.siblings('table').hide();
1966+
.siblings('table').hide();
19461967
core._trigger('hide.datepicker');
1947-
datepicker.currentView = 'dateView';
1948-
}, 100);
1968+
});
19491969
}
19501970
},
19511971
_elFocusHandler: function () {
@@ -2210,4 +2230,15 @@
22102230
function isDate (date) {
22112231
return typeof date === 'object' && date instanceof Date;
22122232
}
2233+
2234+
function animation ($target, classes, fn) {
2235+
$target.removeClass(classes).addClass(classes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
2236+
$(this).removeClass(classes);
2237+
fn.apply($target, toArray(arguments));
2238+
});
2239+
if (isIE && IE_MODE <= 9) {
2240+
$(this).removeClass(classes);
2241+
fn.apply($target, toArray(arguments));
2242+
}
2243+
}
22132244
}, window.jQuery, window.fecha));

‎dist/js/jquery.datepicker.min.js

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

‎gulpfile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ gulp.task('process-component-sass', function () {
6363
return gulp.src(componentSassList)
6464
.pipe($dev().sass())
6565
.pipe($dev().autoprefixer({
66-
browsers: ["last 2 versions", "Firefox >= 20"]
66+
browsers: ["last 10 versions"]
6767
}))
6868
.pipe($dev().concat('jquery.datepicker.css'))
6969
.pipe(gulp.dest(distBasePath + 'css'))

0 commit comments

Comments
 (0)