Merge pull request #16 from xiaofan9/v2

fix: 修复选择周时，显示区块错乱的bug

dist/web-types.json

@@ -1 +1 @@
-{"$schema":"http://json.schemastore.org/web-types","framework":"vue","name":"date-week-range","version":"2.0.0","contributions":{"html":{"types-syntax":"typescript","description-markup":"markdown","tags":[{"name":"date-week-range","description":"This is a week range selector.","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#dateweekrange","attributes":[{"name":"model-value","description":"binding value","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"date","kind":"expression"}},{"name":"readonly","description":"whether DatePicker is read only","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"false","value":{"type":"boolean","kind":"expression"}},{"name":"disabled","description":"whether DatePicker is disabled","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"false","value":{"type":"boolean","kind":"expression"}},{"name":"size","description":"size of Input","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"large","value":{"type":"string","kind":"expression"}},{"name":"editable","description":"whether the input is editable","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"true","value":{"type":"boolean","kind":"expression"}},{"name":"clearable","description":"whether to show clear button","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"true","value":{"type":"boolean","kind":"expression"}},{"name":"placeholder","description":"placeholder in non-range mode","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"start-placeholder","description":"placeholder for the start date in range mode","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"end-placeholder","description":"placeholder for the end date in range mode","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"format","description":"format of the displayed value in the input box","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"YYYY-MM-DD","value":{"type":"string","kind":"expression"}},{"name":"align","description":"alignment","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"left"},{"name":"popper-class","description":"custom class name for DatePicker's dropdown","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"range-separator","description":"range separator","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"'-'","value":{"type":"string","kind":"expression"}},{"name":"default-value","description":"optional, default date of the calendar","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"date","kind":"expression"}},{"name":"default-time","description":"optional, the time value to use when selecting date range","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"date[]","kind":"expression"}},{"name":"name","description":"same as `name` in native input","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"unlink-panels","description":"unlink two date-panels in range-picker","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"false","value":{"type":"boolean","kind":"expression"}},{"name":"prefix-icon","description":"Custom prefix icon class","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"el-icon-date","value":{"type":"string","kind":"expression"}},{"name":"clear-icon","description":"Custom clear icon class","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"el-icon-circle-close","value":{"type":"string","kind":"expression"}},{"name":"validate-event","description":"whether to trigger form validation","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"true","value":{"type":"boolean","kind":"expression"}},{"name":"disabled-date","description":"a function determining if a date is disabled with that date as its parameter. Should return a Boolean","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"function","kind":"expression"}},{"name":"shortcuts","description":"an object array to set shortcut options","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"object[{ text: string|value: date }]","kind":"expression"}}],"events":[{"name":"change","description":"triggers when user confirms the value","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#events"},{"name":"blur","description":"triggers when Input blurs","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#events"},{"name":"focus","description":"triggers when Input focuses","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#events"}],"slots":[{"name":"range-separator","description":"custom range separator content","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#slots"}]}]}}}
+{"$schema":"http://json.schemastore.org/web-types","framework":"vue","name":"date-week-range","version":"2.0.2","contributions":{"html":{"types-syntax":"typescript","description-markup":"markdown","tags":[{"name":"date-week-range","description":"This is a week range selector.","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#dateweekrange","attributes":[{"name":"model-value","description":"binding value","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"date","kind":"expression"}},{"name":"readonly","description":"whether DatePicker is read only","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"false","value":{"type":"boolean","kind":"expression"}},{"name":"disabled","description":"whether DatePicker is disabled","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"false","value":{"type":"boolean","kind":"expression"}},{"name":"size","description":"size of Input","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"large","value":{"type":"string","kind":"expression"}},{"name":"editable","description":"whether the input is editable","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"true","value":{"type":"boolean","kind":"expression"}},{"name":"clearable","description":"whether to show clear button","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"true","value":{"type":"boolean","kind":"expression"}},{"name":"placeholder","description":"placeholder in non-range mode","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"start-placeholder","description":"placeholder for the start date in range mode","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"end-placeholder","description":"placeholder for the end date in range mode","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"format","description":"format of the displayed value in the input box","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"YYYY-MM-DD","value":{"type":"string","kind":"expression"}},{"name":"align","description":"alignment","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"left"},{"name":"popper-class","description":"custom class name for DatePicker's dropdown","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"range-separator","description":"range separator","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"'-'","value":{"type":"string","kind":"expression"}},{"name":"default-value","description":"optional, default date of the calendar","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"date","kind":"expression"}},{"name":"default-time","description":"optional, the time value to use when selecting date range","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"date[]","kind":"expression"}},{"name":"name","description":"same as `name` in native input","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"string","kind":"expression"}},{"name":"unlink-panels","description":"unlink two date-panels in range-picker","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"false","value":{"type":"boolean","kind":"expression"}},{"name":"prefix-icon","description":"Custom prefix icon class","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"el-icon-date","value":{"type":"string","kind":"expression"}},{"name":"clear-icon","description":"Custom clear icon class","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"el-icon-circle-close","value":{"type":"string","kind":"expression"}},{"name":"validate-event","description":"whether to trigger form validation","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","default":"true","value":{"type":"boolean","kind":"expression"}},{"name":"disabled-date","description":"a function determining if a date is disabled with that date as its parameter. Should return a Boolean","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"function","kind":"expression"}},{"name":"shortcuts","description":"an object array to set shortcut options","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#attributes","value":{"type":"object[{ text: string|value: date }]","kind":"expression"}}],"events":[{"name":"change","description":"triggers when user confirms the value","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#events"},{"name":"blur","description":"triggers when Input blurs","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#events"},{"name":"focus","description":"triggers when Input focuses","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#events"}],"slots":[{"name":"range-separator","description":"custom range separator content","doc-url":"https://element-plus.org/#/en-US/component/el-date-picker#slots"}]}]}}}

example/src/App.vue

@@ -2,7 +2,6 @@
   <div>
     <date-week-range
     v-model="test"
-    :disabled-date="disabledDate"
     range-separator=";"
   ></date-week-range>
   </div>
@@ -19,9 +18,9 @@ export default {
   setup() {
     return {
       test: ref(['2021-04-12', '2021-04-16']),
-      disabledDate(time) {
-        return time.getTime() > Date.now()
-      },
+      // disabledDate(time) {
+      //   return time.getTime() > Date.now()
+      // },
     }
   },
   // components: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "date-week-range",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "This is a week range selector.",
   "author": "sifan",
   "scripts": {

src/date-picker-com/basic-date-table.vue → src/date-picker-com/basic-week-table.vue

@@ -3,7 +3,6 @@
     cellspacing="0"
     cellpadding="0"
     class="el-date-table"
-    :class="{ 'is-week-mode': selectionMode === 'week' }"
     @click="handleClick"
     @mousemove="handleMouseMove"
     @mouseleave="handleMouseOut"
@@ -37,7 +36,7 @@
 
 <script>
 import { useLocale } from 'element-plus/lib/hooks/index'
-import { handleDate } from '../util';
+import { handleWeekLastDay, handleWeekOneDay } from '../util';
 
 import {
   defineComponent,
@@ -60,10 +59,6 @@ export default defineComponent({
     parsedValue: {
       type: [Object, Array]
     },
-    selectionMode: {
-      type: String,
-      default: 'day',
-    },
     showWeekNumber: {
       type: Boolean,
       default: false,
@@ -111,7 +106,6 @@ export default defineComponent({
     })
 
     const isWeekActive = cell => {
-      if (props.selectionMode !== 'week') return false
       let newDate = props.date.startOf('day')
 
       if (cell.type === 'prev-month') {
@@ -191,6 +185,7 @@ export default defineComponent({
             calTime.isSameOrAfter(calEndDate, 'day')
           ) || moveDate.value && calTime.isSameOrAfter(moveDate.value, 'week') && calTime.isSameOrBefore(moveDate.value, 'week')
 
+          // 最开始选中的日期是否在移动中的日期之前
           if (props.minDate?.isSameOrAfter(calEndDate)) {
             cell.start = calEndDate && calTime.isSame(calEndDate, 'day')
             cell.end = props.minDate && calTime.isSame(props.minDate, 'day')
@@ -240,16 +235,6 @@ export default defineComponent({
           cell.customClass = props.cellClassName && props.cellClassName(cellDate)
           row[props.showWeekNumber ? j + 1 : j] = cell
         }
-
-        if (props.selectionMode === 'week') {
-          const start = props.showWeekNumber ? 1 : 0
-          const end = props.showWeekNumber ? 7 : 6
-          const isActive = isWeekActive(row[start + 1])
-          row[start].inRange = isActive
-          row[start].start = isActive
-          row[end].inRange = isActive
-          row[end].end = isActive
-        }
       }
 
       return rows_
@@ -275,11 +260,11 @@ export default defineComponent({
         classes.push(cell.type)
       }
 
-      if (props.selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && cellMatchesDate(cell, props.parsedValue)) {
+      if ((cell.type === 'normal' || cell.type === 'today') && cellMatchesDate(cell, props.parsedValue)) {
         classes.push('current')
       }
 
-      if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today') || props.selectionMode === 'week')) {
+      if (cell.inRange && ((cell.type === 'normal' || cell.type === 'today'))) {
         classes.push('in-range')
 
         if (cell.start) {
@@ -340,16 +325,36 @@ export default defineComponent({
         lastRow.value = row
         lastColumn.value = column
 
-        let endDate = handleDate(getDateOfCell(row, column), true);
+        let endDate = getDateOfCell(row, column);
+        let minDate = props.minDate;
+
+        const minDay = minDate.day() || 7;
+        const endDay = endDate.day() || 7;
+
+        if(!endDate.isSameOrAfter(props.minDate)) {
+          console.log(1, endDate.format('YYYY-MM-DD'));
+          if(endDay < firstDayOfWeek) {
+            // endDate = endDate.subtract(1, 'week')
+          }
 
-        if(endDate.unix() < props.minDate.add(1, 'week').unix()) {
-          endDate = handleDate(getDateOfCell(row, column), false);
+          if(minDay === firstDayOfWeek) {
+            minDate = handleWeekLastDay(minDate);
+          }
 
-          ctx.emit('pick', { minDate: handleDate(props.minDate, true), maxDate: null })
+          endDate = handleWeekOneDay(endDate, false);
         } else {
-          ctx.emit('pick', { minDate: handleDate(props.minDate, false), maxDate: null })
+          if(minDate.day() === firstDayOfWeek - 1) {
+            minDate = handleWeekOneDay(minDate);
+          }
+
+          if(endDay < firstDayOfWeek) {
+            // endDate = endDate.subtract(1, 'week')
+          }
+
+          endDate = handleWeekLastDay(endDate);
         }
 
+        ctx.emit('pick', { minDate, maxDate: null })
         ctx.emit('changerange', {
           selecting: true,
           endDate,
@@ -378,22 +383,22 @@ export default defineComponent({
 
       if (cell.disabled || cell.type === 'week') return
 
-      const newDate = handleDate(getDateOfCell(row, column), props.rangeState.selecting)
+      const tmpNewDate = getDateOfCell(row, column);
+
+      const newDate = handleWeekOneDay(tmpNewDate)
 
-      if (props.selectionMode === 'range') {
-        moveDate.value = null;
-        if (!props.rangeState.selecting) {
-          ctx.emit('pick', { minDate: newDate, maxDate: handleDate(getDateOfCell(row, column), true) }, false)
-          ctx.emit('select', true)
+      moveDate.value = null;
+      if (!props.rangeState.selecting) {
+        ctx.emit('pick', { minDate: newDate, maxDate: handleWeekLastDay(tmpNewDate) }, false)
+        ctx.emit('select', true)
+      } else {
+        if (tmpNewDate >= props.minDate) {
+          ctx.emit('pick', { minDate: handleWeekOneDay(props.minDate), maxDate: handleWeekLastDay(tmpNewDate) })
         } else {
-          if (newDate >= props.minDate) {
-            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })
-          } else {
-            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })
-          }
-          ctx.emit('select', false)
+          ctx.emit('pick', { minDate: handleWeekOneDay(tmpNewDate), maxDate:  handleWeekOneDay(props.minDate) })
         }
-      } 
+        ctx.emit('select', false)
+      }
     }
 
     return {

src/date-picker-com/panel-week-range.vue

@@ -69,7 +69,7 @@
             </template>
             <div>{{ leftLabel }}</div>
           </div>
-          <date-table
+          <date-week-table
             selection-mode="range"
             :date="leftDate"
             :min-date="minDate"
@@ -128,7 +128,7 @@
             </button>
             <div>{{ rightLabel }}</div>
           </div>
-          <date-table
+          <date-week-table
             selection-mode="range"
             :date="rightDate"
             :min-date="minDate"
@@ -157,26 +157,22 @@ import {
 import { useLocale } from 'element-plus/lib/hooks/index'
 import { ClickOutside } from 'element-plus/lib/directives/index'
 import dayjs from 'dayjs'
-import DateTable from './basic-date-table.vue'
-import { handleDate } from '../util';
+import DateWeekTable from './basic-week-table.vue'
+import { handleWeekLastDay, handleWeekOneDay } from '../util';
 import { ElIcon } from 'element-plus'
 import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
 
 export default defineComponent({
 
   directives: { clickoutside: ClickOutside },
 
-  components: { DateTable, ElIcon, ArrowLeft, ArrowRight, DArrowLeft, DArrowRight },
+  components: { DateWeekTable, ElIcon, ArrowLeft, ArrowRight, DArrowLeft, DArrowRight },
 
   props:{
     unlinkPanels: Boolean,
     parsedValue: {
       type: Array,
     },
-    type: {
-      type: String,
-      required: true,
-    },
   },
 
   emits: ['pick', 'set-picker-option'],
@@ -377,8 +373,8 @@ export default defineComponent({
 
     watch(() => props.parsedValue, newVal => {
       if (newVal && newVal.length === 2) {
-        minDate.value = handleDate(newVal[0], false)
-        maxDate.value = handleDate(newVal[1], true)
+        minDate.value = handleWeekOneDay(newVal[0])
+        maxDate.value = handleWeekLastDay(newVal[1])
 
         leftDate.value = minDate.value
         if (props.unlinkPanels && maxDate.value) {

src/style/index.scss

@@ -1,3 +1,4 @@
+@import 'node_modules/element-plus/theme-chalk/base';
+@import 'node_modules/element-plus/theme-chalk/el-var';
 @import 'node_modules/element-plus/theme-chalk/el-icon';
-@import 'node_modules/element-plus/theme-chalk/el-date-picker';
-@import 'node_modules/element-plus/theme-chalk/el-var';
+@import 'node_modules/element-plus/theme-chalk/el-date-picker';