element-ui 周、月、季、年的日期时间选择器

  1 <template>
  2   <div class="time_quarter">
  3     <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;" v-show="showSeason"
  4       @click.stop="showSeason = false"></mark>
  5     <el-input placeholder="请选择季度" v-model="showValue" style="width:100%;" class="elWidth" @focus="showSeason = true">
  6       <i slot="prefix" class="el-input__icon el-icon-date"></i>
  7     </el-input>
  8     <el-card class="box-card" v-show="showSeason" style="width:100%">
  9       <div slot="header" class="clearfix" style="text-align:center;padding:0">
 10         <button type="button" aria-label="前一年"
 11           class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" @click="prev"></button>
 12         <span role="button" class="el-date-picker__header-label">{{ year }}年</span>
 13         <button type="button" aria-label="后一年" @click="next" :class="{ notallow: year == limitTime }"
 14           class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"></button>
 15       </div>
 16       <div class="text item" style="text-align:center;">
 17         <el-button type="text" size="medium" style="width:40%;color: #606266;float:left;"
 18           @click="selectSeason(0)">第一季度</el-button>
 19         <el-button type="text" size="medium" style="float:right;width:40%;color: #606266;"
 20           @click="selectSeason(1)">第二季度</el-button>
 21       </div>
 22       <div class="text item" style="text-align:center;">
 23         <el-button type="text" size="medium" style="width:40%;color: #606266;float:left;"
 24           @click="selectSeason(2)">第三季度</el-button>
 25         <el-button type="text" size="medium" style="float:right;width:40%;color: #606266;"
 26           @click="selectSeason(3)">第四季度</el-button>
 27       </div>
 28     </el-card>
 29   </div>
 30 </template>
 31 <script>
 32 export default {
 33   props: {
 34     valueArr: {
 35       default: () => {
 36         return ['01-03', '04-06', '07-09', '10-12'];
 37       },
 38       type: Array,
 39     },
 40     getValue: {
 41       default: () => { },
 42       type: Function,
 43     },
 44     // 传入显示的时间
 45     defaultValue: {
 46       default: "",
 47       type: String,
 48     },
 49     // 限制的时间
 50     limitTime: {
 51       type: String,
 52       default: "",
 53       require: true,
 54     },
 55   },
 56   data() {
 57     return {
 58       showSeason: false,
 59       season: "",
 60       year: new Date().getFullYear(),
 61       showValue: ''
 62     };
 63   },
 64   computed: {},
 65   created() {
 66     if (this.defaultValue) {
 67       let value = this.defaultValue;
 68       let arr = value.split("-");
 69       this.year = arr[0].slice(0, 4);
 70  
 71       var myseason = arr[1];
 72       this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
 73     }
 74     console.log("whitchQuarter", this.whitchQuarter(10));
 75   },
 76   watch: {
 77     defaultValue: function (value, oldValue) {
 78       let arr = value.split("-");
 79       this.year = arr[0].slice(0, 4);
 80       var myseason = arr[1];
 81       this.showValue = `${this.year}年${this.whitchQuarter(myseason)}季度`;
 82     },
 83   },
 84   methods: {
 85     // 根据输入的月份判断是哪一个季节
 86     whitchQuarter(month) {
 87       let quarter = "";
 88       month = Number(month);
 89       switch (month) {
 90         case 1:
 91         case 2:
 92         case 3:
 93           quarter = "1";
 94           break;
 95         case 4:
 96         case 5:
 97         case 6:
 98           quarter = "2";
 99           break;
100         case 7:
101         case 8:
102         case 9:
103           quarter = "3";
104           break;
105         case 10:
106         case 11:
107         case 12:
108           quarter = "4";
109           break;
110         default:
111           console.error("The entered time is incorrect");
112       }
113       return quarter;
114     },
115     one() {
116       this.showSeason = false;
117     },
118     prev() {
119       this.year = this.year * 1 - 1;
120     },
121     next() {
122       // 如果有时间限制的话会进行判断
123       if (this.limitTime == "") {
124         this.year = this.year * 1 + 1;
125       } else if (this.limitTime != "" && this.year < this.limitTime) {
126         this.year = this.year * 1 + 1;
127       }
128     },
129     // 季度时间判定
130     InitialTime(val) {
131       let num = "";
132       val = Number(val);
133       switch (val) {
134         case 1:
135           num = "01";
136           break;
137         case 2:
138           num = "04";
139           break;
140         case 3:
141           num = "07";
142           break;
143         case 4:
144           num = "10";
145           break;
146         default:
147           console.error("时间格式有误！");
148       }
149       return num;
150     },
151  
152     selectSeason(i) {
153       let that = this;
154       that.season = i + 1;
155       let arr = that.valueArr[i].split("-");
156       that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);
157       that.showSeason = false;
158       this.showValue = `${this.year}年${this.season}季度`;
159       var formatValue = `${this.year}-${this.InitialTime(this.season)}`;
160       this.$emit("getTime", formatValue);
161     }
162   },
163 };
164 </script>
165 <style>
166 .notallow {
167   cursor: not-allowed;
168 }
169 .time_box {
170   position: relative;
171 }
172 .box-card {
173   position: absolute;
174   top: 40px;
175   /* left: 22px; */
176   padding: 0 3px 20px;
177   z-index: 9999;
178 }
179 .time_quarter {
180   width: 100%;
181  
182 }
183 .time_quarter .el-input--small .el-input__inner {
184   width: 82%;
185 }</style>

  1 //获取周的开始时间和结束时间
  2         getMonday(type, dates) {
  3             var now = new Date();
  4             var nowTime = now.getTime();
  5             var day = now.getDay();
  6             var longTime = 24 * 60 * 60 * 1000;
  7             var n = longTime * 7 * (dates || 0);
  8             if (type == "s") {
  9                 var dd = nowTime - (day - 1) * longTime + n;
 10             };
 11             if (type == "e") {
 12                 var dd = nowTime + (7 - day) * longTime + n;
 13             };
 14             dd = new Date(dd);
 15             var y = dd.getFullYear();
 16             var m = dd.getMonth() + 1;
 17             var d = dd.getDate();
 18             m = m < 10 ? "0" + m : m;
 19             d = d < 10 ? "0" + d : d;
 20             var day = y + "-" + m + "-" + d;
 21             return day;
 22         },
 23         //周
 24         changeTime(data) {
 25             let date = new Date(data);
 26             let y = date.getFullYear();
 27             let m = date.getMonth();
 28             let d = date.getDate();
 29             let week = date.getDay();
 30             let start = new Date(y, m, d - week + 1);
 31             let end = new Date(y, m, d - week + 7);
 32             this.queryParams.startTime = this.getCurrentTime(start, 0) + " 00:00:00";
 33             this.queryParams.endTime = this.getCurrentTime(end, 0) + " 23:59:59";
 34         },
 35         //月
 36         changeTimeM(data) {
 37             this.queryParams.startTime = this.getCurrentTime(data, 0) + " 00:00:00";
 38             this.queryParams.endTime = this.getCurrentTime(this.getCuurrentTimeM(data), 0) + " 23:59:59";
 39             console.log(this.queryParams)
 40         },
 41         //年
 42         changeTimeY(data) {
 43             this.queryParams.startTime = this.getCurrentTime(data, 0) + " 00:00:00";
 44             this.queryParams.endTime = this.getCurrentTime(this.getCuurrentTimeY(data), 0) + " 23:59:59";
 45             console.log(this.queryParams)
 46         },
 47         getCurrentTime(data, num) {
 48             let date = new Date(data)
 49             let Y = date.getFullYear()
 50             let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
 51             let D = date.getDate() + num < 10 ? ('0' + (date.getDate() + num)) : (date.getDate() + num);
 52             date = Y + '-' + M + '-' + D;
 53             return date
 54         },
 55         getCuurrentTimeM(data) {
 56             let date = new Date(data)
 57             let Y = date.getFullYear();
 58             let M = date.getMonth();
 59             return new Date(Y, M + 1, 0).toLocaleDateString();
 60         },
 61         getCuurrentTimeY(data) {
 62             let date = new Date(data)
 63             let Y = date.getFullYear();
 64             return new Date(Y, 11, 31).toLocaleDateString();
 65         },
 66         //获得某月的天数
 67         getMonthDays: function (nowYear, myMonth) {
 68             var monthStartDate = new Date(nowYear, myMonth, 1);
 69             var monthEndDate = new Date(nowYear, myMonth + 1, 1);
 70             var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
 71             return days;
 72         },
 73         //获得本季度的结束日期
 74         getQuarterEndDate(data) {
 75             let date = new Date(data);
 76             let nowYear = date.getFullYear();
 77             let M = date.getMonth();
 78             var quarterEndMonth = M + 2;
 79             var quarterStartDate = new Date(nowYear, quarterEndMonth, this.getMonthDays(nowYear, quarterEndMonth));
 80             return this.getAllDate(quarterStartDate, "yyyy-MM-dd");
 81         },
 82         //获得本季度的开始月份
 83         getQuarterStartMonth: function (nowMonth) {
 84             var quarterStartMonth = 0;
 85             if (nowMonth < 3) {
 86                 quarterStartMonth = 0;
 87             }
 88             if (2 < nowMonth && nowMonth < 6) {
 89                 quarterStartMonth = 3;
 90             }
 91             if (5 < nowMonth && nowMonth < 9) {
 92                 quarterStartMonth = 6;
 93             }
 94             if (nowMonth > 8) {
 95                 quarterStartMonth = 9;
 96             }
 97             return quarterStartMonth;
 98         },
 99         //获得日期
