|
@@ -1,5 +1,8 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="datetime-container input-group" :class="{'has-error' : isValid === false}">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="datetime-container input-group"
|
|
|
|
|
+ :class="{'has-error' : isValid === false}"
|
|
|
|
|
+ >
|
|
|
<input
|
|
<input
|
|
|
id="datetime"
|
|
id="datetime"
|
|
|
type="datetime-local"
|
|
type="datetime-local"
|
|
@@ -17,7 +20,11 @@
|
|
|
@change="textValueChanged($event)"
|
|
@change="textValueChanged($event)"
|
|
|
/>
|
|
/>
|
|
|
|
|
|
|
|
- <span v-if="isValid === false" class="glyphicon glyphicon-remove datetime-item-3 form-control-feedback" aria-hidden="true" />
|
|
|
|
|
|
|
+ <span
|
|
|
|
|
+ v-if="isValid === false"
|
|
|
|
|
+ class="glyphicon glyphicon-remove datetime-item-3 form-control-feedback"
|
|
|
|
|
+ aria-hidden="true"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -32,13 +39,13 @@ export default {
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
props: {
|
|
props: {
|
|
|
- 'dateValue':{
|
|
|
|
|
|
|
+ 'dateValue': {
|
|
|
type: String,
|
|
type: String,
|
|
|
default: null,
|
|
default: null,
|
|
|
},
|
|
},
|
|
|
- 'readonly':{
|
|
|
|
|
|
|
+ 'readonly': {
|
|
|
type: Boolean,
|
|
type: Boolean,
|
|
|
- default: null,
|
|
|
|
|
|
|
+ default: false,
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
|
|
|
|
@@ -54,8 +61,8 @@ export default {
|
|
|
computed: {
|
|
computed: {
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * 把(YYYY-MM-DD HH:mm:ss)格式的日期字符串转换成datetime-local(YYYY-MM-DDTHH:mm:ss)
|
|
|
|
|
- */
|
|
|
|
|
|
|
+ * 把(YYYY-MM-DD HH:mm:ss)格式的日期字符串转换成datetime-local(YYYY-MM-DDTHH:mm:ss)
|
|
|
|
|
+ */
|
|
|
dateTime: function () {
|
|
dateTime: function () {
|
|
|
if (this.dateValue == null || this.dateValue.length == 0) {
|
|
if (this.dateValue == null || this.dateValue.length == 0) {
|
|
|
return null;
|
|
return null;
|
|
@@ -67,7 +74,7 @@ export default {
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
mounted: function () {
|
|
mounted: function () {
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
@@ -76,7 +83,7 @@ export default {
|
|
|
*/
|
|
*/
|
|
|
isValidDateTime: function (text) {
|
|
isValidDateTime: function (text) {
|
|
|
if (text == null || text.length == 0) {
|
|
if (text == null || text.length == 0) {
|
|
|
- return false;
|
|
|
|
|
|
|
+ return true;
|
|
|
}
|
|
}
|
|
|
return moment(text, 'YYYY-MM-DD HH:mm:ss', true).isValid();
|
|
return moment(text, 'YYYY-MM-DD HH:mm:ss', true).isValid();
|
|
|
},
|
|
},
|
|
@@ -86,7 +93,11 @@ export default {
|
|
|
|
|
|
|
|
// 日期时间校验
|
|
// 日期时间校验
|
|
|
if (this.isValidDateTime(newValue)) {
|
|
if (this.isValidDateTime(newValue)) {
|
|
|
- this.isValid = true;
|
|
|
|
|
|
|
+ if (this.readonly == true && (newValue == null || newValue.length == 0)) {
|
|
|
|
|
+ this.isValid = false;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.isValid = true;
|
|
|
|
|
+ }
|
|
|
console.log('DateTimeV2 input value changed: orginal value: %s, current value: %s', this.dateValue, newValue);
|
|
console.log('DateTimeV2 input value changed: orginal value: %s, current value: %s', this.dateValue, newValue);
|
|
|
this.$emit('on-value-change', newValue);
|
|
this.$emit('on-value-change', newValue);
|
|
|
} else {
|
|
} else {
|
|
@@ -96,8 +107,8 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
- * 值改变事件
|
|
|
|
|
- */
|
|
|
|
|
|
|
+ * 值改变事件
|
|
|
|
|
+ */
|
|
|
datetimeLocalValueChanged: function (event) {
|
|
datetimeLocalValueChanged: function (event) {
|
|
|
let newValue = event.target.value;
|
|
let newValue = event.target.value;
|
|
|
let parsedDateTime = '';
|
|
let parsedDateTime = '';
|
|
@@ -107,7 +118,11 @@ export default {
|
|
|
|
|
|
|
|
// 日期时间校验
|
|
// 日期时间校验
|
|
|
if (this.isValidDateTime(parsedDateTime)) {
|
|
if (this.isValidDateTime(parsedDateTime)) {
|
|
|
- this.isValid = true;
|
|
|
|
|
|
|
+ if (this.readonly == true && (parsedDateTime == null || parsedDateTime.length == 0)) {
|
|
|
|
|
+ this.isValid = false;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.isValid = true;
|
|
|
|
|
+ }
|
|
|
console.log('DateTimeV2 value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
|
|
console.log('DateTimeV2 value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
|
|
|
this.$emit('on-value-change', parsedDateTime);
|
|
this.$emit('on-value-change', parsedDateTime);
|
|
|
} else {
|
|
} else {
|
|
@@ -120,7 +135,7 @@ export default {
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
|
.form-inline .datetime-container {
|
|
.form-inline .datetime-container {
|
|
|
- display : inline-flex !important;
|
|
|
|
|
|
|
+ display: inline-flex !important;
|
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
@@ -134,8 +149,7 @@ export default {
|
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
|
min-width: 200px;
|
|
min-width: 200px;
|
|
|
/* display : inline-flex; */
|
|
/* display : inline-flex; */
|
|
|
- display : block;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ display: block;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.datetime-item-1 {
|
|
.datetime-item-1 {
|
|
@@ -150,11 +164,16 @@ export default {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
border-radius: 4px 0px 0px 4px !important;
|
|
border-radius: 4px 0px 0px 4px !important;
|
|
|
display: inline;
|
|
display: inline;
|
|
|
- width: calc(100% - 45px) !important;
|
|
|
|
|
|
|
+ width: calc(100% - 39px) !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.datetime-item-3 {
|
|
.datetime-item-3 {
|
|
|
- right: 45px;
|
|
|
|
|
|
|
+ right: 39px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/*控制下拉小箭头的*/
|
|
|
|
|
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
|
|
|
|
|
+ padding-right: 0px;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
|
|
|