vue实现自定义日期组件功能的实例代码实现自定义日期组件功能的实例代码
实现一个日期组件,如图:
components.js代码如下:
Vue.component('sc-calendar',{
template:'<div class="scCalendar">' +
'<div class="calendar_header">' +
'<div class="prev" @click="prevMonth"> < </div>' +
'<span class="text_year">{{currentYear}}年</span>' +
'<span class="text_month">{{currentMonth}}月</span>' +
'<div class="next" @click="nextMonth"> > </div>' +
'</div>' +
'<div class="calendar_content">' +
'<ul class="week">' +
'<li v-for="item in weeks">{{item}}</li>' +
'</ul>' +
'<ul class="day">' +
'<li v-for="item in dayList" :class="{marginRight0:item.marginRight0}">{{item.text}}</li>' +
'</ul>' +
'</div>' +
'</div>',
data:function(){
return {
weeks: ['日', '一', '二', '三', '四', '五', '六'],
dayList:[],
currentYear:'',
currentMonth: ''
}
},
created:function(){
var date=new Date;
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth()+1;
this.calDay(this.currentYear, this.currentMonth);
},
methods:{
//计算指定月份的天数
calDay:function(year,month){
var oDate = new Date();
//setFullYear(year,month,day) 方法用于设置年份,返回调整过的日期的毫秒表示。
oDate.setFullYear(year, month-1,1);
oDate.setDate(1);//设置一个月中的第一天
var oNow = oDate.getDay();//当前月的第一天是星期几
var dayNum = 0; //指定月份的天数
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
dayNum = 31;
}else if(month==4 || month==6 || month==9 || month==11){
dayNum = 30;
}else if(month==2&&this.isLeaYear(year)){
dayNum = 29;