vue3 antdv3 a-range-picker a-date-picker 获取选择中的日期值

1、经常用到日期选择、日期范围选择控制

Ant Design Vue --- An enterprise-class UI components based on Ant Design and Vue.js

2、上代码:

复制代码
<RangePicker
        v-model:value="fieldvaluedate"
        style="width: 250px"
        :placeholder="['选择日期', '选择日期']"
        format="YYYY-MM-DD"
        @change="onRangePickerChange"
      />
      <DatePicker
        v-model:value="fieldvaluedate1"
        style="width: 250px"
        placeholder="选择日期"
        format="YYYY-MM-DD"
        @change="onDatePickerChange"
      />

  function onRangePickerChange(value, dateString) {
    fieldvalue = dateString[0] + ',' + dateString[1];
  }

  function onDatePickerChange(value, dateString) {
    fieldvalue = dateString;
  }

import { DatePicker, RangePicker } from 'ant-design-vue';

fieldvalue: '',
fieldvaluedate: ref<[Dayjs, Dayjs]>(),
fieldvaluedate1: ref<Dayjs>(),

 import dayjs, { Dayjs } from 'dayjs';
  import weekday from 'dayjs/plugin/weekday';
  import localeData from 'dayjs/plugin/localeData';
  dayjs.extend(weekday);
  dayjs.extend(localeData);

3、上面的代码,要适当的调整下,就可以使用了。

相关推荐
Mr Xu_7 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠7 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
未来之窗软件服务9 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
phltxy10 小时前
Vue 核心特性实战指南:指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron070711 小时前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js
Byron070713 小时前
从 0 到 1 搭建 Vue 前端工程化体系:提效、提质、降本实战落地
前端·javascript·vue.js
zhengfei61113 小时前
【AI平台】- 基于大模型的知识库与知识图谱智能体开发平台
vue.js·语言模型·langchain·知识图谱·多分类
徐小夕@趣谈前端13 小时前
Web文档的“Office时刻“:jitword共建版2.0发布!让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6
董世昌4114 小时前
深度解析浅拷贝与深拷贝:底层逻辑、实现方式及实战避坑
前端·javascript·vue.js
扶苏100214 小时前
vue使用event.dataTransfer实现A容器数据拖拽复制到到B容器
前端·vue.js·chrome