moment.js 常用方法说明及配合antd DatePicker的使用

var now = moment().toDate();
console.log('获取当前时间\n',now)
 
now = moment().format('YYYY-MM-DD');
console.log('格式化当前时间\n',now);
 
now = moment().format('YYYY-MM-DD:HH:MM:SS');
console.log('格式化当前时间\n',now);
 
let startMonth = moment().startOf('month').toDate();
console.log('获取这个月初时间\n',startMonth);
 
let dayOfStart = moment().startOf('day').toDate();
console.log('获取今天开始的时间\n',dayOfStart);
 
let dayOfEnd = moment().endOf('day').toDate();
console.log('获取今天结束的时间\n',dayOfEnd);
 
let lateHour = moment().add(2,'hour').toDate();
console.log('获取＋n小时\n',lateHour);
 
console.log()
let beforeHour = moment().subtract(2,'hour').toDate();
console.log('//获取-n小时\n',beforeHour);
 
let lateDay = moment().add(+5,'day').toDate();
console.log('获取＋n天\n',lateDay);
 
let beforeDay = moment().add(-5,'day').toDate();
console.log('获取-n天\n',beforeDay);
//也可以表示为
beforeDay = moment().subtract(5,'day').toDate();
console.log(beforeDay);
 
let lateMonth = moment().add(2,'month').toDate();
console.log('获取＋n月\n',lateHour);
 
let beforeMonth = moment().subtract(2,'month').toDate();
console.log('获取-n月\n',moment(beforeMonth).format('YYYY-MM-DD'));
 
let week = moment().format('dddd');
console.log('获取星期\n',week);
 
let years = moment('2018-11-01').fromNow();
console.log('只能获取以前到现在的年限 如果不满一年显示出具体几个月\n',years)

关于antd中DataPicker的使用：

1.全局汉化：

import {ConfigProvider} from 'antd'
import zhCN from 'antd/es/locale/zh_CN'

class App extends Component {
  render() {
    return (
      <ConfigProvider locale={zhCN}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
          </header>
        </div>
      </ConfigProvider>
    );
  }
}
export default App;

2.组件使用：

import React, { Component } from 'react';
import {DatePicker} from "antd"
import moment from "moment"
const {RangePicker} = DatePicker
const dateFormat = 'YYYY/MM/DD'

class Antdtest extends Component {
	disabledDate = (current) => {
		// 只能选择今天和今天之前的时间
		return current && current > moment().endOf('day');
	}
	render() {
		return (
			<div className="Antdtest">
				<RangePicker
			      disabledDate={this.disabledDate}
			      defaultValue={[
			      	moment(moment(new Date()).subtract(1,'month'),'YYYY-MM-DD'),
			      	moment(new Date(),'YYYY-MM-DD')
			      ]}
			   />
			</div>
		);
	}
}
export default Antdtest;

 

设置默认时间而不设置默认时间值，只需将defaultValue的值从数组变成一个单独的时间对象即可：

defaultValue={moment(this.state.nowDate,'YYYY-MM-DD')}

设置用户快捷可选默认时间范围：

ranges={{'最近一个月': [moment().add(-1, "month"), moment()]}}

禁止用户选择范围：

 disabledDate = (current) => {
    // Can not select days before today and today
    return current && current > moment().endOf('day');
  }

<RangePicker
  disabledDate={this.disabledDate}
  placeholder={["开始时间","结束时间"]}
/>

起始时间结束时间的控制：

onStartAndEndDataChange() {
        this.$nextTick(()=>{
            let startDate = this.form.getFieldValue('startDate')
            let endDate = this.form.getFieldValue('endDate')
            if(!startDate || !endDate || startDate.isBefore(endDate, 'day') || startDate.isSame(endDate, 'day')) {
                this.form.setFields({
                    startDate: {
                        value: startDate,
                        errors: null
                    }
                })
            }else{
                this.$message.info('开始时间不能大于结束时间')
                this.form.setFields({
                    startDate: {
                        value: startDate,
                        errors: [new Error("开始时间不能大于结束时间")]
                    }
                })
            }
        })
    }