lixin-web/webapp/js/mixins/datepicker.js

vue and bootstrap

import {format,addDays,subMonths} from 'date-fns'
let start = new Date
//      start.setHours(0,0,0,0)
let end = addDays(start,1)
//      end.setHours(23,59,59)


const formatDate= (date) => {
  return format(date, 'YYYY-MM-DD')
}

export const getRangeDays = (picker,size = 3,month) => {
  const end = addDays(new Date(),1);
  let start = addDays(new Date(),1);
  if(month) {
    start = subMonths(start,month)
  }else{
    start.setTime(start.getTime() - 3600 * 1000 * 24 * size);
  }
//              start.setHours(0,0,0,0)
  if(picker) {
    picker.$emit('pick', [start, end])
  }else{
    return [start, end]
  }
}

export default {
  data(){
    return {
      date:[start,end],
      rangeSeparator:' 至 ',
      pickerOptions:{
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const start = new Date();
            const end = addDays(start,1);
//              start.setHours(0,0,0,0)
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            getRangeDays(picker,3)
          }
        }, {
          text: '最近七天',
          onClick(picker) {
            getRangeDays(picker,7)
          }
        }]
      },
    }
  },
  computed:{
    dateTime(){
      return this.$datepicker ? this.$datepicker.displayValue : formatDate(this.date[0]) + this.rangeSeparator + formatDate(this.date[1])
    },
    dateRange(){
      return this.dateTime && this.dateTime.split(this.rangeSeparator)
    }
  },
  mounted(){
    this.$datepicker = this.$refs.datepicker
  }

}