【精选】js获取当前月有几周（附带一个小组件） |
您所在的位置：网站首页 › 有多少个星期 › 【精选】js获取当前月有几周（附带一个小组件） |
【精选】js获取当前月有几周（附带一个小组件）
|
要求 ①出一个日历组件 ②只显示当前月份 ③点击日期和右边列表联动， ④当前天有预警时，日历出现小红点
按照我的思路来看必须要求当前月有几周啊，代码如下 //获取当前月有几周 百度的别人的代码 但是它从第一个周一开始算该月第一周，所以下面有处理 getWeeks(year, month) { var d = new Date(); // 该月第一天 d.setFullYear(year, month-1, 1); var w1 = d.getDay(); if (w1 == 0){ w1 = 7; } // 该月天数 d.setFullYear(year, month, 0); var dd = d.getDate(); // 第一个周一 let d1; if (w1 != 1){//第一天不是星期一 d1 = 7 - w1 + 2; }else{ d1 = 1; } let week_count = Math.ceil((dd-d1+1)/7); if(w1 == 1){//我的处理 return week_count; }else{ return week_count+1; } },完整组件如下 {{currentDate}} 今天 周一 周二 周三 周四 周五 周六 周日 {{$moment(td.time).date()}} {$moment(td.time).date()}} --> export default { data() { return { selectDate:'', currentDate: "", weekArray: [], weekTotal:6 }; }, methods: { //获取当前日期 getCurrentDate() { this.currentDate = this.$moment().format("YYYY年MM月"); //获取当前月 }, //获取当前月的第一天是星期几 getFirstDay() { var firstDate = new Date(); firstDate.setDate(1); //第一天 var firstDay = firstDate.getDay(); //获取当前月的第一天是星期几 2019年5月的第一天是星期三 return firstDay; }, //获取当前月有几周 getWeeks(year, month) { var d = new Date(); // 该月第一天 d.setFullYear(year, month-1, 1); var w1 = d.getDay(); if (w1 == 0){ w1 = 7; } // 该月天数 d.setFullYear(year, month, 0); var dd = d.getDate(); // 第一个周一 let d1; if (w1 != 1){//第一天不是星期一 d1 = 7 - w1 + 2; }else{ d1 = 1; } let week_count = Math.ceil((dd-d1+1)/7); if(w1 == 1){ return week_count; }else{ return week_count+1; } }, dealWidthDays(calendarData) { var dateArray = []; var nowDate = new Date() var week_count = this.getWeeks( nowDate.getFullYear(), nowDate.getMonth()+1, ); //获取当前月有几周 this.weekTotal = week_count; var firstDay = this.getFirstDay(); //本月一号是星期几 var firtWeek_count = 7 - firstDay + 1; //第一周有几天 for (let i = 0; i < week_count; i++) { if (i == 0) { //第一周 dateArray[i] = calendarData.slice(0, firtWeek_count); for (let j = 0; j < 7 - firtWeek_count; j++) { dateArray[i].unshift({ time: "", task: [] }); } } else if (i == week_count - 1) { //最后一周 dateArray[i] = calendarData.slice( firtWeek_count + (week_count - 2) * 7 ); var lastWeek_count = dateArray[i].length; for (let j = 0; j < 7 - lastWeek_count; j++) { dateArray[i].push({ time: "", task: [] }); } } else { //除了第一周以及最后一周 dateArray[i] = calendarData.slice( firtWeek_count + (i - 1) * 7, firtWeek_count + i * 7 ); } } //console.log(dateArray); this.weekArray = dateArray; }, choseDate(data){ this.selectDate = this.$moment(data.time).date(); this.$emit('changeTask',data) }, choseTodayTask(){ this.selectDate = this.$moment().date(); this.$emit("getTodayTask") } }, created() { this.selectDate = this.$moment().date(); this.getCurrentDate(); // this.dealWidthDays(); }, mounted() {} }; .calendar-box { width: 340px; .i_red { display: inline-block; width:10px; height:10px; background:rgba(252,12,89,1); border:2px solid #4c183c; border-radius: 50%; vertical-align: middle; margin-right: 2px; } .calendar-header { height: 30px; font-size: 12px; text-align: center; color: #4cbdfe; border-left: 1px solid rgba(46, 73, 112, 0.5); border-right: 1px solid rgba(46, 73, 112, 0.5); } .calendar-body { height: calc(100% - 30px); overflow: hidden; .calendar-moreTable tbody { display: block; height:calc(232px - 53px); overflow-y: auto; } .calendar-moreTable thead, .calendar-moreTable tbody tr { display: table; width: 100%; table-layout: fixed;/*重要 表格固定算法*/ } .calendar-table { height: 100%; tr { .calendar-td { height: 20px; line-height: 20px; padding: 0 6px; text-align: right; } .calendar-th{ height: 23px; line-height: 23px; padding: 0 6px; } .activeTd{ box-shadow: inset 0px 0px 20px rgba(255,255,255,.5); } .calendarEnable{ cursor: pointer; } } } // .calendar-week { // //周 // background: rgba(29, 40, 77, 0.5); // color: #4cbdfe; // height: 30px; // } // .calendar-days { // height: calc(100% - 64px); // .flex-cell { // height: 25px; // } // } // .flex-cell { // width: 14%; // text-align: center; // font-size: 12px; // border-right: 1px solid rgba(46, 73, 112, 0.5); // border-bottom: 1px solid rgba(46, 73, 112, 0.5); // } } } |
【本文地址】
今日新闻 |
推荐新闻 |