##头部引用
<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中写法记录下