mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-12 19:52:28 +03:00
fix: ie style compatible
This commit is contained in:
mengxiong10
@@ -30,18 +30,18 @@ exports[`DatePicker prop: attrs of input 1`] = `
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="mx-datepicker-content-wrapper"
|
||||
class="mx-datepicker-content"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="mx-datepicker-content"
|
||||
class="mx-datepicker-body"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</popup-stub>
|
||||
</div>
|
||||
`;
|
||||
@@ -76,18 +76,18 @@ exports[`DatePicker prop: clearable 1`] = `
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="mx-datepicker-content-wrapper"
|
||||
class="mx-datepicker-content"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="mx-datepicker-content"
|
||||
class="mx-datepicker-body"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</popup-stub>
|
||||
</div>
|
||||
`;
|
||||
@@ -127,18 +127,18 @@ exports[`DatePicker prop: editable 1`] = `
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="mx-datepicker-content-wrapper"
|
||||
class="mx-datepicker-content"
|
||||
>
|
||||
<!---->
|
||||
|
||||
<div
|
||||
class="mx-datepicker-content"
|
||||
class="mx-datepicker-body"
|
||||
>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
<!---->
|
||||
</popup-stub>
|
||||
</div>
|
||||
`;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -24,11 +24,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
style="margin-right: -0px;"
|
||||
>
|
||||
<ul
|
||||
class="mx-time-list"
|
||||
data-index="0"
|
||||
data-type="hour"
|
||||
>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="0"
|
||||
>
|
||||
|
||||
@@ -36,7 +37,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="1"
|
||||
>
|
||||
|
||||
@@ -44,7 +45,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="2"
|
||||
>
|
||||
|
||||
@@ -52,7 +53,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="3"
|
||||
>
|
||||
|
||||
@@ -60,7 +61,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell active"
|
||||
class="mx-time-item active"
|
||||
data-index="4"
|
||||
>
|
||||
|
||||
@@ -68,7 +69,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="5"
|
||||
>
|
||||
|
||||
@@ -95,11 +96,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
style="margin-right: -0px;"
|
||||
>
|
||||
<ul
|
||||
class="mx-time-list"
|
||||
data-index="1"
|
||||
data-type="minute"
|
||||
>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="0"
|
||||
>
|
||||
|
||||
@@ -107,7 +109,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell active"
|
||||
class="mx-time-item active"
|
||||
data-index="1"
|
||||
>
|
||||
|
||||
@@ -134,11 +136,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
style="margin-right: -0px;"
|
||||
>
|
||||
<ul
|
||||
class="mx-time-list"
|
||||
data-index="2"
|
||||
data-type="ampm"
|
||||
>
|
||||
<li
|
||||
class="cell active"
|
||||
class="mx-time-item active"
|
||||
data-index="0"
|
||||
>
|
||||
|
||||
@@ -146,7 +149,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="1"
|
||||
>
|
||||
|
||||
@@ -187,11 +190,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
style="margin-right: -0px;"
|
||||
>
|
||||
<ul
|
||||
class="mx-time-list"
|
||||
data-index="0"
|
||||
data-type="hour"
|
||||
>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="0"
|
||||
>
|
||||
|
||||
@@ -199,7 +203,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="1"
|
||||
>
|
||||
|
||||
@@ -207,7 +211,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="2"
|
||||
>
|
||||
|
||||
@@ -215,7 +219,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell active"
|
||||
class="mx-time-item active"
|
||||
data-index="3"
|
||||
>
|
||||
|
||||
@@ -223,7 +227,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="4"
|
||||
>
|
||||
|
||||
@@ -231,7 +235,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="5"
|
||||
>
|
||||
|
||||
@@ -258,11 +262,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
style="margin-right: -0px;"
|
||||
>
|
||||
<ul
|
||||
class="mx-time-list"
|
||||
data-index="1"
|
||||
data-type="minute"
|
||||
>
|
||||
<li
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
data-index="0"
|
||||
>
|
||||
|
||||
@@ -270,7 +275,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell active"
|
||||
class="mx-time-item active"
|
||||
data-index="1"
|
||||
>
|
||||
|
||||
@@ -297,11 +302,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
style="margin-right: -0px;"
|
||||
>
|
||||
<ul
|
||||
class="mx-time-list"
|
||||
data-index="2"
|
||||
data-type="ampm"
|
||||
>
|
||||
<li
|
||||
class="cell disabled"
|
||||
class="mx-time-item disabled"
|
||||
data-index="0"
|
||||
>
|
||||
|
||||
@@ -309,7 +315,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
|
||||
|
||||
</li>
|
||||
<li
|
||||
class="cell active"
|
||||
class="mx-time-item active"
|
||||
data-index="1"
|
||||
>
|
||||
|
||||
|
||||
+1
-1
@@ -258,7 +258,7 @@ export default {
|
||||
return this.value2date(this.value);
|
||||
},
|
||||
text() {
|
||||
if (this.userInput !== null) {
|
||||
if (this.userInput) {
|
||||
return this.userInput;
|
||||
}
|
||||
if (!this.isValidValue(this.innerValue)) {
|
||||
|
||||
+28
-24
@@ -102,7 +102,6 @@
|
||||
color: $default-color;
|
||||
background-color: #fff;
|
||||
border: 1px solid $border-color;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx-datepicker-popup {
|
||||
@@ -114,11 +113,16 @@
|
||||
}
|
||||
|
||||
.mx-datepicker-sidebar {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
padding: 6px;
|
||||
overflow: auto;
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.mx-datepicker-sidebar + .mx-datepicker-content {
|
||||
margin-left: 100px;
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.mx-datepicker-body {
|
||||
@@ -308,8 +312,7 @@
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
.mx-time-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@@ -319,29 +322,11 @@
|
||||
height: 32 * 6px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.mx-time-item {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-time-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-time-list,
|
||||
.mx-time-column {
|
||||
li {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: $hover-color;
|
||||
}
|
||||
@@ -356,3 +341,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx-time-option {
|
||||
cursor: pointer;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
&:hover {
|
||||
background-color: $hover-color;
|
||||
}
|
||||
&.active {
|
||||
color: $primary-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="mx-time-columns">
|
||||
<scrollbar-vertical v-for="(col, i) in columns" :key="i" class="mx-time-column">
|
||||
<ul :data-type="col.type" :data-index="i" @click="handleSelect">
|
||||
<ul class="mx-time-list" :data-type="col.type" :data-index="i" @click="handleSelect">
|
||||
<li
|
||||
v-for="(item, j) in col.list"
|
||||
:key="item.value"
|
||||
class="cell"
|
||||
class="mx-time-item"
|
||||
:data-index="j"
|
||||
:class="getClasses(item.value)"
|
||||
>
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
<template>
|
||||
<scrollbar-vertical>
|
||||
<ul class="mx-time-list">
|
||||
<li
|
||||
v-for="item in list"
|
||||
:key="item.value"
|
||||
class="cell"
|
||||
:class="getClasses(item.value)"
|
||||
@click="handleSelect(item.value)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-for="item in list"
|
||||
:key="item.value"
|
||||
class="mx-time-option"
|
||||
:class="getClasses(item.value)"
|
||||
@click="handleSelect(item.value)"
|
||||
>
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</scrollbar-vertical>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user