使用ant design vue的时间选择器TimePicker注意点

已于 2023-04-10 15:48:16 修改
阅读量767 收藏 1
点赞数
文章标签： vue.js 前端 anti-design-vue
于 2023-04-10 15:05:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53821346/article/details/130060357
版权

1.首先在定义数据的.data.ts文件中需要从vue中引入reactive

 2.然后定义一个接收数据的并将其暴露出来，方便后续在页面中可以引用

第一个用于接收开始时间，第二个用于接收结束时间

然后在formSchema中定义一个field为‘actualInspectionDate’ 的显示选择时间

 其中将获取时间数组字段[0]赋值给接收开始时间的，将时间数组字段[1]赋值给接收结束时间的

3.然后在要显示数据的.vue页面将其引入

4.因为最后点击“确定”按钮进行提交的时候，是对页面数据values进行处理然后传给后端的，所以要在这边给values加上两个传递参数：actualInspectionStartDate 和 actualInspectionEndDate 用于接收actualInspectionEndDate传递来的数据，然后将完整的数据传递给后端进行接收.

沉醉何欢凉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2的datepicker / datetimepicker组件
cuk5239的博客
07-25 2675
vue2-datepicker (vue2-datepicker) A Datepicker Component For Vue2 Vue2的Datepicker组件 View demo 查看演示 Download Source 下载源 安装 (Install) $ npm install vue2-datepicker --save 用法 (Usage) <script>...
基于Vue实现timepicker
01-21
在github上看到的练习，看了遍代码后，按自己的思路再修改了一下。 先放原址：https://github.com/graysheeep/vue-material-timepicker。 自己做的在线demo：http://jsbin.com/dumace/2/edit?html,js,output 主要用到的还是Vue的基本知识而已，不过要想到的细节很多。 先放效果，点击上框，显示timepicker。而且可以根据点击的是时还是分来改变圆盘的数字。 这里我用了两个组件，<time>和<time>，这里的时和分的数值我挂在了根实例中，因为两个组件都需要这两个
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue实现excel导入功能
推荐一款实用的 Vue2 时间选择器组件 - vue2-timepicker
最新发布
gitblog_00052的博客
04-19 548
推荐一款实用的 Vue2 时间选择器组件 - vue2-timepicker 项目地址:https://gitcode.com/phoenixwong/vue2-timepicker 在前端开发中，时间选择器是常见的交互元素，用于输入或选择特定的时间。vue2-timepicker 是一个基于 Vue.js 2.x 的轻量级、高度可定制的时间选择器插件，它的出现为开发者提供了更为便捷和灵活的选项。...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本完全相同。 但您也可以使用npm 项目设置 克隆回购 git clone https://github.com/vueComponent/ant-
在输入框后面提示错误_交互细节研究：错误信息提示在表单中的最佳位置
weixin_40002846的博客
12-03 674
最常见的错误信息提示放置位置是表单的上方或内部，那么哪个位置对用户来说体验更好呢？在你的表单设计中，你会把错误信息提示放在哪个位置呢？如果它们不符合用户预期，就可能成为用户体验上的障碍。试想，当用户输入错误的信息时，他们首先需要理解错误是什么，然后才是修正错误、重新提交表单。但如果这个过程太费劲，他们可能就会选择放弃继续填写。表单上方的有效性 VS 内部的有效性最常见的错误信息提示放置位置是表单的...
【TimePiker.RangePiker】时间范围选择组件封装与时间检验
weixin_44545357的博客
02-13 1154
TimePicker设置结束时间大于开始时间；useReducer管理状态；useRef实现光标自动定位
Ant Design学习——TimePicker
qq_26057771的博客
12-27 2255
2021SC@SDUSC 输入或选择时间的控件。 TimePicker时间选择框 当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
【element-ui】日期时间选择器如何控制某时段时间不能选择
qq_26642611的博客
12-30 8041
实现的效果： 1、使用参数picker-options 建议使用参数time-arrow-control，用箭头进行选择（用鼠标滚轮操作稳定性很差） disabledDate ：控制只能选择今天及以后的日期 selectableRange ：控制选择的时间段。如果是今天，则时间从此刻开始，否则从0时开始 <el-date-picke...
Ant Design of Vue DatePicker 给其赋值后不能修改
qq_43060570的博客
06-13 1404
Ant Design of Vue DatePicker 给其赋值后不能修改
Ant Design of Vue 时间选择器（时间限定）
qq_38743783的博客
09-13 2096
Ant Design of Vue 时间选择跨度最多选七天(选完开始时间，决定时间段限定)Ant Design of Vue 时间选择最多选七天（直接限定开始和结束时间）
ant design vue中日期选择框混合时间选择器的用法说明
01-22
首先时间格式化用到moment方法，需要在页面中引入moment组件 import moment from ‘moment’ 结构代码： <a> triggerNode[removed] format=YYYY-MM-DD HH:mm:ss v-decorator=[ 'pushtime', { rules: [{ ...
(实习日记)Ant Design Vue日期选择器，禁止选择当前之前的时间
01-08
Ant Desugn Vue的时间选择器，实习也有一段时间了，也遇到了一些问题，就想记录一下，自认为水平不是很高，欢迎批评指正 //标签 data() { return { Survey: {},//存放截止时间 disabledTime: { hour: '',//存放...
ant design vue datepicker日期选择器中文化操作
01-18
按照ant design vue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言： // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/...
element DateTimePicker修改快捷选项样式
半盏茶. ོ
08-09 1714
vue+element+JQuery修改时间选择快速选择样式
小程序 vant-piker或则vant-area不显示标题和确认取消按钮
fdyputi的博客
05-20 3666
使用vant-picker或vant-area时，有时候会无法显示取消和确认按钮 代码及截图如下： <van-popup show="{{showAddress}}" position="bottom" custom-style="height:42%" bind:click-overlay="closeAddress" > <van-picker
element-ui时间选择器快捷键的选择设置
ating_ing的博客
10-23 659
element-ui时间选择器快捷键的选择设置
android datepicker控件,Android之DatePicker/TimePicker控件
weixin_33072399的博客
05-30 161
TimePicker/DatePicker以及模拟时钟(dialogclock)控件XML部分：xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activ...
关于ant design时间选择器自定义时间显示(a-time-picker)
qq_41826556的博客
07-27 1386
ant design时间选择器自定义显示某些时间
antdesign 日期时间选择器在vue2中的使用步骤
05-20
使用Ant Design的日期时间选择器，需要先安装Ant Design Vue组件库。然后根据Ant Design Vue官方文档中的说明进行配置和使用。下面是在Vue 2中使用Ant Design日期时间选择器的步骤： 1. 安装Ant Design Vue组件库： ```bash npm install ant-design-vue --save ``` 2. 在Vue项目中引入Ant Design Vue组件库： ```javascript import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd); ``` 3. 在Vue组件中使用日期时间选择器： ```html <template> <a-date-picker v-model="date"></a-date-picker> </template> <script> export default { data() { return { date: null } } } </script> ``` 以上代码中，使用了`a-date-picker`组件，绑定了一个`date`的`v-model`指令，用于保存选择的日期时间。 还可以使用`a-time-picker`组件来选择时间，使用方式类似。如果需要同时选择日期和时间，可以使用`a-date-time-picker`组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值