moment.js 获取 昨天、今天、上周、本周、上月、本月、上季度、本季度、去年 时间段,并集成到 vue Ant Design a-range-picker 日期选择器中

  1. 因为日期选择器使用的地方较多,放在 mixins 里面使用比较方便;
  2. 正常日期范围也一样,就是把数据放出来即可;
  3. //  rangeDate.js
    import moment from 'moment'
    const rangeDate = {
        data() {
            return {
                ranges: {
                    '昨天': [moment().day(moment().day() - 1), moment().day(moment().day() - 1)],
                    '今天': [moment(), moment()],
                    '上周': [moment().week(moment().week() - 1).startOf('week'), moment().week(moment().week() - 1).endOf('week')],
                    '本周': [moment().weekday(0), moment().weekday(6)],
                    '上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
                    '本月': [moment().startOf('month'), moment().endOf('month')],
                    '上季度': [moment().quarter(moment().quarter() - 1).startOf('quarter'), moment().quarter(moment().quarter() - 1).endOf('quarter')],
                    '本季度': [moment().startOf('quarter'), moment().endOf('quarter')],
                    '去年': [moment().year(moment().year() - 1).startOf('year'), moment().year(moment().year() - 1).endOf('year')],
        metheds: { moment }
    export { rangeDate }
    
      //   日期范围组件中
    <template>
        <a-range-picker @change="dateChange" :value="[queryParam.start,queryParam.end]" :ranges="ranges" valueFormat="YYYY-MM-DD" />
    </template>
    <script>
    import { rangeDate } from '../littleMixin/rangeDate'
    export default {
      mixins: [ rangeDate ],
      data () {
        return {
          queryParam: {
             start: '2021-11-01',
             end: '2021-11-30'
      methods: {
        dateChange (val) {
          this.queryParam.start = val[0];
          this.queryParam.end = val[1];
    </script>
    

    vue Ant Design Select 选择框输入搜索已有数据 mixin
    vue + Ant Design 表格多选 mixin
    中文按拼音首字母排序