moment.js使用

前言

日常积累，欢迎指正

使用场景

在使用 ant design 作为UI框架开发项目时需要用到时间范围选择器 RangePicker 它使用的时间处理工具是 moment.js，这里对用到的一些操作做一下简单记录

核心代码段

import { DatePicker } from 'antd'
const { RangePicker } = DatePicker
import moment from 'moment'
const dateFormat = 'YYYY-MM-DD'
interface IState {
	rangePickerValue: any[]
}
interface IProps {

}
export default class XXXX extends React.Component<IProps, IState> {
	constructor(props: IProps) {
		super(props)
		this.state = {
			/**
			* @desc 默认获取当前日期的前一天作为开始时间，当前日期位结束时间
			*/
			rangePickerValue: [moment(moment(moment().subtract(1, 'days').format(dateFormat), dateFormat), moment().format(dateFormat), dateFormat)],
		}
	}
 
	/**
	 * @desc 设置不可选用的时间 - 当前日期之后的时间都是不可被选用的
	 */
	disabledDate = (current) => {
		return current && current > moment().endOf('day') // 禁用今天之后（不包括今天的時間）
	}

	/**
	 * @desc 
	 */
	onRangePickerChange = (dates) => {
		/** dates 当前选中的时间范围: 开始时间和结束时间的 moment 数组 */
		this.setState({
			rangePickerValue: dates
		})
		let startTm
		let endTm
		/** dates[0].valueOf() 获取 moment 数组中首个 moment 元素的时间戳 */
		if (dates[0].valueOf() < dates[1].valueOf()) {
			startTm = dates[0].format(dateFormat) // 获取时间数据，得到的数据格式为字符串 'YYYY-MM-DD'
			endTm = dates[1].format(dateFormat)
		} else {
			endTm = dates[0].format(dateFormat)
			startTm = dates[1].format(dateFormat)
		}
		/** 添加自己需要的处理操作 */
		console.log(startTm)
		console.log(endTm)
	}


	render() {
		return (
			<div className='_RangePicker-container'>
				<label>选择时间区间：</label>
				<RangePicker
					value={this.state.rangePickerValue} // RangePicker 组件显示值
					format={dateFormat} // 时间显示格式
					onChange={this.onRangePickerChange} // 选择的时间范围被修改时出发
					disabledDate={this.disabledDate} // 设置不可选用范围
					allowClear={false}
				/>
			</div>
		)
	}
}

其它

待补充

参考链接

简书 - Moment.js常见用法总结