safecheck-client 3.0.34-gongyi → 3.0.35-2

package/src/components/rongcheng/Datepicker.vue

@@ -0,0 +1,825 @@
+<style>
+  input.datepicker-input.with-reset-button {
+    padding-right: 25px;
+  }
+
+  div.datepicker > button.close {
+    position: absolute;
+    top: calc(50% - 13px);
+    right: 10px;
+  }
+
+  div.datepicker > button.close {
+    outline: none;
+    z-index: 2;
+  }
+
+  div.datepicker > button.close:focus {
+    opacity: .2;
+  }
+</style>
+
+<template>
+  <div class="datepicker" :class="{'col-sm-12': isAllLine}">
+    <input class="form-control datepicker-input" :class="{'with-reset-button': showResetButton}" type="text"
+           v-bind:style="{width:width}"
+           :disabled="disabled"
+           :readonly="readonly"
+           @click="inputClick"
+           @blur="conBulr(value)"
+           :placeholder="placeholder"
+           v-model="value"/>
+    <!-- <button v-if="showResetButton" type="button" class="close" @click="value = ''">
+      <span>&times;</span>
+    </button> -->
+    <div class="datepicker-popup auto" v-el:popup v-show="displayDayView" :class="{'dateup': isUp, 'dateright': isRight}">
+      <div class="datepicker-inner">
+        <div class="datepicker-body">
+          <div class="datepicker-ctrl">
+            <span class="month-btn datepicker-preBtn" @click="preNextMonthClick(0)">&lt;</span>
+            <span class="month-btn datepicker-nextBtn" @click="preNextMonthClick(1)">&gt;</span>
+            <p @click="switchMonthView">{{stringifyDayHeader(currDate)}}</p>
+          </div>
+          <div class="datepicker-weekRange">
+            <span v-for="w in weekRange">{{w}}</span>
+          </div>
+          <div class="datepicker-dateRange">
+            <span v-for="d in dateRange" v-bind:class="d.sclass" @click="daySelect(d.date,this)">{{d.text}}</span>
+          </div>
+
+          <div class="datepicker-weekRange" v-show="displayTTimeView">
+            {{hour}}
+            <span>时</span>
+            {{minute}}
+            <span>分</span>
+            {{second}}
+            <span>秒</span>
+            <span @click="switchTimeView" class="glyphicon glyphicon-time"></span>
+            <!-- <button @click="switchDayView" type="button" class="btn btn-primary btn-sm">确定</button> -->
+
+          </div>
+          <div style="text-align: center">
+            <button style="border: none" @click="gettoday()" type="button">今天</button>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+
+
+    <div class="datepicker-popup auto" v-show="displayMonthView" v-el:popupmouth :class="{'dateup': isUp, 'dateright': isRight}">
+      <div class="datepicker-inner">
+        <div class="datepicker-body">
+          <div class="datepicker-ctrl">
+            <span class="month-btn datepicker-preBtn" @click="preNextYearClick(0)">&lt;</span>
+            <span class="month-btn datepicker-nextBtn" @click="preNextYearClick(1)">&gt;</span>
+            <p @click="switchDecadeView">{{stringifyYearHeader(currDate)}}</p>
+          </div>
+          <div class="datepicker-monthRange">
+            <template v-for="m in monthNames">
+              <span   :class="{'datepicker-dateRange-item-active':
+                  (currDate && text ?
+                  (text.months[parse(value).getMonth()]  === m) &&
+                  currDate.getFullYear() === parse(value).getFullYear() : false)}"
+                      @click="monthSelect($index)"
+              >{{m.substr(0,3)}}</span>
+              <!-- <template v-for="m in text.months">
+          <span   :class="{'datepicker-dateRange-item-active':
+              (text.months[parse(value).getMonth()]  === m) &&
+              currDate.getFullYear() === parse(value).getFullYear()}"
+              @click="monthSelect($index)"
+            >{{m.substr(0,3)}}</span> -->
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+
+    <div class="datepicker-popup auto" v-show="displayYearView" v-el:popupyear :class="{'dateup': isUp, 'dateright': isRight}">
+      <div class="datepicker-inner">
+        <div class="datepicker-body">
+          <div class="datepicker-ctrl">
+            <span class="month-btn datepicker-preBtn" @click="preNextDecadeClick(0)">&lt;</span>
+            <span class="month-btn datepicker-nextBtn" @click="preNextDecadeClick(1)">&gt;</span>
+            <p @click="switchMonthView">{{stringifyDecadeHeader(currDate)}}</p>
+          </div>
+          <div class="datepicker-monthRange decadeRange">
+            <template v-for="decade in decadeRange">
+              <span :class="{'datepicker-dateRange-item-active':
+                  (this.value ?
+                    parse(this.value).getFullYear() === decade.text : false)}"
+                    @click.stop="yearSelect(decade.text)"
+              >{{decade.text}}</span>
+            </template>
+            <!-- <template v-for="decade in decadeRange">
+              <span :class="{'datepicker-dateRange-item-active':
+                  parse(this.value).getFullYear() === decade.text}"
+                  @click.stop="yearSelect(decade.text)"
+                >{{decade.text}}</span>
+                <p>
+                </p>
+            </template> -->
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+    <!-- 时分秒 -->
+    <div class="datepicker-popup auto" v-show="displayTimeView" v-el:popuphs :class="{'dateup': isUp, 'dateright': isRight}">
+      <div class="datepicker-inner">
+        <div class="datepicker-body">
+          <table class="table-condensed">
+            <tbody>
+            <tr>
+              <td>
+                <a tabindex="-1" title="Increment Hour" class="btn" style="min-width: auto;" @click="changeHour(+1,hour)"><span class="glyphicon glyphicon-chevron-up"></span></a>
+              </td>
+              <td class="separator"></td>
+              <td>
+                <a tabindex="-1" title="Increment Minute" class="btn" style="min-width: auto;" @click="changeMinute(+1,minute)"><span class="glyphicon glyphicon-chevron-up"></span></a>
+              </td>
+              <td class="separator"></td>
+              <td>
+                <a tabindex="-1" title="Increment Second" class="btn" style="min-width: auto;" @click="changeSecond(+1,second)"><span class="glyphicon glyphicon-chevron-up"></span></a>
+              </td>
+            </tr>
+            <tr>
+              <td><span title="Pick Hour" class="timepicker-hour" data-action="showHours" data-time-component="hours"><input type="number" v-model="hour" min="0" max="24" style="border-style:none"></span></td>
+              <td class="separator">:</td>
+              <td><span title="Pick Minute" class="timepicker-minute" data-action="showMinutes" data-time-component="minutes"><input type="number" v-model="minute" min="0" max="59" style="border-style:none"></span></td>
+              <td class="separator">:</td>
+              <td><span title="Pick Second" class="timepicker-second" data-action="showSeconds" data-time-component="seconds"><input type="number" v-model="second" min="0" max="59" style="border-style:none"></span></td>
+            </tr>
+            <tr>
+              <td>
+                <a tabindex="-1" title="Decrement Hour" class="btn" style="min-width: auto;" @click="changeHour(-1,hour)"><span class="glyphicon glyphicon-chevron-down"></span></a>
+              </td>
+              <td class="separator"></td>
+              <td>
+                <a tabindex="-1" title="Decrement Minute" class="btn" style="min-width: auto;" @click="changeMinute(-1,minute)"><span class="glyphicon glyphicon-chevron-down"></span></a>
+              </td>
+              <td class="separator"></td>
+              <td>
+                <a tabindex="-1" title="Decrement Second" class="btn" style="min-width: auto;" @click="changeSecond(-1,second)"><span class="glyphicon glyphicon-chevron-down"></span></a>
+              </td>
+            </tr>
+            </tbody>
+            <tfoot>
+            <tr>
+              <td>
+                <button type="button" class="btn btn-primary btn-xs" @click="closeTimeTem">确定</button>
+              </td>
+            </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+  import EventListener from './EventListener.js'
+
+  export default {
+    props: {
+      value: {
+        type: String,
+        twoWay: true,
+        default: ''
+      },
+      format: {
+        default: 'yyyy-MM-dd'
+      },
+      default: {
+        type: Boolean,
+        default: false
+      },
+      disabledDaysOfWeek: {
+        type: Array,
+        default () {
+          return []
+        }
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      isAllLine: {
+        type: Boolean,
+        default: false
+      },
+      showResetButton: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      placeholder: {
+        type: String
+      },
+      isUp: {
+        type: Boolean,
+        default: false
+      },
+      isRight: {
+        type: Boolean,
+        default: false
+      },
+      selectMonth: {
+        type: Boolean,
+        default: false
+      },
+      selectYear: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+
+        // weekRange: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        weekRange: ['日', '一', '二', '三', '四', '五', '六'],
+        dateRange: [],
+        decadeRange: [],
+        currDate: new Date(),
+        displayDayView: false,
+        displayMonthView: false,
+        displayYearView: false,
+        displayTimeView: false,
+        // monthNames: [
+        //   'January', 'February', 'March',
+        //   'April', 'May', 'June',
+        //   'July', 'August', 'September',
+        //   'October', 'November', 'December'
+        // ]
+        monthNames: [
+          '一月', '二月', '三月',
+          '四月', '五月', '六月',
+          '七月', '八月', '九月',
+          '十月', '十一月', '十二月'
+        ],
+        hour: ('0' + new Date().getHours()).slice(-2),
+        minute: ('0' + new Date().getMinutes()).slice(-2),
+        second: ('0' + new Date().getSeconds()).slice(-2)
+        // hour: '',
+        // minute: '',
+        // second: ''
+      }
+    },
+    watch: {
+      currDate () {
+        this.getDateRange()
+      },
+      value (val) {
+        console.log('观察值。。。。', val, this.value)
+        this.$emit('change', val)
+        if (val) {
+          this.currDate = this.parse(val)
+          this.getDateRange()
+        }
+      }
+    },
+    methods: {
+      gettoday () {
+        if(this.format == 'yyyy-MM-dd'){
+          this.value = this.$login.toStandardDateString()
+        } else {
+          this.value = this.$login.toStandardTimeString()
+        }
+        this.displayDayView = false
+      },
+      conBulr(val){
+        this.$dispatch('con-bulr',{oldVal: val});
+      },
+      close () {
+        this.displayDayView = this.displayMonthView = this.displayYearView = false
+      },
+      inputClick () {
+        this.isUp = false
+        this.isRight = false
+        if(this.selectMonth){
+          if (this.displayDayView || this.displayYearView) {
+            this.displayMonthView = false
+          } else {
+            this.displayMonthView = !this.displayMonthView
+          }
+        }else if(this.selectYear){
+          if (this.displayDayView || this.displayMonthView) {
+            this.displayYearView = false
+          } else {
+            this.displayYearView = !this.displayYearView
+          }
+        }else{
+          if (this.displayMonthView || this.displayYearView) {
+            this.displayDayView = false
+          } else {
+            this.displayDayView = !this.displayDayView
+          }
+        }
+        // 显示式纠正位置
+        // 显示式纠正位置
+        if (this.displayDayView) {
+          this.$nextTick(() => {
+            let el = this.$els.popup
+            if (document.documentElement.clientHeight < el.getBoundingClientRect().bottom) { // 向上展开
+              this.isUp = true
+            }
+            if (el.getBoundingClientRect().right > document.documentElement.clientWidth) { // 右对齐
+              this.isRight = true
+            }
+          })
+        }
+      },
+      preNextDecadeClick (flag) {
+        const year = this.currDate.getFullYear()
+        const months = this.currDate.getMonth()
+        const date = this.currDate.getDate()
+        const hours = this.currDate.getHours()
+        const minutes = this.currDate.getMinutes()
+        const seconds = this.currDate.getSeconds()
+
+        if (flag === 0) {
+          this.currDate = new Date(year - 10, months, date, hours, minutes, seconds)
+        } else {
+          this.currDate = new Date(year + 10, months, date, hours, minutes, seconds)
+        }
+      },
+      preNextMonthClick (flag) {
+        const year = this.currDate.getFullYear()
+        const month = this.currDate.getMonth()
+        const date = this.currDate.getDate()
+        const hours = this.currDate.getHours()
+        const minutes = this.currDate.getMinutes()
+        const seconds = this.currDate.getSeconds()
+
+        if (flag === 0) {
+          const preMonth = this.getYearMonth(year, month - 1)
+          this.currDate = new Date(preMonth.year, preMonth.month, date, hours, minutes, seconds)
+        } else {
+          const nextMonth = this.getYearMonth(year, month + 1)
+          this.currDate = new Date(nextMonth.year, nextMonth.month, date, hours, minutes, seconds)
+        }
+      },
+      preNextYearClick (flag) {
+        const year = this.currDate.getFullYear()
+        const months = this.currDate.getMonth()
+        const date = this.currDate.getDate()
+        const hours = this.currDate.getHours()
+        const minutes = this.currDate.getMinutes()
+        const seconds = this.currDate.getSeconds()
+
+        if (flag === 0) {
+          this.currDate = new Date(year - 1, months, date, hours, minutes, seconds)
+        } else {
+          this.currDate = new Date(year + 1, months, date, hours, minutes, seconds)
+        }
+      },
+      yearSelect (year) {
+        if(!this.selectYear){
+          this.displayYearView = false
+          this.displayMonthView = true
+          this.currDate = new Date(year, this.currDate.getMonth(), this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
+        }else{
+          this.currDate = new Date(year, this.currDate.getMonth(), this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
+          this.value = this.stringify(this.currDate)
+          this.displayYearView = false
+        }
+      },
+      daySelect (date, el) {
+        if (el.$el.classList[0] === 'datepicker-item-disable') {
+          return false
+        } else {
+          this.currDate = date
+          this.value = this.stringify(this.currDate)
+          this.displayDayView = false
+        }
+      },
+      switchMonthView () {
+        this.displayDayView = false
+        this.displayMonthView = true
+        if (this.displayMonthView) {
+
+        }
+      },
+      switchDecadeView () {
+        this.displayMonthView = false
+        this.displayYearView = true
+      },
+      monthSelect (index) {
+        if(!this.selectMonth) {
+          this.displayMonthView = false
+          this.displayDayView = true
+          this.currDate = new Date(this.currDate.getFullYear(), index, this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
+        }else{
+          this.currDate = new Date(this.currDate.getFullYear(), index, this.currDate.getDate(), this.currDate.getHours(), this.currDate.getMinutes(), this.currDate.getSeconds())
+          this.value = this.stringify(this.currDate)
+          this.displayMonthView = false
+        }
+      },
+      switchDayView () {
+        this.displayDayView = false
+      },
+      getYearMonth (year, month) {
+        if (month > 11) {
+          year++
+          month = 0
+        } else if (month < 0) {
+          year--
+          month = 11
+        }
+        return {year: year, month: month}
+      },
+      stringifyDecadeHeader (date) {
+        const yearStr = date.getFullYear().toString()
+        const firstYearOfDecade = yearStr.substring(0, yearStr.length - 1) + 0
+        const lastYearOfDecade = parseInt(firstYearOfDecade, 10) + 10
+        return firstYearOfDecade + '-' + lastYearOfDecade
+      },
+      stringifyDayHeader (date) {
+        // return this.monthNames[date.getMonth()] + ' ' + date.getFullYear()
+        return date.getFullYear() + '年' + this.monthNames[date.getMonth()]
+      },
+      parseMonth (date) {
+        return this.monthNames[date.getMonth()]
+      },
+      stringifyYearHeader (date) {
+        return date.getFullYear()
+      },
+      stringify (date, format = this.format) {
+        const year = date.getFullYear()
+        const month = date.getMonth() + 1
+        const day = date.getDate()
+        const monthName = this.parseMonth(date)
+
+        return format
+          .replace(/yyyy/g, year)
+          .replace(/MMMM/g, monthName)
+          .replace(/MMM/g, monthName.substring(0, 3))
+          .replace(/MM/g, ('0' + month).slice(-2))
+          .replace(/dd/g, ('0' + day).slice(-2))
+          .replace(/yy/g, year)
+          .replace(/M(?!a)/g, month)
+          .replace(/d/g, day)
+          .replace(/HH/g, ('0' + this.hour).slice(-2))
+          .replace(/mm/g, ('0' + this.minute).slice(-2))
+          .replace(/ss/g, ('0' + this.second).slice(-2))
+      },
+      parse (str) {
+        if (!str) {
+          return null
+        }
+        if (str.length === 10 && (this.format === 'dd-MM-yyyy' || this.format === 'dd/MM/yyyy')) {
+          str = str.substring(3, 5) + '-' + str.substring(0, 2) + '-' + str.substring(6, 10)
+        }
+        const date = new Date(str)
+        return isNaN(date.getFullYear()) ? new Date() : date
+      },
+      getDayCount (year, month) {
+        const dict = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+
+        if (month === 1) {
+          if ((year % 400 === 0) || (year % 4 === 0 && year % 100 !== 0)) {
+            return 29
+          }
+          return 28
+        }
+
+        return dict[month]
+      },
+      getDateRange () {
+        this.dateRange = []
+        this.decadeRange = []
+
+        this.hour = this.currDate.getHours()
+        this.minute = this.currDate.getMinutes()
+        this.second = this.currDate.getSeconds()
+
+        const time = {
+          year: this.currDate.getFullYear(),
+          month: this.currDate.getMonth(),
+          day: this.currDate.getDate()
+        }
+        const yearStr = time.year.toString()
+        const firstYearOfDecade = (yearStr.substring(0, yearStr.length - 1) + 0) - 1
+        for (let i = 0; i < 12; i++) {
+          this.decadeRange.push({
+            text: firstYearOfDecade + i
+          })
+        }
+
+        const currMonthFirstDay = new Date(time.year, time.month, 1)
+        let firstDayWeek = currMonthFirstDay.getDay() + 1
+        if (firstDayWeek === 0) {
+          firstDayWeek = 7
+        }
+        const dayCount = this.getDayCount(time.year, time.month)
+        if (firstDayWeek > 1) {
+          const preMonth = this.getYearMonth(time.year, time.month - 1)
+          const prevMonthDayCount = this.getDayCount(preMonth.year, preMonth.month)
+          for (let i = 1; i < firstDayWeek; i++) {
+            const dayText = prevMonthDayCount - firstDayWeek + i + 1
+            this.dateRange.push({
+              text: dayText,
+              date: new Date(preMonth.year, preMonth.month, dayText),
+              sclass: 'datepicker-item-gray'
+            })
+          }
+        }
+
+        for (let i = 1; i <= dayCount; i++) {
+          const date = new Date(time.year, time.month, i)
+          const week = date.getDay()
+          let sclass = ''
+          this.disabledDaysOfWeek.forEach((el) => {
+            if (week === parseInt(el, 10)) sclass = 'datepicker-item-disable'
+          })
+
+          if (i === time.day) {
+            if (this.value) {
+              const valueDate = this.parse(this.value)
+              if (valueDate) {
+                if (valueDate.getFullYear() === time.year && valueDate.getMonth() === time.month) {
+                  sclass = 'datepicker-dateRange-item-active'
+                }
+              }
+            }
+          }
+          this.dateRange.push({
+            text: i,
+            date: date,
+            sclass: sclass
+          })
+        }
+
+        if (this.dateRange.length < 42) {
+          const nextMonthNeed = 42 - this.dateRange.length
+          const nextMonth = this.getYearMonth(time.year, time.month + 1)
+
+          for (let i = 1; i <= nextMonthNeed; i++) {
+            this.dateRange.push({
+              text: i,
+              date: new Date(nextMonth.year, nextMonth.month, i),
+              sclass: 'datepicker-item-gray'
+            })
+          }
+        }
+      },
+      switchTimeView () {
+        this.displayMonthView = false
+        this.displayYearView = false
+        this.displayTimeView = true
+        this.displayDayView = true
+      },
+      closeTimeTem () {
+        this.displayTimeView = false
+        this.value = this.stringify(this.currDate)
+        this.displayDayView = false
+      },
+      changeHour (flag, hour) {
+        console.log('flag:', flag, 'hour->', hour)
+        this.hour = flag + Number(hour)
+        if (this.hour === 24) {
+          this.hour = '00'
+        }
+        if (Number(this.hour) < 0) {
+          this.hour = 23
+        }
+        if (this.hour < 10 && this.hour >= 0) {
+          this.hour = '0' + Number(this.hour)
+        }
+      },
+      changeMinute (flag, minute) {
+        console.log('flag:', flag, 'minute->', minute)
+        this.minute = flag + Number(minute)
+        if (this.minute === 60) {
+          this.minute = '00'
+        }
+        if (Number(this.minute) < 0) {
+          this.minute = 59
+        }
+        if (this.minute < 10 && this.minute >= 0) {
+          this.minute = '0' + Number(this.minute)
+        }
+      },
+      changeSecond (flag, second) {
+        console.log('flag:', flag, 'second->', second)
+        this.second = flag + Number(second)
+        if (this.second === 60) {
+          this.second = '00'
+        }
+        if (Number(this.second) < 0) {
+          this.second = 59
+        }
+        if (this.second < 10 && this.second >= 0) {
+          this.second = '0' + Number(this.second)
+        }
+      }
+      // showTime () {
+      //   if (this.format.indexOf('HH:mm:ss') !== -1) {
+      //     this.displayTTimeView = true
+      //   } else {
+      //     this.displayTTimeView = false
+      //   }
+      //   console.log('this.format', this.format)
+      //   console.log('this.displayTTimeView', this.displayTTimeView)
+      //   console.log('HH:mm:ss', this.format.indexOf('HH:mm:ss'))
+      // }
+    },
+    ready () {
+      if (this.default) {
+        this.value = this.stringify(new Date())
+      }
+      this.getDateRange()
+      this.$dispatch('child-created', this)
+      this.currDate = this.parse(this.value) || this.parse(new Date())
+      this._closeEvent = EventListener.listen(window, 'click', (e) => {
+        if (!this.$el.contains(e.target)) this.close()
+      })
+    },
+    beforeDestroy () {
+      if (this._closeEvent) this._closeEvent.remove()
+    },
+    computed: {
+      displayTTimeView () {
+        if (this.format.indexOf('HH:mm:ss') !== -1) {
+          return true
+        } else {
+          return false
+        }
+      }
+    }
+  }
+</script>
+<style>
+  .dateup {
+    bottom: 100%;
+  }
+  .dateright {
+    right: 0;
+  }
+  .datepicker{
+    position: relative;
+    display: inline-block;
+  }
+  input.datepicker-input.with-reset-button {
+    padding-right: 25px;
+  }
+  .datepicker > button.close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    outline: none;
+    z-index: 2;
+    display: block;
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+  }
+  .datepicker > button.close:focus {
+    opacity: .2;
+  }
+  .datepicker-popup{
+    position: absolute;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background: #fff;
+    margin-top: 2px;
+    z-index: 1000;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+  }
+  .datepicker-inner{
+    width: 218px;
+  }
+  .datepicker-body{
+    padding: 10px 10px;
+  }
+  .datepicker-ctrl p,
+  .datepicker-ctrl span,
+  .datepicker-body span{
+    display: inline-block;
+    width: 28px;
+    line-height: 28px;
+    height: 28px;
+    border-radius: 4px;
+  }
+  .datepicker-ctrl p {
+    width: 65%;
+  }
+  .datepicker-ctrl span {
+    position: absolute;
+  }
+  .datepicker-body span {
+    text-align: center;
+  }
+  .datepicker-monthRange span{
+    width: 48px;
+    height: 50px;
+    line-height: 45px;
+  }
+  .datepicker-item-disable {
+    background-color: white!important;
+    cursor: not-allowed!important;
+  }
+  .decadeRange span:first-child,
+  .decadeRange span:last-child,
+  .datepicker-item-disable,
+  .datepicker-item-gray{
+    color: #999;
+  }
+  .datepicker-dateRange-item-active:hover,
+  .datepicker-dateRange-item-active {
+    background: rgb(50, 118, 177)!important;
+    color: white!important;
+  }
+  .datepicker-monthRange {
+    margin-top: 10px
+  }
+  .datepicker-monthRange span,
+  .datepicker-ctrl span,
+  .datepicker-ctrl p,
+  .datepicker-dateRange span {
+    cursor: pointer;
+  }
+  .datepicker-monthRange span:hover,
+  .datepicker-ctrl p:hover,
+  .datepicker-ctrl i:hover,
+  .datepicker-dateRange span:hover,
+  .datepicker-dateRange-item-hover {
+    background-color : #eeeeee;
+  }
+  .datepicker-weekRange span{
+    font-weight: bold;
+  }
+  .datepicker-label{
+    background-color: #f8f8f8;
+    font-weight: 700;
+    padding: 7px 0;
+    text-align: center;
+  }
+  .datepicker-ctrl{
+    position: relative;
+    height: 30px;
+    line-height: 30px;
+    font-weight: bold;
+    text-align: center;
+  }
+  .month-btn{
+    font-weight: bold;
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    -ms-user-select:none;
+    user-select:none;
+  }
+  .datepicker-preBtn{
+    left: 2px;
+  }
+  .datepicker-nextBtn{
+    right: 2px;
+  }
+  .table-condensed> thead> tr> th,
+  .table-condensed> tbody> tr> th,
+  .table-condensed> tfoot> tr> th,
+  .table-condensed> thead> tr> td,
+  .table-condensed> tbody> tr> td,
+  .table-condensed> tfoot> tr> td {
+    padding: 5px;
+  }
+
+  .btn {
+    display: inline-block;
+    padding: 6px 12px;
+    margin-bottom: 0px;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.4285;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+  }
+</style>