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、上面的代码,要适当的调整下,就可以使用了。

相关推荐
xkxnq35 分钟前
第八阶段:工程化、质量管控与高级拓展(130天),Vue端到端测试:Cypress自动化测试(登录流程+表单提交+页面跳转)
前端·vue.js·flutter
老毛肚38 分钟前
jeecgboot vue API 拆分02
前端·javascript·vue.js
爱因斯坦乐12 小时前
Vue项目整合
前端·javascript·vue.js
ct97813 小时前
组件间的通信
前端·javascript·vue.js
左手吻左脸。13 小时前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
小新11014 小时前
最简单但完整的 Vue 响应式示例(一个简单的计数器按钮)
前端·javascript·vue.js
刘海不能乱1615 小时前
Java JUC源码分析系列笔记-Synchronized
vue.js
whatever who cares17 小时前
Vue3中vue文件和composables的分工
前端·javascript·vue.js
薛先生_09917 小时前
vue-编程式跳转-基本跳转
前端·javascript·vue.js
码上暴富20 小时前
el-table表格全屏/管理显示字段/导出功能封装
vue.js