vuetify3封装时间选择器（DatePicker）2：添加确定和取消按钮

是吗乔治

已于 2024-03-28 15:32:23 修改

阅读量825

点赞数 8

文章标签： vue.js 前端 javascript

于 2023-12-09 11:41:28 首次发布

本文链接：https://blog.csdn.net/qq_34361235/article/details/134892703

版权

vue3：封装vuetify3时间选择器DatePicker中添加确定和取消

原版选择日期后自动退出传送门连接

升级后的界面展示

在这里插入图片描述

实现方式

在v-data-picker标签中添加插槽actions
v-menu标签内添加v-model

贴代码

<!-- @Datepicker使用方式
<Timepicker lable="表单日期名字" v-model="绑定表单中的日期参数" /> -->

<template>
  <v-menu
    :close-on-content-click="false"
    location="bottom"
    v-model="DTStatus"
  >
    <template v-slot:activator="{ props }">
      <v-text-field v-model="formatDate" density="compact" v-bind="props" readonly  variant="underlined" append-inner-icon="mdi-calendar-month-outline" :label="label" ></v-text-field>
    </template>
      <v-date-picker v-model="datetime">
        <template v-slot:actions>
          <v-btn color="primary" @click="DTStatus = false">取消</v-btn>
          <v-btn color="primary" @click="clickHandle">确定</v-btn>
        </template>
      </v-date-picker>
  </v-menu>  
</template>
<script lang="ts" setup>
  import { ref,watch } from 'vue'
  import  Dayjs  from 'dayjs'

  // 定义时间选择器显示状态
  const DTStatus = ref<boolean>(false)

  // datepicker初始格式 Thu Nov 09 2023 00:00:00 GMT+0800 (中国标准时间)
  const datetime = ref()
  // 转义成YYYY-MM-DD
  const formatDate = ref()
  defineProps<{
    // 固定名称 modelValue
    modelValue:string,
    label:string
  }>()


  const emit = defineEmits(['update:modelValue'])  "update:modelValue"
  // 没有取消和确认按钮的时候的监听 datepicker数值
  // watch(datetime, () => {
  //   formatDate.value = Dayjs(datetime.value).format("YYYY-MM-DD")
  //   emit('update:modelValue',formatDate.value)
  // })


  // 确认按钮事件
  const clickHandle = () => {
  	//格式转换
    formatDate.value = Dayjs(datetime.value).format("YYYY-MM-DD")
    //组件传值
    emit('update:modelValue',formatDate.value)
    //关闭弹窗
    DTStatus.value = false
  }


</script>