React Ant Design 通过 DatePicker获取一周的起止时间

项目中遇到了选择周获取当前周的周一和周日的日期

直接看用的组件Ant Design

这是写的代码

<Space direction="vertical"><DatePicker onChange={onChange} picker="week" />
</Space>

需要用到moment，

1.安装moment

npm install moment --save

2.页面引入moment

import moment from 'moment'

写入事件

//周日期选择const onChanges = (date, dateString) => {console.log(date, dateString);const startDate = moment(date).day(1).format('YYYY-MM-DD '); // 周一日期const endDate = moment(date).day(7).format('YYYY-MM-DD'); // 周日日期console.log(startDate, endDate);}

看看控制台输出的结果

可以看到，已经正确获取到了当前日期所在周的起止日期了。

这里的日期解析主要用到了 moment.js 提供的两个方法，

moment(date).day(1) 代表指定日期所在周的星期一的日期，

moment(date).day(7) 代表指定日期所在周的星期日的日期，

并且通过 format 方法格式化成指定的格式。

文章仅限参考如有错误请及时指出或补充

React Ant Design 通过 DatePicker获取一周的起止时间相关推荐

React Ant design pro 访问服务器接口，获取数据显示
React Ant design pro 访问服务器接口一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
PHP获取时间戳、获取天周月的起始时间、指定时间所在周、指定时间的各个周等相关函数
目录一.时间戳和日期互相转换二.PHP获取今日.昨日.上周.本周.上月.本月的起始时间戳三.获取当前周的每天的起始时间四.获取周的起始时间 1.根据指定时间获取所在周的起始时间和结束时间 2. ...
时间格式处理获取本年份的起止时间
文章目录 1.ios兼容性问题 2.倒计时函数 3.获取当前年份起止时间 4.时间格式转换 1.ios兼容性问题对于时间格式 ios不能识别横杠获取本年份的起止时间 `/***``\* 得到本年的 ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
React Ant Design Menu导航菜单跳转
昨天小编在学习React使用Ant Design Menu导航菜单时,发现Ant Design4.2版本之后的 Menu 导航菜单更新了写法.新写法不再需要自行拼接 JSX,直接采用数组写法直接用 i ...

React Ant Design 通过 DatePicker获取一周的起止时间

React Ant Design 通过 DatePicker获取一周的起止时间相关推荐

最新文章

热门文章