Add week numbers

Sergio Crisostomo
1 parent ac231c9a
Showing 7 changed files with 65 additions and 71 deletions Show diff stats
examples/routers/date.vue
src/components/date-picker/base/date-table.vue
src/components/date-picker/panel/Date/date-panel-mixin.js
src/components/date-picker/panel/Date/date-range.vue
src/components/date-picker/panel/Date/date.vue
src/components/date-picker/picker.vue
src/styles/components/date-picker.less
@@ -165,6 +165,8 @@
             <br>
             <Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple
             <br>
+            <Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers
+            <br>
             <Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm
             <br>
             <Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date
@@ -7,18 +7,19 @@
         </div>
         <span
                 :class="getCellCls(cell)"
-                v-for="cell in readCells"
+                v-for="(cell, i) in readCells"
+                :key="String(cell.date) + i"
                 @click="handleClick(cell)"
                 @mouseenter="handleMouseMove(cell)"
         >
-            <em>{{ cell.text }}</em>
+            <em>{{ cell.desc }}</em>
         </span>
     </div>
 </template>
 <script>
-    import { getFirstDayOfMonth, getDayCountOfMonth, clearHours, isInRange } from '../util';
-    import { deepCopy } from '../../../utils/assist';
+    import { clearHours, isInRange } from '../util';
     import Locale from '../../../mixins/locale';
+    import jsCalendar from 'js-calendar';
  
     import mixin from './mixin';
     import prefixCls from './prefixCls';
@@ -29,16 +30,25 @@
  
         props: {
             /* more props in mixin */
+            showWeekNumbers: {
+                type: Boolean,
+                default: false
+            },
         },
         data () {
+            const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
             return {
                 prefixCls: prefixCls,
+                calendar: new jsCalendar.Generator({onlyDays: !this.showWeekNumbers, weekStart: weekStartDay})
             };
         },
         computed: {
             classes () {
                 return [
-                    `${prefixCls}`
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
+                    }
                 ];
             },
             headerDays () {
@@ -47,76 +57,32 @@
                     return this.t('i.datepicker.weeks.' + item);
                 });
                 const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
