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"><RangePickerdisabledDate={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 todayreturn current && current > moment().endOf('day');}<RangePickerdisabledDate={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("开始时间不能大于结束时间")]}})}})}