antd 日期时间选择_AntD日期选择器组件DatePicker默认展示当前时间前一个周四
util中写个js方法
// 取当前时间的前一个周四
export const getThursday = () => {
let now = new Date();
let nowTime = now.getTime();
let today = now.getDay(); // 今天是星期几
let oneDayLong = 24*60*60*1000;
// 周五周六周日,展示本周四
let nowDay1 = new Date(nowTime - (today-4)*oneDayLong);
let year1 = nowDay1.getFullYear();
let month1 = nowDay1.getMonth()+1;
let day1 = nowDay1.getDate();
// 周一-周四,展示上周四
let nowDay2 = new Date(nowTime - (today+3)*oneDayLong);
let year2 = nowDay2.getFullYear();
let month2 = nowDay2.getMonth()+1;
let day2 = nowDay2.getDate();
let date = '';
if(today > 4 || today === 0) {
if(day1 < 10) {
date = year1 + '-' + month1 + '-' + '0' + day1;
} else {
date = year1 + '-' + month1 + '-' + day1;
}
} else {
if(day2 < 10) {
date = year2 + '-' + month2 + '-' + '0' + day2;
} else {
date = year2 + '-' + month2 + '-' + day2;
}
}
return date;
}
页面中引用
(多的不写了,在react中实现的)
// 头
import { DatePicker } from 'antd';
import * as util from '../../crm-assets/js/utils.js';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
// constructor函数,默认时间
constructor(props) {
super(props);
this.state = {
dateDefault: [moment(util.getThursday(), dateFormat), moment(util.getThursday(), dateFormat)],
}
}
// componentDidMount默认渲染
componentDidMount() {
moment.locale('zh-cn',{
day: {
dow: 5,
},
});
this.getData();
}
// 传值,getTable调用接口并返回
getData = async () => {
let date = util.getThursday();
this.setState({
startTime: date,
endTime: date,
},()=>{
this.getTable();
});
}
render() {
const { dateDefault } = this.state
return (<>
>)
}
今天是2020/12/18,星期五,前一个周四是昨天。选择器默认展示:
标签:DatePicker,const,day2,util,let,date,AntD,选择器,today
来源: https://blog.csdn.net/qq_40138556/article/details/111386502
antd 日期时间选择_AntD日期选择器组件DatePicker默认展示当前时间前一个周四相关推荐
- antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期) 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current &&am ...
- vant组件时间选择器修改时间格式以及默认展示当天时间
vant的时间控件默认展示当天时间 <van-fieldreadonlyrequiredclickablelabel="时间事项":value="mattertim ...
- 小程序 日期时间段(起止)选择器组件
效果图 配置 pickerConfig: {endDate: true, // 是否需要结束时间,为true时显示开始时间和结束时间两个pickercolumn: "", //可选 ...
- element-ui中Cascader 级联选择器组件使用(默认选择是value(id),还想要获取label(name值))
我的需求是一个下拉框选中城市(先选中省-对应市显示-选中显示在下拉框中)注:区不要 但是我之前封装了一个三级联动的,所以我需要重新封装一个: cityMap.js const map = {11000 ...
- WPF DatePicker 默认显示当前时间
两种方法: 1.通过后台赋值: DatePicker.SelectedDate = DateTime.Now; 2.前台控件的属性直接赋值 <DatePicker SelectedDate=&q ...
- Vue3日期选择器(DatePicker)
本组件基于 @vuepic/vue-datepicker 插件进行了二次封装,以便更适合日常使用! 官方文档:https://vue3datepicker.com/installation/ 除了年. ...
- antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了. 但是在选择的时候发现了问题, ...
- 使用JQuery的Blazor日期选择器组件
目录 介绍 使用代码 _Host.cshtml site.js JQDatePicker.razor JQDatePicker.razor.cs 如何使用? DatePicker.razor 介绍 在 ...
- element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
最新文章
- c语言平滑raw图像(取平均值法)
- SpringCloud(笔记)
- linux 判断网卡是否异常_如何判断linux网卡故障?
- 国际上首次报道的非人灵长类胰岛衰老的单细胞转录组图谱
- C语言 strcspn函数实现
- zip 打包_Thinkphp6利用ZipArchive打包下载文件
- python如何搜索关键字_Python遍历目录和搜索文件中的关键字
- [转自360kr]如何才能进入Facebook工作?公司内部工程师告诉你
- list control 应用(转载)
- EastFax USB SERVER推动天润集团U盾管理提效升级
- 群晖 VMM虚拟机安装openwrt软路由做单臂旁路由
- WebRTC之NACK、RTX 在什么时机判断丢包发送NACK请求和RTX丢包重传
- 博途1200/1500PLC斜坡指令RAMP(带暂停功能)
- 白嫖华为云后15分钟建站
- 深度Deepin20 安装软件的依赖问题(sudo apt --fix-broken install)
- 用计算机解决小学数学问题,小学数学学习中存在的问题和解决策略
- 响应式Web程序设计【15】
- 十进制进制法_什么是十进制计数法
- 联想卡在logo界面_联想电脑卡在载入界面如何修复 联想电脑卡在logo界面
- 象棋笔记 象棋桥 象棋旋风
热门文章
- 关于支付宝--我的攒钱计划--利率计算说明
- Android S 修改关于手机的logo
- 华清远见——(JAVA高级阶段技术总结)
- 练习SpringBoot烘培坊项目
- toCharArray()用法
- 为什么自拍照很丑!你是懒癌患者吗?
- 遭遇Trojan-Spy.Win32.Delf.uv,Trojan.PSW.Win32.XYOnline,Trojan.PSW.Win32.ZhengTu等1
- 软件设计师考试 | 第三章 数据结构 | 图
- 组件通信及vuex原理
- 【Linux】Linux下的gbd调试,你学废了吗