日期选择器

babel.config.js

@@ -1,5 +1,11 @@
 module.exports = {
   presets: [
     '@vue/app'
+  ],
+  plugins: [
+    [
+      'import',
+      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }
+    ]
   ]
 }

package.json

@@ -36,6 +36,7 @@
     "html2canvas": "^1.0.0-rc.3",
     "js-cookie": "2.2.0",
     "jspdf": "^1.5.3",
+    "lodash": "^4.17.15",
     "moment": "^2.25.3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
@@ -64,15 +65,19 @@
     "@vue/cli-plugin-unit-jest": "3.6.3",
     "@vue/cli-service": "3.6.0",
     "@vue/test-utils": "1.0.0-beta.29",
+    "ant-design-vue": "^1.6.0",
     "autoprefixer": "^9.5.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
+    "babel-plugin-import": "^1.13.0",
     "chalk": "2.4.2",
     "connect": "3.6.6",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
+    "less": "^2.7.2",
+    "less-loader": "^6.1.0",
     "mockjs": "1.0.1-beta3",
     "node-sass": "^4.9.0",
     "runjs": "^4.3.2",

src/components/picker/SelDatePicker.vue

@@ -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>

src/main.js

@@ -6,6 +6,9 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n 英文
 
+import { DatePicker } from 'ant-design-vue'
+Vue.use(DatePicker)
+
 import '@/styles/index.scss' // global css
 
 import App from './App'

src/views/projectManage/taskList/taskViewDetails.vue

@@ -355,6 +355,9 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form-item label="排期">
+            <Sel-date-picker />
+          </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -443,6 +446,7 @@
 </template>
 
 <script>
+import SelDatePicker from '@/components/picker/SelDatePicker'
 import BugDetails from '@/views/projectManage/bugList/details/index.vue'
 import {
   taskGet,
@@ -481,7 +485,8 @@ export default {
     TestReport,
     BugDetails,
     DailyReport,
-    ClientReport
+    ClientReport,
+    SelDatePicker
   },
   filters: {
     ellipsis(value) {