基于VUE框架好用的bootstrap日期选择器

先声明一下，本文讲的是基于bootstrap和VUE前端框架下的所使用的控件，效果如下：

1、安装daterangepicker控件

npm install --save daterangepicker

2、导入js和css

import 'daterangepicker/daterangepicker'
import 'daterangepicker/daterangepicker.css'
import moment from 'daterangepicker/moment.min'

3、格式化日期
Date.prototype.Format = function (fmt) { // author: meizz
  var o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'h+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    'S': this.getMilliseconds() // 毫秒
  }
  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)) }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
  }
  return fmt
}

4、初始化日期，根据页面上的id进行渲染

initDate: function (id) {
  if ($(id).is(':visible')) { //id为可见状态的就进行渲染，id不可见进行延迟加载，每次延迟0.5秒，一直延迟50次，防止id还没出来渲染失败
    $(id).daterangepicker({
      'singleDatePicker': true,
      'showDropdowns': true,
      'timePicker': false,
      'timePicker24Hour': false,
      'startDate': moment().hours(0).minutes(0).seconds(0), // 设置开始日期、当前日期
      'opens': 'center',
      'drops': 'down',
      'locale&