vue+antd+moment.js的基础使用

1,149 阅读1分钟
cnpm i moment --save

// main.js
import moment from 'moment' 
Vue.prototype.$moment = moment;

一、获取昨天、今天、明天

// 昨天-2020-10-15
this.$moment().subtract(1, 'day').format("YYYY-MM-DD")

// 今天-2020-10-16
this.$moment().format("YYYY-MM-DD")

//明天-2020-10-17
this.$moment(dates).add(1, 'day').format("YYYY-MM-DD")

二 、antd 控制不可选择的日期 disabledDate

写在前面:antd

**注意:**DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取,所以请先正确设置 moment 的 locale

默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale  使用国际化组件,详见:ConfigProvider 国际化

// App.vue
<a-config-provider :locale="zhCN">
    <router-view />
</a-config-provider>import zhCN from "ant-design-vue/es/locale-provider/zh_CN";

data() {
  return {
    zhCN
  }
}

<a-date-picker :disabledDate="disabledDate"/>

disabledDate(current) {
    // eg: 禁用今天之前的日期,不包括今天    // return current && current < this.$moment().subtract(1, 'day') 

    // eg:禁用今天及今天之前的日期,包括今天
    // return current && current < this.$moment().endOf('day')    

    // eg:当天之后日期可选(包括当天)
    // return current && current <  this.$moment('2020-10-03')
    // eg:当天之后日期可选(不包括当天)
    // return current && current <  this.$moment('2020-10-03').endOf('day')

    // eg:当天之前日期可选(不包括当天)
    // return  current && current > this.$moment('2020-10-10')
    // eg:当天之前日期可选(包括当天)
    // return  current && current > this.$moment('2020-10-10').endOf('day')

    // eg:今天及今天之后的七天日期可选
    return current && current < this.$moment().subtract(1, 'day') || current > this.$moment().add(7, 'day')

},

参考:

moment.js文档:momentjs.cn/

antd文档:www.antdv.com/components/…