欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

moment.js使用

程序员文章站 2022-06-24 21:31:39
...

前言

日常积累,欢迎指正

使用场景

在使用 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常见用法总结