|
|
@@ -0,0 +1,95 @@
|
|
|
+<template>
|
|
|
+ <a-range-picker
|
|
|
+ :show-time="{
|
|
|
+ hideDisabledOptions: true,
|
|
|
+ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
|
|
|
+ }"
|
|
|
+ @ok="confirmDate"
|
|
|
+ @change="changeRange"
|
|
|
+ >
|
|
|
+ <template slot="dateRender" slot-scope="current">
|
|
|
+ <div :id="current.format('YYYY:MM:DD')" class="ant-calendar-date">
|
|
|
+ <div
|
|
|
+ class="more-select"
|
|
|
+ :class="[nowDates.find(item=>item === current.format('YYYY:MM:DD'))?'isActive':'']"
|
|
|
+ @click.stop="setSelect(current)"
|
|
|
+ ><span /></div>
|
|
|
+ {{ current.date() }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </a-range-picker>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+const _ = require('lodash')
|
|
|
+import moment from 'moment'
|
|
|
+import 'moment/locale/zh-cn'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ moment,
|
|
|
+ nowDates: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ confirmDate(e) {
|
|
|
+ console.log(e)
|
|
|
+ },
|
|
|
+ changeRange(dates) { // 获取开始结束日期
|
|
|
+ this.nowDates = []
|
|
|
+ const [start, end] = dates
|
|
|
+ let nextDate = _.cloneDeep(start)
|
|
|
+ while (nextDate && nextDate.isBefore(end)) {
|
|
|
+ if (nextDate.weekday() < 5) { // 默认周六，末不在已选数组中
|
|
|
+ this.nowDates.push(nextDate.format('YYYY:MM:DD'))
|
|
|
+ }
|
|
|
+ nextDate = nextDate.add(1, 'day')
|
|
|
+ }
|
|
|
+ console.log(this.nowDates)
|
|
|
+ },
|
|
|
+ setSelect(current) {
|
|
|
+ console.log(current)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.ant-calendar-time-picker-btn {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.ant-calendar-picker-container {
|
|
|
+ z-index: 9999;
|
|
|
+}
|
|
|
+.ant-calendar-cell {
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+.ant-calendar-range .ant-calendar-in-range-cell::before{
|
|
|
+ top: 2px;
|
|
|
+ bottom: 2px;
|
|
|
+}
|
|
|
+.more-select {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.ant-calendar-in-range-cell,.ant-calendar-selected-start-date,.ant-calendar-selected-end-date{
|
|
|
+ .ant-calendar-date {
|
|
|
+ position: relative;
|
|
|
+ .more-select {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ right: -5px;
|
|
|
+ height: 12px;
|
|
|
+ width: 12px;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.isActive {
|
|
|
+ padding: 1px;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: red;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
PrinceLee