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>
)
}
}
其它
待补充