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

  1. 因为日期选择器使用的地方较多,放在 mixins 里面使用比较方便;
  2. 正常日期范围也一样,就是把数据放出来即可;
//  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
中文按拼音首字母排序
数组方法
两个数组中相同元素、大数组中不包含小数组部分、一行代码数组去重
element 在表格中使用表单校验
element-ui Upload 自定义上传 loading
vue 中父子组件通信 js 引用的作用
Vue组件通信—provide/inject

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容