moment结合AntD周选择组件更改周默认设置

最新推荐文章于 2024-08-07 15:44:50 发布
最新推荐文章于 2024-08-07 15:44:50 发布
阅读量3.5k 收藏 3
点赞数 1
分类专栏： JS 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40138556/article/details/112967680
版权
本文介绍了如何在React应用中，针对AntD的DatePicker组件进行定制，以满足每周从周五开始，展示当前日期前一个周四所在周，以及每年第一周从1月4日开始的需求。通过修改moment.js源码，调整week和defaultLocaleWeek的计算逻辑，并解决在页面加载时的执行顺序问题。
摘要由CSDN通过智能技术生成

需求
1、每周从周五开始；
2、展示默认周，为当前日期的前一个周四所在周，例如今天是1月21日，前一个周四为1月14日，1月14日所在周的第一天为1月8日，这里之前有写过方法，AntD日期选择器组件DatePicker默认展示当前时间前一个周四；
3、每年第一周改为当前年的1月4日所在的周。

样式
AntD的DatePicker：
在这里插入图片描述
修改后的：
在这里插入图片描述
代码
在进入页面前的路由页面中增加以下代码，React其他代码省略了，说一下moment，moment源码
在moment.js中能找到这样一段代码，代码中周默认开始为周日，每年第一周默认为1月6日

最低0.47元/天 解锁文章
莉兹Liz
关注
专栏目录
antd-DatePicker组件获取时间值，以及相关设置
读心悦
03-01 1万+
DatePicker组件默认语言是英语，需要设置为中文的话，需要安装moment。 import moment from "moment"; import "moment/locale/zh-cn" format属性，设置日期的格式，如“2020-02-28”。 设置日期 选择日期是今天之前【包含今天】 需要和moment搭配应用 // 设置默认的起始日期 c...
antd RangePicker组件设置默认值
oldpubcat的博客
08-26 1万+
公司在用react及antd进行后台管理系统开发，有一个表单页需要时间查询，功能类似于下图 选择每个选项会修改后面的日期选择器的值，比如选择本月，就会加以限制只能在本月范围内选择，且默认值变为本月开始到今天为止的时间。 官方示例的demo没有相关功能，只能自己扩展，不多BB直接上代码。 表单HTML部分代码： <Form layout="horizontal" name="userForm" form={form} initialValues=
更改antdDesign 筛选周默认周的开始周时间
m0_57253767的博客
02-01 1745
antd上的筛选周默认周开始时间是周一，改成周日
antd日期选择器(周) 受控
vapidness_Q的博客
03-26 1234
moment antd
weixin_36766850的博客
11-24 218
1
antd 日期 moment 各种获取 月份，年份，日期，星期等方法
weixin_41883384的博客
02-03 6377
antd时间选择器 disabledDate(current) { // Can not select days before today and today return current < moment().subtract(1, "day") ;//当前以前 // return current && current < moment().endOf('day');//包含当前天以前 }, 大于当前日期不能选 ti.
日常记录之antDesign使用DatePicker组件(2)
Csdn_____c的博客
01-28 1737
昨天跟大家分享了在antd官网如何使用DatePicker组件并且选择效果为周的方法，今天再跟大家分享一下如何去除DatePicker选择周的时候去掉最左边的周的那一列。 效果图如下： 对比原来的图： 今天一上班，leader就让我把左边标红的列去掉，遇到这个需求后，我就去官网看了有没有能够直接符合我的需求的属性，结果就是没有找到。我想到的办法就是先f12查看这个日期结构长啥样。 原来是一个表格，上面的周日到周六是thead，下面的日期是tbody 也就是这个日期是...
moment时间插件设置显示日期为周一到周日
Trytolearn_MrQ的博客
05-15 1039
moment时间插件显示日期为周一到周日 // 引入moment插件 import moment from 'moment' // 设置为中文 import 'moment/locale/zh-cn' moment.locale('zh-cn', { weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_') })
Ant Design for React的DatePicker日期组件设置默认显示中文的方法
07-23
Ant Design for React 的 DatePicker 日期组件设置默认显示中文的方法 在 Ant Design for React 的 DatePicker 日期组件中，默认情况下显示英文，但是在某些情况下，我们需要将其设置为中文。今天，我们将学习如何...
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1296
antd-react 组件库工作以来的总结
自定义DatePicker组件中星期显示的格式
Csdn_____c的博客
03-02 764
在官网拿来的DatePicker的显示如下 如何让这个组件从Mon开始显示 //导入需要的模块 import locale from 'antd/lib/date-picker/locale/en_US'; //函数组件中的代码 useEffect(()=>{ moment.updateLocale('en', { week: { dow: 7 }, weekdaysMin: 'Mon_Tue_Wen_Thr_Fri_Sat_Sun'.split('_'
antd封装多态时间选择器（包含日，可选近7日，近30日，周，月）react+moment+antd+ts
m0_55742074的博客
08-07 402
antd近7日，近30日，周，月选择器
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
react集合antd实现选择的开始和结束时间范围为一周内
weixin_43991618的博客
09-20 3444
借鉴Antd日期选择器实现开始时间和结束时间无论怎么去选都是一周内。 参考链接：https://ant.design/components/date-picker-cn/ 需求：因超过一周的数据量过大会导致接口返回异常，需处理传参时间为最多一周内 用户可以选择任意时间为开始/结束时间，但是时间范围为一周内 结合Antd提及的日期选择框的DatePicker两个小框，因为antd中的RangePic...
antd 日期控件RangePicker如何增加快捷键（日/周/月/年）
m0_63788547的博客
04-27 509
antd 日期控件RangePicker如何增加快捷键（日/周/月/年）
Antd日期选择框中文【最新版本，亲测有效】
小道仙的后宫
04-10 5342
不得不说Antd的确蛮好用的，但是还是要吐槽，遇到一点问题百度基本上解决不了，而且文档写的也的确不怎么样 就这个日期选择器，默认竟然不支持中文？？？而且百度了半天都是什么鬼？？？ 这是默认效果 这是之后的效果 第一步：根据官方文档导入下面的代码（你可以放在使用日期选择框的界面也可以放在main.js里面） // import zhCN from 'ant-design-vue/lib/loc...
react antd 日期选择 WeekPicker MonthPicker 取值转为起止日期
BILL-博客-LLIB
08-23 1170
默认WeekPicker 取值，返回的是2023年34周，这样后台用起来不方便。可以转化成指定周的起止日期。同样，MonthPicker 默认取值，返回的是2023-08，统一格式，转化成月的起止日期，代码如下。
react中封装antd日期框（近7天/日/月/周/季/年）
a198261879的博客
05-16 1186
react中封装antd日期框（近7天/日/月/周/季/年）
获取当前时间、当前年的第一天、当前月的第一天、当前周的周一的日期并展示到antd日期选择框中。
wwwbaidusss的博客
02-23 301
获取当前时间、当前年的第一天、当前月的第一天、当前周的周一的日期并展示到antd日期选择框中。
antd选择器组件设置默认选中
最新发布
10-01
在Ant Design (antd) 的 Select（下拉选择器）组件中，如果你想要设置默认选中的值，可以这样做： 1. 使用`defaultValue`属性：当你有一个预设的选项字符串或对象时，可以在Select标签里直接指定这个属性。例如： ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值