-                return weekDays;
+                return this.showWeekNumbers ? [''].concat(weekDays) : weekDays;
             },
             readCells () {
                 const tableYear = this.tableDate.getFullYear();
                 const tableMonth = this.tableDate.getMonth();
-                const date = new Date(tableYear, tableMonth, 1);
-                const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
-                const day = (getFirstDayOfMonth(date) || 7) - weekStartDay; // day of first day
                 const today = clearHours(new Date());    // timestamp of today
                 const selectedDays = this.dates.filter(Boolean).map(clearHours);    // timestamp of selected days
                 const [minDay, maxDay] = this.dates.map(clearHours);
                 const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
                 const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
  
-                const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
-                const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
-
-                const disabledDate = this.disabledDate;
-
-                let cells = [];
-                const cell_tmpl = {
-                    text: '',
-                    type: '',
-                    date: null,
-                    selected: false,
-                    disabled: false,
-                    range: false,
-                    start: false,
-                    end: false
-                };
-                if (day !== 7) {
-                    for (let i = 0; i < day; i++) {
-                        const cell = deepCopy(cell_tmpl);
-                        cell.type = 'prev-month';
-                        cell.text = dateCountOfLastMonth - (day - 1) + i;
-                        cell.date = new Date(tableYear, tableMonth - 1, cell.text);
-                        const time = clearHours(cell.date);
-                        cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
-                        cells.push(cell);
-                    }
-                }
-
-                for (let i = 1; i <= dateCountOfMonth; i++) {
-                    const cell = deepCopy(cell_tmpl);
-                    cell.text = i;
-                    cell.date = new Date(tableYear, tableMonth, cell.text);
-                    const time = clearHours(cell.date);
-                    cell.type = time === today ? 'today' : 'normal';
-                    cell.selected = selectedDays.includes(time);
-                    cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
-                    if (this.selectionMode === 'range'){
-                        cell.range = isInRange(time, rangeStart, rangeEnd);
-                        cell.start = time === minDay;
-                        cell.end = time === maxDay;
-                    }
-                    cells.push(cell);
-                }
-
-                const nextMonthCount = 42 - cells.length;
-                for (let i = 1; i <= nextMonthCount; i++) {
-                    const cell = deepCopy(cell_tmpl);
-                    cell.type = 'next-month';
-                    cell.text = i;
-                    cell.date = new Date(tableYear, tableMonth + 1, cell.text);
-                    const time = clearHours(cell.date);
-                    cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
-                    cells.push(cell);
-                }
+                const isRange = this.selectionMode === 'range';
+                const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate;
  
-                return cells;
+                return this.calendar(tableYear, tableMonth, (cell) => {
+                    const time = cell.date && clearHours(cell.date);
+                    return {
+                        ...cell,
+                        type: time === today ? 'today' : cell.type,
+                        selected: selectedDays.includes(time),
+                        disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
+                        range: isRange && isInRange(time, rangeStart, rangeEnd),
+                        start: isRange && time === minDay,
+                        end: isRange && time === maxDay
+                    };
+                }).cells.slice(8);
             }
         },
         methods: {
@@ -127,8 +93,9 @@
                         [`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
                         [`${prefixCls}-cell-disabled`]: cell.disabled,
                         [`${prefixCls}-cell-today`]: cell.type === 'today',
-                        [`${prefixCls}-cell-prev-month`]: cell.type === 'prev-month',
-                        [`${prefixCls}-cell-next-month`]: cell.type === 'next-month',
+                        [`${prefixCls}-cell-prev-month`]: cell.type === 'prevMonth',
+                        [`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
+                        [`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',
                         [`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
                     }
                 ];
@@ -36,6 +36,10 @@ export default {
             type: Array,
             default: () => [initTimeDate(), initTimeDate()]
         },
+        showWeekNumbers: {
+            type: Boolean,
+            default: false
+        },
         startDate: {
             type: Date
         }
@@ -38,6 +38,7 @@
                     selection-mode="range"
                     :disabled-date="disabledDate"
                     :range-state="rangeState"
+                    :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     @on-change-range="handleChangeRange"
                     @on-pick="handleRangePick"
@@ -75,6 +76,7 @@
                     selection-mode="range"
                     :range-state="rangeState"
                     :disabled-date="disabledDate"
+                    :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     @on-change-range="handleChangeRange"
                     @on-pick="handleRangePick"
@@ -33,6 +33,7 @@
                     ref="pickerTable"
                     v-if="currentView !== 'time'"
                     :table-date="panelDate"
+                    :show-week-numbers="showWeekNumbers"
                     :value="dates"
                     :selection-mode="selectionMode"
                     :disabled-date="disabledDate"
@@ -17,7 +17,9 @@
                     @on-click="handleIconClick"
                     @mouseenter.native="handleInputMouseenter"
                     @mouseleave.native="handleInputMouseleave"
-                    :icon="iconType"></i-input>
+
+                    :icon="iconType"
+                ></i-input>
             </slot>
         </div>
         <transition :name="transition">
@@ -41,6 +43,7 @@
                         :value="internalValue"
                         :start-date="startDate"
                         :split-panels="splitPanels"
+                        :show-week-numbers="showWeekNumbers"
  
                         v-bind="ownPickerProps"
  
@@ -210,6 +213,10 @@
                 type: Boolean,
                 default: false
             },
+            showWeekNumbers: {
+                type: Boolean,
+                default: false
+            },
             startDate: {
                 type: Date
             },
@@ -423,8 +430,7 @@
             onPickSuccess(){
                 this.visible = false;
                 this.$emit('on-ok');
-            }
-
+            },
         },
         watch: {
             visible (state) {
@@ -2,6 +2,7 @@
 @picker-prefix-cls: ~"@{css-prefix}picker";
  
 @date-picker-cells-width: 196px;
+@date-picker-cells-width-with-weeknumbers: 226px;
  
 .@{date-picker-prefix-cls} {
     //position: relative;
@@ -64,15 +65,17 @@
                     }
                 }
             }
-            span&-disabled,span&-disabled:hover{
+            span&-week-label,span&-week-label:hover,span&-disabled,span&-disabled:hover{
                 cursor: @cursor-disabled;
-                background: @btn-disable-bg;
                 color: @btn-disable-color;
                 em{
                     color: inherit;
                     background: inherit;
                 }
             }
+            span&-disabled,span&-disabled:hover{
+                background: @btn-disable-bg;
+            }
             &-today{
                 em {
                     position: relative;
@@ -132,6 +135,10 @@
         }
     }
  
+    &-cells-show-week-numbers {
+        width: @date-picker-cells-width-with-weeknumbers;
+    }
+
     &-cells-year,&-cells-month{
         margin-top: 14px;
         span{
@@ -190,7 +197,12 @@
                 float: left;
             }
         }
+        .@{picker-prefix-cls}-cells-show-week-numbers {
+            min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
+        }
+
     }
+
     &-transfer{
         z-index: @zindex-transfer;
         max-height: none;