根据日历查询天数及获取星期

##头部引用

<script type="text/javascript" src='js2/vue.js'></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

html部分

<el-date-picker type="date" placeholder="选择日期" v-model="startDate" style="width: 100%;"></el-date-picker>
<el-date-picker type="date" placeholder="选择日期" v-model="endDate" style="width: 100%;"></el-date-picker>

<a class="easyui-linkbutton btn-query l-btn l-btn-small" data-options="width:90" style="margin-left: 50px; width: 88px; height: 34px;" href="javascript:;" group="" id=""><span class="l-btn-left" style="margin-top: 8px;"><span class="l-btn-text" @click="zxc()">查询</span></span></a>

	<table width="100%" class="attdtable mt20">
		<thead>
			<tr class="days">
			<td width="5%" rowspan="2">教师姓名</td>
			<td width="3%" rowspan="2">出勤天数</td>
			<td width="3%" rowspan="2">休息天数</td>
			<td width="3%" rowspan="2">缺勤天数</td>
			<td width="3%" rowspan="2">请假天数</td>
			<td width="3%" rowspan="2">出勤率</td>
			
			</tr>
			<tr class="weeks">
			
			</tr>
		</thead>
	</table>
	
</div>
## js部分
<script type="text/javascript">
	window.onload = function(){
		new Vue({  //构建实例
			el:'#my',
			data:{  //数据
				num:2,//默认值
				startDate:'',
				endDate:''

			},
			mounted() {
				this.getAll();
                
			},
			methods: {   //方法
				getDate2: function (datestr){
					var temp = datestr.split("-");
					var date = new Date(temp[0],temp[1],temp[2]);
					return date;
				},
				formatDate: function (date) { 
					var y = date.getFullYear();  
					var m = date.getMonth() + 1;  
					m = m < 10 ? '0' + m : m;  
					var d = date.getDate();  
					d = d < 10 ? ('0' + d) : d;  
					return y + '-' + m + '-' + d;  
				},
                //获取日期 公共
                getDayAll:function(startTime,endTime){
                    Date.prototype.format=function (){
                        var s='';
                        s+=this.getFullYear()+'-';          // 获取年份。
                        s+=(this.getMonth()+1)+"-";         // 获取月份。
                        s+= this.getDate();                 // 获取日。
                        return(s);                          // 返回日期。
                    };
                    var ab = startTime.split("-");
                    var ae = endTime.split("-");
                    var db = new Date();
                    db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
                    var de = new Date();
                    de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
                    var unixDb=db.getTime();
                    var unixDe=de.getTime();
                    for(var k=unixDb;k<=unixDe;){
                        var date=(new Date(parseInt(k))).format().toString()
                        //console.log(date)
                        //alert(de[2])
                        k=k+24*60*60*1000;
                        var arys2= new Array();
						arys2 = date.split('-');  
                        //获取日
                        var ssdate2 = new Date(arys2[0], parseInt(arys2[1] - 1), arys2[2]);
                        var  day2=String(ssdate2.getDate())
                        //console.log(day2)
                        var td='<td class="tddays">'+ day2+ '</td>';
					    $(".days").append(td);
                        //计算周几
						var arys1 = new Array();
						arys1 = date.split('-');     //日期为输入日期,格式为 2013-3-10
						var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
						var  week1=String(ssdate.getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")//就是你要的星期几
						//var week="星期"+week1; 
						//console.log(week1)
                        console.log(ssdate.getDay())
                        if(ssdate.getDay()=='6' || ssdate.getDay()=='0'){
                            var wtd='<td class="tddays weekEnd">'+ week1+ '</td>';
						    $(".weeks").append(wtd);
                        }else{
                            var wtd='<td class="tddays">'+ week1+ '</td>';
						    $(".weeks").append(wtd);
                        }
                    }
                    return date; 
                },
                getAll:function(){
                    var firstDate = new Date();
					firstDate.setDate(1); //第一天
					var endDate = new Date(firstDate);//最后一天
					endDate.setMonth(firstDate.getMonth()+1);
					endDate.setDate(0);
					var startTime = this.formatDate(firstDate)
					var endTime = this.formatDate(endDate)
					console.log(startTime)
					console.log(endTime)
                    this.getDayAll(startTime,endTime)
                },
				zxc:function(){
					$(".attdtable .tddays").remove();
					var start = this.startDate;
					var end = this.endDate;
					//判断日期区间
					var date1 = new Date();
					date1.setMonth(date1.getMonth() - 6);
					var year1 = date1.getFullYear();
					var month1 = date1.getMonth() + 1;
					var day = date1.getDate();
					month1 = (month1 < 10 ? "0" + month1 : month1);
					day = (day < 10 ? "0" + day : day);
					var i_sDate = (year1.toString() + '-' + month1.toString() + '-' + day.toString());
				
					//获取选择的时间段
					console.log(this.formatDate(start))
					console.log(this.formatDate(end))
					var startTime = this.formatDate(start)
					var endTime = this.formatDate(end)
					if (DateDiff(endTime, startTime) >= 31) {
						return this.$confirm('开始时间-结束时间总计不得超过31天','提示');
					} else if (startTime < i_sDate) {
						return this.$confirm('开始时间不能小于6个月前','提示');
					} else if (endTime < startTime) {
						return this.$confirm('结束日期不能小于开始日期','提示');
					} else {
					this.getDayAll(startTime,endTime)
					}
					function DateDiff(startTime, endTime) {    //start和end是2006-12-18格式
					var aDate, oDate1, oDate2, iDays
					aDate = startTime.split("-")
					oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])    //转换为12-18-2006格式
					aDate = endTime.split("-")
					oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
					iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24)    //把相差的毫秒数转换为天数
					return iDays
					}
				}
			}

		})
	}
</script>
vue中写法记录下
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值