ソースを参照

fix:datepicker限制到时分功能新增

richard1015 6 年 前
コミット
9846d7fcb6

+ 145 - 12
src/packages/datepicker/datepicker.vue

@@ -79,6 +79,9 @@ export default {
             cacheDefaultData: [],
             cacheListData: [],
             updateYear: null,
+            updateMonth: null,
+            updateDay: null,
+            updateHour: null,
             use12Hours: ['上午', '下午'], 
             chinese: !this.isShowChinese ? new Array(5).fill('') : this.type == 'time' ? ['时', '分', ''] : ['年', '月', '日', '时', '分']
         };
@@ -89,14 +92,36 @@ export default {
     created() {
         this.init();
     },
+    computed: {
+        dateRange(){
+            const {startDate,endDate,defaultValue}=this;
+            return {startDate,endDate,defaultValue};
+        }
+    },
+    watch:{
+        dateRange(newValue,oldValue){
+            this.init();
+        },
+    },
     methods: {
         init() {
+            if(this.startDate && Utils.isDateString(this.startDate)){
+                this.startDateArr = Utils.getDateArr(this.startDate);
+            }else{
+                this.startDateArr = Utils.getDateArr('2000-01-01');
+            }
+            if(this.endDate && Utils.isDateString(this.endDate)){
+                this.endDateArr = Utils.getDateArr(this.endDate);
+            }else{
+                this.endDateArr = Utils.date2Str(new Date());
+            }
             // 结束时间小于开始时间,结束时间重置为开始时间
-            if (Utils.compareDate(this.endDate, this.startDate)) {
-                this.endDate = this.startDate;
+            if (Utils.compareDate(this.endDateArr, this.startDateArr)) {
+                // this.endDate = this.startDate;
+                this.endDateArr=this.startDateArr;
             }
-            this.startDateArr = this.startDate.replace(/-/g, '/').split('/');
-            this.endDateArr = this.endDate.replace(/-/g, '/').split('/');
+            // this.startDateArr = this.startDate.replace(/-/g, '/').split('/');
+            // this.endDateArr = this.endDate.replace(/-/g, '/').split('/');
             this.initListData();
         },
 
@@ -104,10 +129,23 @@ export default {
             this.resetDefaultValue();
             switch (this.type) {
                 case 'date': 
-                    this.cacheListData = [...[this.getYears(), this.getMonths(this.defaultValueData[0]), this.getDays(this.defaultValueData[0], this.defaultValueData[1])]];
+                    this.cacheListData = [...[
+                        this.getYears(), 
+                        this.getMonths(this.defaultValueData[0]), 
+                        this.getDays(this.defaultValueData[0], 
+                        this.defaultValueData[1])
+                        ]
+                    ];
                     break;
                 case 'datetime': 
-                    this.cacheListData = [...[this.getYears(), this.getMonths(this.defaultValueData[0]), this.getDays(this.defaultValueData[0], this.defaultValueData[1]), this.getHours(), this.getMinutes()]];
+                    this.cacheListData = [...[
+                        this.getYears(), 
+                        this.getMonths(this.defaultValueData[0]), 
+                        this.getDays(this.defaultValueData[0], this.defaultValueData[1]), 
+                        this.getChangeHours(this.defaultValueData[0], this.defaultValueData[1], this.defaultValueData[2]), 
+                        this.getChangeMinutes(this.defaultValueData[0], this.defaultValueData[1], this.defaultValueData[2], this.defaultValueData[3])
+                        ]
+                    ];
                     break;
                 case 'time': 
                     this.cacheListData = [...[this.getHours(), this.getMinutes()]];
@@ -121,14 +159,14 @@ export default {
 
         resetDefaultValue() {
             let cacheDefaultValue = null;
-            if (!this.defaultValue) { 
+            if (!this.defaultValue || !Utils.isDateString(this.defaultValue)) { 
                 switch (this.type) {
                     case 'time': 
                         cacheDefaultValue = `00:00`;
                         break;
                     case 'date': 
                     case 'datetime': 
-                        cacheDefaultValue = `${this.startDateArr[0]}-${this.startDateArr[1]}-${this.startDateArr[2]} 00:00`;
+                        cacheDefaultValue = `${this.startDateArr[0]}-${this.startDateArr[1]}-${this.startDateArr[2]} ${this.startDateArr[3]}:${this.startDateArr[4]}`;
                         break;
                 }
             } else {
@@ -147,6 +185,9 @@ export default {
                 }
                 this.cacheDefaultData = this.getCacheData(cacheData);  
                 this.updateYear =  this.cacheDefaultData[0];  
+                this.updateMonth =  this.cacheDefaultData[1];  
+                this.updateDay =  this.cacheDefaultData[2];  
+                this.updateHour =  this.cacheDefaultData[3];  
             }
             this.defaultValueData = [...this.cacheDefaultData];
         },
@@ -191,6 +232,72 @@ export default {
             return days.filter(item => item);
         },
 
+        getChangeHours(year,month,day){
+            year = this.removeChinese(year);
+            month = this.removeChinese(month).padStart(2,'0');
+            day = this.removeChinese(day).padStart(2,'0');
+            let hours = Array.from(Array(24).keys()).map(hour=>{
+                let startEqualState = (year == this.startDateArr[0] && month == this.startDateArr[1] && day == this.startDateArr[2]);
+                let endEqualState = (year == this.endDateArr[0] && month == this.endDateArr[1] && day == this.endDateArr[2]);
+                let startHour = this.startDateArr[3],
+                    endHour = this.endDateArr[3];
+                
+                let resHour = undefined;
+                if(startEqualState && endEqualState){
+                    if(hour >= parseInt(startHour) && hour <= parseInt(startHour)){
+                        resHour = hour;
+                    }
+                }
+                else if(startEqualState){
+                    if(hour >= parseInt(startHour)){
+                        resHour = hour;
+                    }
+                }else if(endEqualState){
+                    if(hour <= parseInt(endHour)){
+                        resHour = hour;
+                    }
+                }else{
+                    resHour = hour;
+                }
+                return resHour ? `${resHour}${this.chinese[3]}` : undefined;
+            })
+            return hours.filter(item => item);
+        },
+        
+        getChangeMinutes(year,month,day,hour){
+            year = this.removeChinese(year);
+            month = this.removeChinese(month).padStart(2,'0');
+            day = this.removeChinese(day).padStart(2,'0');
+            hour = this.removeChinese(hour).padStart(2,'0');
+            let minutes = Array.from(Array(60).keys()).map(minute=>{
+                let startEqualState = (year == this.startDateArr[0] && month == this.startDateArr[1] && day == this.startDateArr[2] && hour == this.startDateArr[3]);
+                let endEqualState = (year == this.endDateArr[0] && month == this.endDateArr[1] && day == this.endDateArr[2] && hour == this.endDateArr[3]);
+                let startMinute = this.startDateArr[4],
+                    endMinute = this.endDateArr[4];
+                
+                let resMinute = undefined;
+                if(startEqualState && endEqualState){
+                    if(minute >= parseInt(startMinute) && minute <= parseInt(endMinute)){
+                        resMinute = minute;
+                    }
+                }
+                else if(startEqualState){
+                    if(minute >= parseInt(startMinute)){
+                        resMinute = minute;
+                    }
+                }else if(endEqualState){
+                    if(minute <= parseInt(endMinute)){
+                        resMinute = minute;
+                    }
+                }else{
+                    resMinute = minute;
+                }
+                return resMinute ? `${resMinute}${this.chinese[4]}` : undefined;
+                
+            })
+            return minutes.filter(item => item);
+        },
+
         getHours() {
             let endHour = this.endHour;
             if (this.isUse12Hours) {
@@ -251,7 +358,7 @@ export default {
             }
             value = this.removeChinese(value);
             switch (index) {
-                case 1:
+                case 1://year
                     this.updateYear = value;
                     this.listData.splice(index, 1, this.getMonths(value));
                     chooseValue = chooseValue ? chooseValue : cacheValueData[index];
@@ -262,7 +369,8 @@ export default {
                     self && self.updateChooseValue(self, index, chooseValue);
                     this.updateLinkage(self, 2, cacheValueData[index], null, cacheValueData)
                     break;
-                case 2:
+                case 2://month
+                    this.updateMonth = value;
                     this.listData.splice(index, 1, this.getDays(parseInt(this.updateYear), value));
                     chooseValue = chooseValue ? chooseValue : cacheValueData[index];
                     let curDaysData = this.listData[index];
@@ -277,16 +385,41 @@ export default {
                     }
                     
                     self && self.updateChooseValue(self, index, chooseValue);
+                    this.updateLinkage(self, 3, cacheValueData[index], null, cacheValueData)
                     break;
+                case 3://day
+                    this.updateDay = value;
+                    this.listData.splice(index, 1, this.getChangeHours(parseInt(this.updateYear),parseInt(this.updateMonth),value));
+                    chooseValue = chooseValue ? chooseValue : cacheValueData[index];
+                    let curHoursData = this.listData[index];
+                    if (curHoursData.indexOf(chooseValue) === -1) {
+                        chooseValue = curHoursData[0];
+                    }
+                    self && self.updateChooseValue(self, index, chooseValue);
+                    this.updateLinkage(self, 4, cacheValueData[index], null, cacheValueData)
+                    break;
+                case 4://hour
+                    this.updateHour = value;
+                    this.listData.splice(index, 1, this.getChangeMinutes(parseInt(this.updateYear),parseInt(this.updateMonth),parseInt(this.updateDay),parseInt(this.updateHour),value));
+                    chooseValue = chooseValue ? chooseValue : cacheValueData[index];
+                    let curMinuteData = this.listData[index];
+                    if (curMinuteData.indexOf(chooseValue) === -1) {
+                        chooseValue = curMinuteData[0];
+                    }
+                    self && self.updateChooseValue(self, index, chooseValue);
             }
         },
 
         updateChooseValue(self, index, value, cacheValueData) {
             switch (index) {
-                case 0:
-                case 1:
+                case 0://year
+                case 1://month
+                case 2://day
+                case 3://hour
                     this.updateLinkage(self, (index + 1), value, null, cacheValueData);
                     break;
+                case 4://min
+                    break;
             }
         },
 

+ 2 - 2
src/packages/datepicker/demo.vue

@@ -85,8 +85,8 @@
       :is-visible="isVisible2"
       title="请选择日期时间"
       type="datetime"
-      startDate="1991-11-10"
-      endDate="2019-10-05"
+      startDate="2000-11-10 12:08"
+      endDate="2030-10-05 10:04"
       defaultValue="2018-11-02 11:08"
       @close="switchPicker('isVisible2')"
       @choose="setChooseValue2"

+ 5 - 5
src/packages/datepicker/doc.md

@@ -31,15 +31,15 @@
 </nut-datepicker>
 ```
 
-日期时间选择(有默认值,限制开始结束时间)
+日期时间选择(有默认值,限制开始结束时间,限制到时分
 
 ```html
 <nut-datepicker 
     :is-visible="isVisible2"
     title="请选择日期时间" 
     type="datetime"
-    startDate="1991-11-10"
-    endDate="2019-10-05"
+    startDate="2000-11-10 12:08"
+    endDate="2030-10-05 10:04"
     defaultValue="2018-11-02 11:08"
     @close="switchPicker('isVisible2')"
     @choose="setChooseValue2"
@@ -152,8 +152,8 @@ export default {
 | isShowChinese | 每列是否展示中文 | Boolean | true
 | title | 设置标题 | String | null
 | defaultValue | 默认值 | String | null
-| startDate | 设置标题 | String | '2000-01-01'
-| endDate | 设置标题 | String | 今天
+| startDate | 开始日期 | String | '2000-01-01'
+| endDate | 结束日期 | String | 今天
 | startHour | 开始小时 | Number | 1
 | endHour | 结束小时 | Number | 23
 

+ 48 - 3
src/utils/date.js

@@ -91,8 +91,12 @@ let Utils = {
      * @return {Boolean}
      */
     compareDate: function (date1, date2) {
-        let startTime = new Date(date1.replace('-', '/').replace('-', '/'));
-        let endTime = new Date(date2.replace('-', '/').replace('-', '/'));
+		let startTime = new Date();
+		startTime.setFullYear(date1[0],date1[1],date1[2]);
+		startTime.setHours(date1[3],date1[4])
+		let endTime = new Date();
+		endTime.setFullYear(date2[0],date2[1],date2[2]);
+		endTime.setHours(date2[3],date2[4])
         if (startTime >= endTime) {
             return false;
         }
@@ -109,7 +113,48 @@ let Utils = {
             return true;
         }
         return false;
-	}
+	},
+	getDateArr(str){
+		return [
+			this.getYear(str),
+			this.getMonth(str),
+			this.getDate(str),
+			this.getHour(str),
+			this.getMinute(str)
+		]
+	},
+
+	isDateString(str) {
+		return /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/.test(str) || /^([01][0-9]|2[0-3])(:[0-5][0-9]){1,2}$/.test(str);
+	},
+
+	getYear(value) {
+		return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[0] : value.getFullYear();
+	},
+
+	getMonth(value) {
+		return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[1] : value.getMonth() + 1;
+	},
+
+	getDate(value) {
+		return this.isDateString(value) ? value.split(' ')[0].split(/-|\/|\./)[2] : value.getDate();
+	},
+
+	getHour(value) {
+		if (this.isDateString(value)) {
+			const str = value.split(' ')[1] || '00:00:00';
+			return str.split(':')[0];
+		}
+		return value.getHours();
+	},
+
+	getMinute(value) {
+		if (this.isDateString(value)) {
+			const str = value.split(' ')[1] || '00:00:00';
+			return str.split(':')[1];
+		}
+		return value.getMinutes();
+	},
 };
 
 export default Utils;