<!--作者：dingwangjun-->
<!--vue2写法，应用htlm5时间控件datetime-local界面描述：开始时间输入型组件，尽量不要在里面写逻辑操作
-->
1.时间组件控件
<template><div class="datetime-local"><el-input type="datetime-local"size="mini":style="{width: width+'px'}"v-model="startTime"@change="dateTimeInput(startTime)"max="5200-12-30T00:00:00"></el-input></div>
</template>
<script>export default {props: ["startDate",'width'],data () {return {width: this.width,startTime: this.timeForm(this.startDate)}},watch:{startDate:{handler(newValue, oldValue){let time = new Date(newValue).getTime()if(time>=0){this.startTime = this.timeForm(newValue)}},immediate: true},},methods:{timeForm(time){let now = new Date(time);let year = now.getFullYear();let month = now.getMonth() + 1;month = month < 10 ? "0" + month : month;let day = now.getDate();day = day < 10 ? "0" + day : day;let hour = now.getHours();hour = hour < 10 ? "0" + hour : hour;let min = now.getMinutes();min = min < 10 ? "0" + min : min;let timeValue = year+"-"+month+"-"+day+"T"+hour+":"+min;return timeValue},dateTimeInput(){const vm = this;// 输入框防抖clearTimeout(vm.timer)vm.timer = setTimeout(function () {vm.dateTimeInput2()}, 500)},dateTimeInput2(){let timeValue = this.startTimeif(timeValue=='' || timeValue== null){this.startTime = this.timeForm(new Date())this.$emit('toStartDateToVue', new Date())}else {this.$emit('toStartDateToVue', new Date(timeValue))}},}}
</script>
<style scoped>.datetime-local>>>input[type="datetime-local" i] {align-items: center;display: -webkit-inline-flex;padding-inline-start: 1px;cursor: default;overflow: hidden;padding: 5px 0;}
</style>2.调用组件时间控件
<twnStartDateVue :width="240":startDate="scope.row.zxrq":id="'startDate'+scope.$index"v-on:toStartDateToVue="toStartDateToVue">
</twnStartDateVue>
import twnStartDateVue from '@/views/components/twnStartDateVue.vue'