antd-vue - - - - - date-picker组件在非本地不好使？无法切换日期？

最新推荐文章于 2024-07-23 21:45:00 发布
最新推荐文章于 2024-07-23 21:45:00 发布
阅读量601 收藏
点赞数
分类专栏： antd-vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dark_programmer/article/details/131308808
版权

date-picker组件在非本地不好使？无法切换日期？

离离原上谱，真的是离了大谱

记录一个深深的踩坑记录！！！

选择日期，肯定要选择ui组件的date-picker，使用antd也不例外。

1.问题描述

在这里插入图片描述

引入组件，ok
本地开发，ok
发到线上，不ok？？？
what???

v-model:value尝试过，本地好使用，测试环境不好使

:value也尝试过，本地好使用，测试环境不好使

真的是离了大谱

2.问题原因 & 解决办法

浪费了许久时间，最后找到这篇文章:Date&Range Picker problem

注意看⚠️⬇️

在这里插入图片描述

Dark_programmer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-data-picker季度区间选择器
08-02
"el-data-picker季度区间选择器"就是这样一个组件，它专为基于ElementUI 2.15.8和Vue.js 2框架的应用设计。这个组件允许用户方便地选取特定时间范围内的季度，提高用户在数据过滤、检索或分析时的效率。 ElementUI...
pickerDateRange日期范围选取
11-08
在IT行业中，尤其是在移动应用开发或者前端开发领域，`pickerDateRange`是一个常见的功能，用于让用户选择一个日期范围。这个功能通常用在预订系统、日程安排或数据分析等场景，以便用户可以方便地设定开始和结束...
antd+vue3 解决微前端 日期选择器测试环境无法选中的问题
Lonely_L9的博客
03-13 1064
在这里我增加了焦点事件，来手动控制选择区域的显示，因为经过排查无法选中日期是因为点击选中时还没有触发这个点击事件，选择区域就已经关闭了，下面是js。最近在项目中遇到一个问题需要引入antd的日期插件，本地是可以正常选择使用的，发到测试环境出现可以打开日期组件却无法选中日期的问题。
【踩坑】vite项目使用ant＜a-date-picker /＞提示报错 rr.isMoment is not a function 解决方法
Jinkerr的博客
05-07 876
vite项目使用ant的提示报错 rr.isMoment is not a function 解决方法
vite .env.test环境使用ant design vue ，打包后a-date-picker控件无法选择日期
拿回忆下酒
04-11 1335
vite .env.test环境使用ant design vue ，打包后a-date-picker控件无法选择日期
ant-design-vue中a-date-picker 日期选择器校验不灵及禁止选择今天之前/之后的日期
浮游的博客
02-24 8906
ant-design-vue中a-date-picker 日期选择器校验不灵的问题 <a-form-model-item label="考试日期" prop="date" :rules="{required: true,message: '必填项',trigger: ['blur']}"> <a-date-picker :disabled="disabled" class="w100" :disabledDate ="disabledDate" v-model="timeInfo.
(实习日记)Ant Design Vue日期选择器，禁止选择当前之前的时间
01-08
a-date-picker时间选择器 Ant Desugn Vue的时间选择器，实习也有一段时间了，也遇到了一些问题，就想记录一下，自认为水平不是很高，欢迎批评指正 //标签 data() { return { Survey: {},//存放截止时间 ...
ant design vue datepicker日期选择器中文化操作
01-18
按照ant design vue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言： // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/...
解决antd datepicker 获取时间默认少8个小时的问题
01-18
1、扩展日期格式化方法 Date.prototype.format = function (fmt) { let o = { M+: this.getMonth() + 1, //月份 d+: this.getDate(), //日 h+: this.getHours(), //小时 m+: this.getMinutes(), //分 s+: ...
a-data-picker本地有效，测试无效解决方案
Hyao-J
03-23 250
在本地上可以进行点击，但在测试环境上能展示面板
Vue element el-date-picker 时间组件类型切换报错，以及下拉框错位
weixin_47309568的博客
01-13 1796
javascript代码。template代码。
vue打包时报错：TypeError: Cannot read property ‘tapPromise‘ of undefined
SunPeng的博客
11-21 1136
TypeError: Cannot read property 'tapPromise' of undefined
antd的时间选择器a-month-picker，本地和生产正常，在测试环境无效的解决
YONJIUJIU的博客
10-10 649
不过看到这里，应该可以解释出当test环境变量名改变后bug就消失的现象，其实也不一定要用.sandbox来替代.test，非.test的值均可。至于为什么会有这段代码，可能是antd团队在测试版本中想避免某些问题，咱也理不清。然后在package.json中把测试版本的打包命令后缀换成sandbox。把环境变量的文件名.env.test改为 .env.sandbox；以上为个人的误打误撞，欢迎大伙指正与补充。
ant datePicker 问题
学吧
07-06 135
ant-design日期选择器组件a-date-picker报错问题
weixin_56728548的博客
08-23 2232
ant-design日期选择器组件a-date-picker报错问题
ant design of vue a-select和a-date-picker点击不显示问题
SSophia的博客
08-25 2625
踩坑记录：select的下拉列表不显示问题 官网给出：菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 <a-select @change="handleProvinceChange" :getPopupContainer="(triggerNode) => triggerNode.parentNode"
vue控件a-date-picker设置默认值的方式以及注意事项
热门推荐
jat的专栏
02-25 1万+
a-date-picker设置默认值 在Vue中datePicker的使用是比较多的，但是用到a-date-picker的时候难免会遇到一下预料之外的事情 在设置默认值这个事情上，就给了当头一棒，设置老不成功 踩坑： 先说如何踩坑，在一般思维观念上，a-date-picker绑定一个model，然后model在初始赋值，值直接用字符串赋值，这就遇上事了 原因： a-date-picker其实数据模型是moment，使用a-date-picker就必须结合moment来实现。 所以model用字
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 234
前提条件：组件创建完成。
在vue3工程里如何实现ant3.0的a-date-picker回显问题
06-03
好的，针对您的问题，我可以提供以下的解决方案： 1. 首先，在 Vue3 工程中安装 ant-design-vue： ```bash npm install ant-design-vue@next ``` 2. 在 main.js 中引入 ant-design-vue 的样式和脚本： ```js import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' createApp(App).use(Antd).mount('#app') ``` 3. 在组件中使用 a-date-picker 组件，并将选中的日期保存在一个变量中： ```html <template> <a-date-picker v-model:value="selectedDate" style="width: 100%;" /> </template> <script> export default { data() { return { selectedDate: null, // 初始化选中的日期为 null }; }, mounted() { // 获取要回显的日期，假设为 "2022-01-01" const date = new Date("2022-01-01"); // 将选中的日期设置为获取的日期 this.selectedDate = date; }, }; </script> ``` 4. 如果您需要在页面中回显已经选中的日期，可以在组件初始化时将选中的日期传入组件： ```html <template> <a-date-picker v-model:value="selectedDate" style="width: 100%;" /> </template> <script> export default { data() { return { selectedDate: null, // 初始化选中的日期为 null }; }, mounted() { // 获取要回显的日期，假设为 "2022-01-01" const date = new Date("2022-01-01"); // 将选中的日期设置为获取的日期 this.selectedDate = date; }, }; </script> ``` 希望以上解决方案能够帮助到您，如有任何疑问，请随时追问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值