antd-DatePicker日期选择器

需求

点击当日，一周，一个月，三个月，半年按钮，修改起始时间。
用户可以自行选择时间。

在state中定义两个变量

dateStart：用来存储时间，渲染到页面
time：按钮

constructor(props) {super(props);this.state = {dateStart: now,time: ""}
}

具体实现

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
let newDate = ""class MessageModify extends Component {constructor(props) {super(props);this.state = {dateStart: now,time: ""}}// formatDate日期格式化formatDate = (date) => {if (this.state.time === "") {const dateStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;newDate = dateStrreturn `${dateStr}`;}else if (this.state.time === "当日") {const dateStr = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;newDate = dateStrreturn `${dateStr}`;}else if (this.state.time === "近一周") {const qianyizhou = new Date(now-7*24*3600*1000)const dateStr = `${qianyizhou.getFullYear()}-${qianyizhou.getMonth() + 1}-${qianyizhou.getDate()}`newDate = dateStrreturn `${dateStr}`;} else if (this.state.time === "近一月") {const dateStr = `${now.getFullYear()}-${now.getMonth() + 1 -1}-${now.getDate()}`newDate = dateStrreturn `${dateStr}`;} else if (this.state.time === "近三月") {const dateStr = `${now.getFullYear()}-${now.getMonth() + 1 -3}-${now.getDate()}`newDate = dateStrreturn `${dateStr}`;} else if (this.state.time === "近半年") {const dateStr = `${now.getFullYear()}-${now.getMonth() + 1 -6}-${now.getDate()}`newDate = dateStrreturn `${dateStr}`;} }render() {return (<div><Button type="primary" onClick={() => this.setState({time: "当日"})}>当日</Button><Button type="primary" onClick={() => this.setState({time: "近一周"})}>近一周</Button><Button type="primary" onClick={() => this.setState({time: "近一月"})}>近一月</Button><Button type="primary" onClick={() => this.setState({time: "近三月"})}>近三月</Button><Button type="primary" onClick={() => this.setState({time: "近半年"})}>近半年</Button><div><div className="l-title">起始时间</div><div className="l-time am-list-item"><DatePickerminDate={new Date(2020,1,1,0,0,0)}maxDate={new Date(2022,1,1,0,0,0)}mode="date"title=""extra="Optional"value={this.state.dateStart}format={val => this.formatDate(val, "")}onChange={date => this.setState({dateStart: date, time: ""})} ><List.Item value={this.state.date}></List.Item></DatePicker></div></div></div>)}
}

DatePicker选择器-快速实现当日，一周前，半月前等相关推荐

mysql查询1971年以前_mysql查询昨天一周前一月前一年前的数据
mysql 昨天一周前一月前一年前的数据这里主要用到了date_sub, 参考如下 select * from yh_content where inputtime>date_sub(c ...
mysql 一个月以前_mysql查询昨天一周前一月前一年前的数据
mysql 昨天一周前一月前一年前的数据这里主要用到了DATE_SUB, 参考如下代码如下: SELECT * FROM yh_content where inputtime>DATE ...
【深度学习】Hinton 最新研究：神经网络的未来是前向-前向算法
来源:AI科技评论作者:李梅.黄楠编辑:陈彩娴在未来万亿参数网络只消耗几瓦特的新型硬件上,FF 是最优算法. 过去十年,深度学习取得了惊人的胜利,用大量参数和数据做随机梯度下降的方法已经被证明是 ...
Hinton 最新研究：神经网络的未来是前向-前向算法
来源:AI科技评论作者:李梅.黄楠编辑:陈彩娴在未来万亿参数网络只消耗几瓦特的新型硬件上,FF 是最优算法. 过去十年,深度学习取得了惊人的胜利,用大量参数和数据做随机梯度下降的方法已经被证明是 ...
前TT(前T/T)与后TT(后T/T),以及信用证(LC,L/C)付款方式比较
前TT(前T/T)与后TT(后T/T),以及信用证(LC,L/C)付款方式比较国际贸易付款方式有很多种,目前比较流行的就有TT(T/T),中文也叫电汇,还有D/P,再有就是信用证L/C,基本常用的就 ...
vue实现Cnode具体有axios分页请求 | filters（过滤器）解决时间转秒前分钟前小时前月前年前
vue实现axios分页请求 [注意点] 1.可以根据对象名[对象中的属性]来获取相对的属性值 2.有类名还要添加类名: :class="['tab-item',{active:activ ...
2019公需科目快速学完_3周考过科目二，是这样做到的！
科目二作为驾培的重要考试科目,每个学员都想快速考过.到底要练多久?多长时间能考过也很困惑. 实践证明,学员跟着教练这样练,3周就能过~ 一. 科目二训练项目采用学时制,全国大部分地区需要在场地进行至 ...
快速掌握Python的捷径-Python基础前传（1）
文: jacky(朱元禄) 开文序最近看新闻,发现高考都考Python了,随着人工智能的火热,学数据科学的人越来越多了!但对于数据行业本身来说,现象级的火热,这并不是什么好事. 方丈高楼平地起,无 ...
大数据周周看：前英特尔高管加入谷歌云部门，网易与威马汽车合作打造“互联网+”时代智能汽车
前英特尔数据中心主管加入谷歌云部门,出任COO一职:医疗科技公司"图玛深维"获2亿元B轮融资:网易人工智能与威马汽车合作,打造"互联网+"时代智能汽车--以下为 ...

DatePicker选择器-快速实现当日，一周前，半月前等

antd-DatePicker日期选择器

需求

在state中定义两个变量

具体实现

DatePicker选择器-快速实现当日，一周前，半月前等相关推荐

最新文章

热门文章