100         getAllDate: function (date, fmt) {
101             if (null == fmt || undefined == fmt || "" == fmt)
102                 fmt = "yyyy/MM/dd";
103             var date = new Date(date);
104             var o = {
105                 "M+": date.getMonth() + 1, //月份
106                 "d+": date.getDate(), //日
107             };
108             if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
109             for (var k in o)
110                 if (new RegExp("(" + k + ")").test(fmt))
111                     fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
112             return fmt;
113         },
114         getmgTime(data) {
115             let start = data + "-01";
116             this.queryParams.startTime = start + " 00:00:00";
117             let end = this.getQuarterEndDate(start);
118             this.queryParams.endTime = end + " 23:59:59";
119         },
120         watch: {
121             //监听内容
122             timeType() {
123                 if (this.timeType == 1) {//周
124                     this.value2 = new Date(new Date().valueOf());
125                     this.queryParams.startTime = this.getMonday("s", 0) + " 00:00:00";
126                     this.queryParams.endTime = this.getMonday("e", 0) + " 23:59:59";
127                 } else if (this.timeType == 2) {//月
128                     this.value2 = new Date().getFullYear() + '-' + (new Date().getMonth() + 1);
129                     this.changeTimeM(this.value2);
130                 } else if (this.timeType == 3) {//季度
131                     let date = new Date();
132                     let y = date.getFullYear();
133                     let M = date.getMonth();
134                     let quarterStartDate = new Date(y, this.getQuarterStartMonth(M), 1);
135                     let starts = this.getAllDate(quarterStartDate, "yyyy-MM-dd");
136                     let end = this.getQuarterEndDate(starts);
137                     this.queryParams.startTime = starts + " 00:00:00";
138                     this.queryParams.endTime = end + " 23:59:59";
139                 } else if (this.timeType == 4) {//年
140                     let date = new Date();
141                     let y = date.getFullYear();
142                     this.value2 = y.toString();
143                     this.changeTimeY(this.value2);
144                 }
145             }
146         },