vue3.0时间控件,datetime-local,可单独修改年月日时分的时间控件

<!--作者：dingwangjun-->
<!--
  vue3.0+ts 原创基于datetime-local的时间组件控件
  界面描述：开始时间输入型组件，尽量不要在里面写逻辑操作
-->
<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 lang="ts">
  import { timeForm } from '@/utils/index'
  import { reactive,toRefs,defineComponent,watch,getCurrentInstance } from 'vue'
  export default defineComponent({
    name: '开始日期控件',
    props: ["startDate",'width'],
    setup (props,content) {
      const { proxy } = getCurrentInstance() as any;
      const state:any = reactive({
        width: props.width,
        startTime: timeForm(props.startDate)
      })
      watch(()=> props.startDate,(newValue) => {
        let time = new Date(newValue).getTime()
        if(time>=0){
          state.startTime = timeForm(newValue)
        }
      })
      const methods = {
        dateTimeInput(){
          const vm = proxy;
          // 输入框防抖
          clearTimeout(vm.timer)
          vm.timer = setTimeout(function () {
            vm.dateTimeInput2()
          }, 500)
        },
        dateTimeInput2(){
          let timeValue = state.startTime
          if(timeValue=='' || timeValue== null){
            state.startTime = timeForm(new Date())
            content.emit('toStartDateToVue', new Date())
          }else {
            content.emit('toStartDateToVue', new Date(timeValue))
          }
        },
      }
      return {
        ...toRefs(state),
        ...methods,
      }
    }
  })
</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>

// 在父组件中需要的地方引用
<twnStartDateVue :width="200"
        :startDate="new Date()"
        v-on:toStartDateToVue="toStartDateToVue">
</twnStartDateVue>

// 特定时间控件时间格式
export function timeForm(time){
  let now = new Date(time);
  let year = now.getFullYear();
  let month:any = now.getMonth() + 1;
  month = month < 10 ? "0" + month : month;
  let day:any = now.getDate();
  day = day < 10 ? "0" + day : day;
  let hour:any = now.getHours();
  hour = hour < 10 ? "0" + hour : hour;
  let min:any = now.getMinutes();
  min = min < 10 ? "0" + min : min;
  let timeValue = year+"-"+month+"-"+day+"T"+hour+":"+min;
  return timeValue
}