Ant Design 通过 WeekPicker 获取一周的起止时间
项目中遇到了选择日期获取当前日期一周的周一和周日的日期,如下:

项目使用的是 ant design,所以第一时间想到了 DatePicker 中的 WeekPicker 组件,查询文档得到 WeekPicker 组件中的属性和方法如下:

引入组件,编写相关代码如下:
<WeekPicker
value={weekData}
onChange={this.handleWeekChange}
style={{ width: 260 }}
placeholder='请选择日期'
/> handleWeekChange = (weekData, weekStrings) => {
console.log(weekData, weekStrings);
}
选择日期,打印 onChange 方法获取到回调值:

通过打印信息可以看出,返回的 weekData 是一个 moment 对象,weekString 是当前对象解析出来的时间值,
默认显示了选中的年份和第几周,这并不是我想要的,如果需要获取到当前周详细的时间信息,则需要对返回的结果进行处理,代码如下:
handleWeekChange = weekData => {
const startDate = moment(weekData).day(1).format('YYYY/MM/DD (dddd)'); // 周一日期
const endDate = moment(weekData).day(7).format('YYYY/MM/DD (dddd)'); // 周日日期
console.log(startDate, endDate);
}
重新选择时间(比如2018年11月6日):

查看打印信息,如下:

可以看到,已经正确获取到了当前日期所在周的起止日期了。
这里的日期解析主要用到了 moment.js 提供的两个方法,
Ant Design 通过 WeekPicker 获取一周的起止时间的更多相关文章
- Ant Design项目记录和CSS3的总结和Es6的基本总结
这里主要是介绍自己运用ANT框架的一些小总结,以前写到word里,现在要慢慢传上来, 辅助生殖项目总结:从每个组件的运用的方法和问题来总结项目. 1.项目介绍 辅助生殖项目主要运用的是Ant.desi ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- 使用selenium操作ant design前端的页面,感觉页面没加载完
因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...
- 2017.11.6 - ant design table等组件的使用,以及 chrome 中 network 的使用
一.今日主要任务 悉尼小程序后台管理开发: 景点管理页面: 获取已有数据列表,选取部分数据呈现在表格中,根据景点名称.分类过滤出对应的景点. 二.难点 1. 项目技术选取: ant design. ...
- Ant Design Upload 组件上传文件到云服务器 - 七牛云、腾讯云和阿里云的分别实现
在前端项目中经常遇到上传文件的需求,ant design 作为 react 的前端框架,提供的 upload 组件为上传文件提供了很大的方便,官方提供的各种形式的上传基本上可以覆盖大多数的场景,但是对 ...
- ant design pro (十五)advanced 使用 API 文档工具
一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
- ant design pro (十一)advanced Mock 和联调
一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
- ant design pro (七)和服务端进行交互
一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟 ...
- ant design pro (四)新增页面
一.概述 参看地址:https://pro.ant.design/docs/new-page-cn 这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进 ...
随机推荐
- Base64编码图片存取与前台显示
需求:将Base64编码图片以BLOB类型存入数据库,需要时取出显示 后台: String base64str=new String(log.getRequest_imgdata());//log为实 ...
- 20162320MyOD重做版
博客说明 由于上次的MyOD.java没有得分,所以这次我重做了这个java,代码是自己完成的,请教了一些同学的思路.故补交一篇博客来说明我对每一步代码的编写的想法以及理解. 代码片段及理解 1.先创 ...
- OGNL动态实现result
OGNL就是struts.xml文件中的<result>通过get()方法,动态获取action类中的变量 <struts> <package name="de ...
- 石家庄铁道大学网站首页UI分析
今天的软件工程王老师讲了UI的设计,以前狭隘的认为只有移动设备上的界面叫UI,百度一下才发现UI其实有这么多含义:UI即User Interface的简称.泛指用户的操作界面,UI设计主要指界面的样式 ...
- Spring学习(六)—— Spring注解(二)
核心原理 1. 用户发送请求给服务器.url:user.do 2. 服务器收到请求.发现Dispatchservlet可以处理.于是调用DispatchServlet. 3. ...
- ngx_http_rewrite_module(重定向)
1:指定rewrite规则 rewrite regex replacement [flag]; 什么是rewrite规则:If the specified regular expression m ...
- 【第六周】关于beta测试组员评分标准的若干意见
组名: 新蜂 组长: 武志远 组员: 宫成荣 谢孝淼 杨柳 李峤 项目名称: java俄罗斯方块 评分规则:简单的才是坠吼的,本组不想搞个大新闻,所以奉行极简的评分方式.每一个人交给组长一个排名,假如 ...
- SQLSERVER数据集合的交、并、差集运算(intersect,union,except)
SQLServer中通过intersect,union,except和三个关键字对应交.并.差三种集合运算. 他们的对应关系可以参考下面图示 测试示例: 构造A,B两个数据集 A:,,, B:,, W ...
- 第163天:js面向对象-对象创建方式总结
面向对象-对象创建方式总结 1. 创建对象的方式,json方式 推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. var obj = {}; //对象有自己的 属性 和 行 ...
- 【数据库_Mysql】JAVA-数据库Date格式在前台JSP页面的获取
问题: 数据库保存的为date格式的日期 在前台JSP页面显示的为一串数字1487897 解决办法: 数据库表中字段对应的实体对象属性的get方法上添加一行代码 页面即可正常显示