mirrors/vue2-datepicker
2
0
Fork 0
mirror of https://github.com/tenrok/vue2-datepicker.git synced 2026-06-24 02:50:36 +03:00
Code Activity

fix: ie style compatible

Browse Source
This commit is contained in:
mengxiong10
2019-11-21 12:43:14 +08:00
parent f9d21eb3a1
commit e69b9b7d5a
7 changed files with 528 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/__snapshots__/date-picker.test.js.snap
+12 -12
View File
@@ -30,18 +30,18 @@ exports[`DatePicker prop: attrs of input 1`] = `
<!----> <!---->
<div <div
class="mx-datepicker-content-wrapper" class="mx-datepicker-content"
> >
<!----> <!---->
<div <div
class="mx-datepicker-content" class="mx-datepicker-body"
> >
<div /> <div />
</div> </div>
</div>
<!----> <!---->
</div>
</popup-stub> </popup-stub>
</div> </div>
`; `;
@@ -76,18 +76,18 @@ exports[`DatePicker prop: clearable 1`] = `
<!----> <!---->
<div <div
class="mx-datepicker-content-wrapper" class="mx-datepicker-content"
> >
<!----> <!---->
<div <div
class="mx-datepicker-content" class="mx-datepicker-body"
> >
<div /> <div />
</div> </div>
</div>
<!----> <!---->
</div>
</popup-stub> </popup-stub>
</div> </div>
`; `;
@@ -127,18 +127,18 @@ exports[`DatePicker prop: editable 1`] = `
<!----> <!---->
<div <div
class="mx-datepicker-content-wrapper" class="mx-datepicker-content"
> >
<!----> <!---->
<div <div
class="mx-datepicker-content" class="mx-datepicker-body"
> >
<div /> <div />
</div> </div>
</div>
<!----> <!---->
</div>
</popup-stub> </popup-stub>
</div> </div>
`; `;
__test__/__snapshots__/time-panel.test.js.snap
+366 -368
View File
File diff suppressed because it is too large Load Diff
__test__/__snapshots__/time-range.test.js.snap
+26 -20
View File
@@ -24,11 +24,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
style="margin-right: -0px;" style="margin-right: -0px;"
> >
<ul <ul
class="mx-time-list"
data-index="0" data-index="0"
data-type="hour" data-type="hour"
> >
<li <li
class="cell" class="mx-time-item"
data-index="0" data-index="0"
> >
@@ -36,7 +37,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="1" data-index="1"
> >
@@ -44,7 +45,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="2" data-index="2"
> >
@@ -52,7 +53,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="3" data-index="3"
> >
@@ -60,7 +61,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell active" class="mx-time-item active"
data-index="4" data-index="4"
> >
@@ -68,7 +69,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="5" data-index="5"
> >
@@ -95,11 +96,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
style="margin-right: -0px;" style="margin-right: -0px;"
> >
<ul <ul
class="mx-time-list"
data-index="1" data-index="1"
data-type="minute" data-type="minute"
> >
<li <li
class="cell" class="mx-time-item"
data-index="0" data-index="0"
> >
@@ -107,7 +109,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell active" class="mx-time-item active"
data-index="1" data-index="1"
> >
@@ -134,11 +136,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
style="margin-right: -0px;" style="margin-right: -0px;"
> >
<ul <ul
class="mx-time-list"
data-index="2" data-index="2"
data-type="ampm" data-type="ampm"
> >
<li <li
class="cell active" class="mx-time-item active"
data-index="0" data-index="0"
> >
@@ -146,7 +149,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="1" data-index="1"
> >
@@ -187,11 +190,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
style="margin-right: -0px;" style="margin-right: -0px;"
> >
<ul <ul
class="mx-time-list"
data-index="0" data-index="0"
data-type="hour" data-type="hour"
> >
<li <li
class="cell" class="mx-time-item"
data-index="0" data-index="0"
> >
@@ -199,7 +203,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="1" data-index="1"
> >
@@ -207,7 +211,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="2" data-index="2"
> >
@@ -215,7 +219,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell active" class="mx-time-item active"
data-index="3" data-index="3"
> >
@@ -223,7 +227,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="4" data-index="4"
> >
@@ -231,7 +235,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell" class="mx-time-item"
data-index="5" data-index="5"
> >
@@ -258,11 +262,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
style="margin-right: -0px;" style="margin-right: -0px;"
> >
<ul <ul
class="mx-time-list"
data-index="1" data-index="1"
data-type="minute" data-type="minute"
> >
<li <li
class="cell" class="mx-time-item"
data-index="0" data-index="0"
> >
@@ -270,7 +275,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell active" class="mx-time-item active"
data-index="1" data-index="1"
> >
@@ -297,11 +302,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
style="margin-right: -0px;" style="margin-right: -0px;"
> >
<ul <ul
class="mx-time-list"
data-index="2" data-index="2"
data-type="ampm" data-type="ampm"
> >
<li <li
class="cell disabled" class="mx-time-item disabled"
data-index="0" data-index="0"
> >
@@ -309,7 +315,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
</li> </li>
<li <li
class="cell active" class="mx-time-item active"
data-index="1" data-index="1"
> >
src/date-picker.vue
+1 -1
View File
@@ -258,7 +258,7 @@ export default {
return this.value2date(this.value); return this.value2date(this.value);
}, },
text() { text() {
if (this.userInput !== null) { if (this.userInput) {
return this.userInput; return this.userInput;
} }
if (!this.isValidValue(this.innerValue)) { if (!this.isValidValue(this.innerValue)) {
src/style/index.scss
+28 -24
View File
@@ -102,7 +102,6 @@
color: $default-color; color: $default-color;
background-color: #fff; background-color: #fff;
border: 1px solid $border-color; border: 1px solid $border-color;
display: flex;
} }
.mx-datepicker-popup { .mx-datepicker-popup {
@@ -114,11 +113,16 @@
} }
.mx-datepicker-sidebar { .mx-datepicker-sidebar {
float: left;
box-sizing: border-box; box-sizing: border-box;
width: 100px; width: 100px;
padding: 6px; padding: 6px;
overflow: auto; 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 { .mx-datepicker-body {
@@ -308,8 +312,7 @@
&:first-child { &:first-child {
border-left: 0; border-left: 0;
} }
.mx-time-list {
ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
@@ -319,29 +322,11 @@
height: 32 * 6px; height: 32 * 6px;
} }
} }
.mx-time-item {
li { cursor: pointer;
font-size: 12px; font-size: 12px;
height: 32px; height: 32px;
line-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 { &:hover {
background-color: $hover-color; 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;
}
}
src/time/list-columns.vue
+2 -2
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="mx-time-columns"> <div class="mx-time-columns">
<scrollbar-vertical v-for="(col, i) in columns" :key="i" class="mx-time-column"> <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 <li
v-for="(item, j) in col.list" v-for="(item, j) in col.list"
:key="item.value" :key="item.value"
class="cell" class="mx-time-item"
:data-index="j" :data-index="j"
:class="getClasses(item.value)" :class="getClasses(item.value)"
> >
src/time/list-options.vue
+9 -11
View File
@@ -1,16 +1,14 @@
<template> <template>
<scrollbar-vertical> <scrollbar-vertical>
<ul class="mx-time-list"> <div
<li v-for="item in list"
v-for="item in list" :key="item.value"
:key="item.value" class="mx-time-option"
class="cell" :class="getClasses(item.value)"
:class="getClasses(item.value)" @click="handleSelect(item.value)"
@click="handleSelect(item.value)" >
> {{ item.text }}
{{ item.text }} </div>
</li>
</ul>
</scrollbar-vertical> </scrollbar-vertical>
</template> </template>