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

相关推荐
老华带你飞18 小时前
海产品销售系统|海鲜商城购物|基于SprinBoot+vue的海鲜商城系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·海鲜商城购物系统
7***A44319 小时前
Vue自然语言处理应用
前端·vue.js·自然语言处理
徐小夕19 小时前
耗时一周,我把可视化+零代码+AI融入到了CRM系统,使用体验超酷!
javascript·vue.js·github
明教教主张5G20 小时前
Vue响应式原理(13)-ref实现原理解析
前端·vue.js
kungggyoyoyo20 小时前
TRAE中国版SOLO模式上线!我用它从0到1开发了一款AI小说编辑器
前端·vue.js·trae
什么时候吃饭21 小时前
vue2、vue3父子组件嵌套生命周期执行顺序
前端·vue.js
低保和光头哪个先来21 小时前
场景2:Vue Router 中 query 与 params 的区别
前端·javascript·vue.js·前端框架
hhcccchh1 天前
学习vue第七天 从单页面应用(SPA)进化为后台管理系统架构
vue.js·学习·系统架构
sen_shan1 天前
《Vue项目开发实战》第八章:组件封装--vxeGrid
前端·javascript·vue.js
2***57421 天前
Vue项目国际化实践
前端·javascript·vue.js