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 {LocaleProvider} from 'antd'
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';

class App extends Component {
  render() {
    return (
      <LocaleProvider locale={zh_CN}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
          </header>
        </div>
      </LocaleProvider>
    );
  }
}
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')}