首页 > 其他分享 >Ant组件踩坑记录(日期选择器)

Ant组件踩坑记录(日期选择器)

时间:2023-11-03 14:47:32浏览次数:32  
标签:插件 Dayjs dayjs 00 Ant 日期 组件 选择器

1.日期选择器<a-date-picker/> 数值转化问题

原先写法,我是直接绑定“2023-11-03 00:00:00”的string值,结果发现日期框无法显示这个日期

<a-date-picker v-model:value="timeInfo.invoiceDate"  format="YYYY-MM-DD HH:mm:ss" show-time />

 网上看了一圈,没有同类问题(PS:我太菜了),但我发现a-date-picker需要得到的不是string类型的日期值,而是需要借助Dayjs(或者其他插件)进行转换后的日期值

 于是,我想了一个绕点但可实现效果的办法,在初始化时先进行一次转换,在日期选择后将string绑定回去,方法如下:

 

插件安装

npm install dayjs

插件引用

 import dayjs, { Dayjs } from 'dayjs'; 

组件变动如下 

<a-date-picker v-model:value="invoiceInfo.invoiceDate" @change="invoiceDateChange" format="YYYY-MM-DD HH:mm:ss" show-time />

 日期框转换方法如下

const timeInfo = reactive({
      invoiceDate: dayjs(invoiceInfo.formDate.InvoiceDate, 'yyyy-MM-dd HH:mm:ss')
})

const invoiceDateChange = (value: Dayjs) => {
      invoiceInfo.formData.InvoiceDate = value.toString()
}

标签:插件,Dayjs,dayjs,00,Ant,日期,组件,选择器
From: https://www.cnblogs.com/RainbowSideKim/p/17807541.html

相关文章

  • 【Mquant】4:量化投研之配置本地数据库
    量化投研配置本地数据库是量化投资领域中非常重要的一环。通过搭建本地数据库,可以方便地存储和管理股票市场的日频数据,为后续的因子计算和策略研究提供支持。1.数据库搭建首先我们抛出一个问题:真的需要数据库吗?前段时间跑了一个回测代码(这里用的是mysql):用海龟策略跑2011年到......
  • 简谈:NIO三大组件之Channel、Buffer
    NIO释义:non-blockingio的简写,即非阻塞IO1.Channelchannel类似stream,但更加底层,是读写数据的双向通道,可将channel的数据写入buffer,也可将buffer的数据写入channel常见的Channel:FileChannel、DatagramChannel、SocketChannel、ServerSocketChannel2.Bufferbuffer用来缓冲......
  • vue 视频上传组件
    组件:<template><divclass="upload-box"><divclass="avatar-uploader-box"><!--图片预览--><div:key="index"class="video-preview"v-for="(item,index)invideoList"&g......
  • 甘特图组件DHTMLX Gantt用例 - 如何拆分任务和里程碑项目路线图
    创建一致且引人注意的视觉样式是任何项目管理应用程序的重要要求,这就是为什么我们会在这个系列中继续探索DHTMLXGantt图库的自定义。在本文中我们将考虑一个新的甘特图定制场景,DHTMLXGantt组件如何创建一个项目路线图。用例-带有自定义时间尺度、拆分任务和文本标签的项目路线......
  • 界面组件DevExtreme v23.1 —— UI模板库更新新功能
    在DevExtreme在v22.2版本中附带了针对Angular、React和Vue的新UI模板库,这个新的UI模板库包含多个响应式UI模板,您可以将其用作业务应用程序的起点,模板包括类似CRM的布局、仪表盘、身份验证表单等。在这篇文章中,我们将看看在v23.1发布周期中引入的与UI模板库相关的更新。DevExtreme......
  • Vue树形单选选择器
    调用页面SuperviseTimerModal.vue代码如下:<template><div><j-modalcentered:title="title":width="width":visible="visible":destroyOnClose="true"switchFullscreen......
  • flutter组件之GridView.builder()
    如果您的Flutter应用程序需要显示大量或无限数量项目的网格视图(例如,从API获取的产品列表),那么您应该使用GridView.builder()而不是GridView()。该**生成器()**只为那些确实可见,所以您的应用程序的性能将得到改善例子步骤:生成一个包含100.000个虚拟产品的列表:finalList<Map>myP......
  • vue3.0父级组件调用子组件方法
    vue3.0父级组件调用子组件方法场景:在页面开发过程中,我经常涉及到不同组件之间的元素和方法的调用。就此记录在vue3.0项目,也是我开发的开源项目中的实现方式。父级组件调用子级1.应用场景以下以我的代码实现为例:在左侧菜单中,通过点击新建会话,在会话列表中新建一个会话框。其中......
  • 常用开源组件推荐
     开源的.NET系统推荐:OXITE:微软ASP.NETMVC案例演示框架。PetShop:微软ASP.NET宠物商店。Orchard:国外一个MVC开源的博客系统。SSCLI:微软在NETFramework2.0时代的开源代码。BlogEngine.NET:国外一款免费开源的博客系统。nopCommerce和Aspxcommerce:国外一套高质量的开源B2......
  • 【宝藏工具】开源组件信息一键查询,快速获取组件来源、版本、源码地址、漏洞补丁、推荐
    铁子们,分享一个开源组件安全检索免费工具,需要的自取~输入组件名,一键查询可以组件版本、来源、安全状态、漏洞详情和推荐版本、修复建议这些。点这个链接注册后直接就能用:组件安全检索工具 一键查询第三方组件版本、漏洞、所属国家、所属语言、源码链接等:查看漏洞详情:......