antd日期选择组件，添加value后导致无法点击下一年和下一月

最新推荐文章于 2024-08-29 12:59:43 发布
最新推荐文章于 2024-08-29 12:59:43 发布
阅读量3.3k 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fang_ze_zhang/article/details/81868881
本文介绍了一种解决表单在关闭事件中更新antd日期选择器组件状态导致的问题的方法。通过在日期选择器外部包裹一层div并阻止事件冒泡来避免不必要的状态更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原因：表单监听了关闭事件，执行了setState，若是给closeFloatingLayer增加延时就可看出来antd数据的变化。
这里写图片描述

解决方法：DatePicker外面套一层div，然后阻止冒泡
这里写图片描述

ant design的时间选择器无法选择年月
weixin_46302624的博客
01-10 1002
为了解决时间选择不了的问题，在panelChange方法中加了!this.showTime && (this.open = false)，然后又发现了没有showtime的年月选不了，所以在panelChange方法中又添加mode && (this.open = true)
日期选择器，本月、上月、上季度、本季度、上半年、下半年、本年、上一年
weixin_44683763的博客
09-26 882
<gdb-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" :default-time="['00:00:00', '23:59:59']"></gdb-date-picker> ...
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
01-22
原因： 表单监听了关闭事件，执行了setState，若是给closeFloatingLayer增加延时就可看出来antd数据的变化。 解决方法： DatePicker外面套一层div，然后阻止冒泡 补充知识：antd 的 RangePicker 中日期选择近三月 今天遇到一个问题，日期插件中只能选择近三个月。代码如下： 属性中 disabledDate 就是日期禁止选择。 1、当前天之前 2、当前天之后 3、近三月 4、后三月 以上这篇解决antd日期选择组件,添加value就无法点击下一年和下一月问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件
Antd的DatePicker 只选择年份使用，及遇到问题处理
qq18346342939的博客
08-29 891
Antd的DatePicker 只选择年份使用
Ant-Design-Vue日期选择中日历年月切换事件监听
xlzy
05-08 9473
首先，Ant-Design-Vue和Element UI都是不支持在日期选择时，日历中的年月切换时抛出事件的。当我们需要自定义渲染日期时，没有这个事件的监听，我们并不知道年月变了，就无法向后端获取标记的日期。 解决办法 1、在DOM中监听年月切换四个按钮（不推荐） 2、监听年月文本节点的变化，关键事件DOMCharacterDataModified。 年月切换时，需要从后端获取日期数据，所以最好...
DatePicker日期选择框切换月份、年份时添加监听函数
lowers_1的博客
07-28 1867
DatePicker日期选择框切换月份、年份时添加监听函数并设置禁用时间
DatePicker 获取上一年/下一年或上一月/下一月
咿呀咿呀呦~
08-19 913
前言 应公司要求，最近要实现一个日期选择框，只选择年份。并且可以手动设置 上一年 和 下一年。我尝试了几种写法，最后成功了。期间遇到了清空日期后再打开选择日期，值为 NAN ,好在问题都解决了，大概的思路分享给他大家 引入 DatePicker 组件 <DatePicker onChange={this.handleGetYear} picker="year" className={'datePickerStyle'} value={date ? moment(date,dateString) :
使用antd-vue 以及vue2实现日期只能选择一个月 要求弹窗提示
最新发布
08-03
但注意，一个月可能是28、29、30、31天，所以这里我们通常按自然月来算：即开始日期的月份和结束日期的月份相差不超过1，且开始日期的月份和结束日期的月份是同一年，或者跨年但月份差1（如12月到1月）。但这样计算...
农历 24节气 -- react antd 自定义组件
wt310287544的博客
06-21 397
2020年末的选择切换城市，对于懒惰的自己来说，以为会是个多么重大的心理抉择，可事后想起来，不过也就那么一瞬间的事情。甚至想不出一个给这次迁徙冠以高大上各种艰辛以及不容易的理由。如果非要有，那么，就当是逃离吧。对于24节气的认识除了几个必吃水饺的节气外，也就只知道立春立夏立秋立冬的时候，朋友圈里发一条，‘’春（夏、秋、冬）天快乐~‘’。也不知道什么时候起，快乐对于自己来说，需要靠呼吁了，而不是用心去感受。以下，为了忘却的纪念。
Antd DatePicker之旬查询（本月上旬、本月中旬、本月下旬）
weixin_44240581的博客
08-18 1071
需求 实现旬查询，本月上旬为1-10号，本月中旬11-20号，本月下旬21-月底 由于Antd 3.x 的RangePicker没有上月、下月、上年、下年的点击回调，我不能判断当前是哪年哪月，时间范围快捷选择不能动态改变，所以我用监听DOM节点实现 代码 .main-container { :global { /* 禁用日历日期的点击 */ .ant-calendar-tbody { pointer-events: none !important; } /*
使用antd的Select组件，Cascader组件，DatePicker等下拉选项必须要添加的getPopupContainer（解决选项框随页面滚动分离问题）
热门推荐
Zeng__Yi的博客
10-29 3万+
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 这个属性,看似不重要的属性，却起着重大的作用。 效果图： 当数据比较多的，可以滚动的时候。点击选择框，滑动滚轮 没有添加这个属性的时候： 当没有这个属性的时候 随着滚动 选项会和选择框分离。 当添加这个属性后： 点击后滚动就不会分离 如...
antd 如何为表单插入一个属性
xiaofang_z的博客
05-31 1449
之前一直习惯于用element ui，用了antd ui框架后觉得在使用的时候着实没有element ui好用，记录下用antd表单时遇到的问题 接下来，熟悉下它的写法 1、data中表单的创建方式写法，是下面这种方式 data() { return { form: this.$form.createForm(this), //antd创建表单 } } 2、同时页面结构绑定的写法与element ui也不一样，这里需要注意的是他的绑定方式，element ui用的
给antd的Select组件添加搜索功能
all_might1的博客
09-23 4060
有时下拉列表太长，找起来也不方便（悄悄嘀咕：就十个出头的选项有什么看不过来的，动动小指头下滑找一下不行吗） 看了官方文档，有如下属性叙述： 将两个属性配合使用 <Select ... showSearch="true" optionFilterProp="children" > <Select.Option value="1-1" key="1-1">111</Select.Option> <Select.Option
react+antd系列之日期选择框DatePicker
菜鸟搬砖记
12-24 2万+
1.默认时间 &amp;amp;lt;DatePicker defaultValue={moment('20120203')} format={dateFormat} /&amp;amp;gt; 默认当前时间： const dateFormat = 'YYYY-MM-DD'; &amp;amp;lt;DatePicker defaultValue={moment()} format={dateFormat} /&amp;am
antd+vue:实现年份日期选择控件——基础积累
yehaocheng520的博客
07-01 7030
antd+vue:实现月份日期选择控件+年份日期选择控件——基础积累
react给组件，元素设置自定义属性
吴小迪的博客
06-30 3万+
给元素或者组件设置自定义属性一般以‘data-’开头，后面的可以取个独特的名字，比如说我想给img表情加一个自定义的id属性，那么react可以写成如下的样式： <div> <div onClick={(event) => { alert(`图片的自定义data-id${event.target.parentElement.children[1].getAttrib...
Ant Design表单中添加动态属性并使用select组件案列
肖帅的博客
11-16 2421
Ant Design表单中添加动态属性并使用select组件案列 如下图所示，这个表单页中的专业可以添加多条，在专业的第一个字段使用的是select组件，还要保证每条的数据不相互影响 代码如下： <template> <div class="add-mem"> <div class="form-css"> <a-form-model :model="form" :rules="rules"
全局添加 ant-design input组件 autocomplete 属性
whiteplayer的博客
11-19 6599
ant-design-vue export default { name: 'BInput', render (createElement) { if (!this.$attrs.autocomplete) this.$attrs.autocomplete = 'off' return createElement( 'a-input', {...this.$at...
ant design日期控件使用_仅月份
CarinaYang的博客
04-19 9606
总体效果：展开后：选值后：代码部分：1、引入：import { DatePicker } from 'antd';2、主体部分：export default class PersonInfo extends Component{     constructor() { super(); //设置状态，存储日期 this.state = {     workMo...
antd日期选择组件按年选择标记年份
01-07
### Ant Design 日期选择器组件按年选择并标记年份 在Ant Design Vue框架中，`DatePicker`组件提供了多种模式来满足不同的需求。对于按年选择的需求，可以通过设置`mode`属性为`year`实现仅显示年的选择面板[^1]。 为了创建一个专门用于按年选择的日期选择器，并能够高亮或标记特定年份，下面是一个具体的实例： #### 创建按年选择的日期选择器 通过配置`picker="year"`可以让日期选择器默认进入年选择视图，无需额外点击切换按钮即可直接选择年份。 ```html <a-date-picker picker="year" @change="handleChange"/> ``` #### 高亮/标记指定年份 要实现某些特殊年份被自动选中或是带有不同样式的效果，则需利用`value`绑定当前选定状态以及自定义槽（slot）来自定义渲染逻辑。如果想要更灵活地控制哪些年应该被打上标签，还可以借助于事件处理函数动态调整内部数据结构[^2]。 ```javascript // 假设这是Vue单文件组件中的script部分 export default { data() { return { selectedYear: null, highlightedYears: ['2023', '2025'] // 被标记的年份数组 } }, methods: { handleChange(value) { this.selectedYear = value; }, renderYearText(year){ const yearString = year.format('YYYY'); if(this.highlightedYears.includes(yearString)){ return (<span style={{color:'red'}}>{yearString}</span>); }else{ return yearString; } } } } ``` ```html <!-- 这里是模板部分 --> <template> <div> <a-date-picker :value="selectedYear" picker="year" @panelChange="(val)=>{this.handleChange(val)}"> <!-- 自定义年份文本展示方式 --> <template slot="renderExtraFooter">{{renderYearText}}</template> </a-date-picker> </div> </template> ``` 上述代码片段展示了如何使用Ant Design Vue 的 `DatePicker` 组件来进行按年选择的操作，并且实现了对给定列表内的年份进行特别标注的功能。注意，在实际开发过程中可能还需要考虑更多细节上的优化与适配工作。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值