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

最新推荐文章于 2023-10-10 13:57:51 发布
最新推荐文章于 2023-10-10 13:57:51 发布
阅读量738 收藏
点赞数
分类专栏： 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
关注
专栏目录
关于antd-vue 日期组件手动关闭弹出框的问题
weixin_44191425的博客
12-14 3791
由于产品的需求，有一个日期筛选的条件，如图所示 框架选用的是ant-vue，选择了其中range的插件 <a-range-picker style="width: 214px" :value="searchTime" :placeholder="['开始月份', '结束月份']" format="YYYY-MM" :mode="modelType" @panelChange="handleChange" @change="clearValue" > <a-icon slot="suffi
前端——》ant-design-vue组件的使用之四（DatePicker 日期选择框和Calendar日历的使用）
叙传
07-05 5443
日期选择器的赋值与取值 效果 实现方式 如图所示日期选择框的实现代码如下所示 html代码如下： <a-date-picker v-model="form.taskStartAt" :format="dateFormat" style="width: 100%" /> js代码如下 import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') export default { data ()
antd+vue3 解决微前端 日期选择器测试环境无法选中的问题
Lonely_L9的博客
03-13 1210
在这里我增加了焦点事件，来手动控制选择区域的显示，因为经过排查无法选中日期是因为点击选中时还没有触发这个点击事件，选择区域就已经关闭了，下面是js。最近在项目中遇到一个问题需要引入antd的日期插件，本地是可以正常选择使用的，发到测试环境出现可以打开日期组件却无法选中日期的问题。
a-data-picker本地有效，测试无效解决方案
Hyao-J
03-23 326
在本地上可以进行点击，但在测试环境上能展示面板
vue a-range-picker回显问题和回显之后值无法改变的问题
qq_35187119的博客
03-07 2243
vue a-range-picker回显问题和回显之后值无法改变的问题
【踩坑】vite项目使用ant＜a-date-picker /＞提示报错 rr.isMoment is not a function 解决方法
Jinkerr的博客
05-07 955
vite项目使用ant的提示报错 rr.isMoment is not a function 解决方法
vue-week-picker实现支持按周切换的日历
10-16
在开发实际应用时，我们还需要考虑组件的响应式和复用性，比如可以通过属性`dateValue`来绑定选中的日期值，并且使组件能够响应数据的变化，同时也可以在多个地方复用同一个vue-week-picker实例。 综上所述，vue-...
antd-vue ＜a-range-picker＞日期时间筛选功能配置详解
weixin_43866692的博客
02-23 1187
antd vue 带有初始值的日期筛选功能。
ant-design-vue中a-date-picker组件只选择年份/含表单验证（已解决）
weixin_43242112的博客
06-11 1万+
ant-design-vue中a-date-picker组件只选择年份 今天遇到了在日期选择器中只选择年份的日期选择器，但是是使用的ant-design-vue，目前还没有只选择年份的日期控件，但是需求还是要实现，上代码： 在template中 <a-date-picker mode="year" placeholder="请选择年份" format='YYYY' :value='yearPick' :open='yearPickShow' @pane
vite .env.test环境使用ant design vue ，打包后a-date-picker控件无法选择日期
拿回忆下酒
04-11 1563
vite .env.test环境使用ant design vue ，打包后a-date-picker控件无法选择日期
ant-design-vue中a-date-picker 日期选择器校验不灵及禁止选择今天之前/之后的日期
浮游的博客
02-24 9157
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.
Vue element el-date-picker 时间组件类型切换报错，以及下拉框错位
weixin_47309568的博客
01-13 1919
javascript代码。template代码。
vue打包时报错：TypeError: Cannot read property ‘tapPromise‘ of undefined
SunPeng的博客
11-21 1299
TypeError: Cannot read property 'tapPromise' of undefined
antd的时间选择器a-month-picker，本地和生产正常，在测试环境无效的解决
YONJIUJIU的博客
10-10 819
不过看到这里，应该可以解释出当test环境变量名改变后bug就消失的现象，其实也不一定要用.sandbox来替代.test，非.test的值均可。至于为什么会有这段代码，可能是antd团队在测试版本中想避免某些问题，咱也理不清。然后在package.json中把测试版本的打包命令后缀换成sandbox。把环境变量的文件名.env.test改为 .env.sandbox；以上为个人的误打误撞，欢迎大伙指正与补充。
ant datePicker 问题
学吧
07-06 174
ant-design日期选择器组件a-date-picker报错问题
weixin_56728548的博客
08-23 2327
ant-design日期选择器组件a-date-picker报错问题
ant design of vue a-select和a-date-picker点击不显示问题
SSophia的博客
08-25 2729
踩坑记录：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用字
使用antdesign vue 日历组件 a-date-picker 为何不是中文的
最新发布
09-10
antdesign vue 是一个使用 Vue.js 进行开发的 UI 组件库，它提供了一系列高质量的组件。使用其中的日历组件 `a-date-picker` 时，默认情况下可能显示的是英文格式，这可能是因为组件依赖的国际化（i18n）配置尚未设置为中文环境。 为了使用中文显示，你需要确保已经正确地引入了中文语言包，并且在组件中设置了正确的 `locale` 属性。以下是使用中文时的步骤： 1. 引入中文语言包：通常在使用 antdesign vue 组件库时，需要先引入默认的语言包，然后可以单独引入中文语言包覆盖默认的语言设置。 ```javascript // 引入 antdesign vue 核心库 import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; // 引入中文语言包 import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'; Vue.use(Antd); // 使用中文语言包配置 Vue.config.locale = zh_CN; ``` 2. 在组件中设置 `locale` 属性：在使用 `a-date-picker` 组件时，可以通过 `locale` 属性指定使用的语言环境。 ```vue <a-date-picker locale={zh_CN}></a-date-picker> ``` 确保上述步骤正确无误后，`a-date-picker` 应该会以中文格式显示日期和相关的日历文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值