asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
@import url(http://www.cnitblog.com/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);

使用 Vue.js 创建的 Calendar

http://www.tuicool.com/articles/vmaiei2

使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding 。 

实现一个 HTML的 日历效果。

html 部分 

<div id="calendar">
    
<!-- 年份 月份 -->
    
<div class="month">
        
<ul>
            
<li class="arrow" @click="pickPre(currentYear,currentMonth)"></li>
            
<li class="year-month" @click="pickYear(currentYear,currentMonth)">
                
<span class="choose-year">{{ currentYear }}</span>
                
<span class="choose-month">{{ currentMonth }}月</span>
            
</li>
            
<li class="arrow" @click="pickNext(currentYear,currentMonth)"></li>
        
</ul>
    
</div>
    
<!-- 星期 -->
    
<ul class="weekdays">
        
<li></li>
        
<li></li>
        
<li></li>
        
<li></li>
        
<li></li>
        
<li style="color:red"></li>
        
<li style="color:red"></li>
    
</ul>
    
<!-- 日期 -->
    
<ul class="days">
        
<li @click="pick(day)" v-for="day in days">
            
<!--本月-->
          
<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
          
<span v-else>
                
<!--今天-->
                
<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
            
<span v-else>{{ day.getDate() }}</span>
          
</span>
        
</li>
    
</ul>
</div>

id 为 calendar 对应的创建一个 Vue 对象,设置 el 为 ‘#calendar’ 。 

<script type="text/javascript">
    
new Vue({
        el: '#calendar',
        data: {
            currentDay: 
1,
            currentMonth: 
1,
            currentYear: 
1970,
            currentWeek: 
1,
            days: [],
        },
        created: 
function() {
            
this.initData(null);
        },
        methods: {
            initData: 
function(cur) {
                
var date;
                
if (cur) {
                    date 
= new Date(cur);
                } 
else {
                    date 
= new Date();
                }
                
this.currentDay = date.getDate();
                
this.currentYear = date.getFullYear();
                
this.currentMonth = date.getMonth() + 1;
                
this.currentWeek = date.getDay(); // 16,0
                if (this.currentWeek == 0) {
                    
this.currentWeek = 7;
                }
                
var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
                console.log(
"today:" + str + "," + this.currentWeek);
                
this.days.length = 0;
                
// 今天是周日,放在第一行第7个位置,前面6个
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    
var d = new Date(str);
                    d.setDate(d.getDate() 
- i);
                    console.log(
"y:" + d.getDate());
                    
this.days.push(d);
                }
                
for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    
var d = new Date(str);
                    d.setDate(d.getDate() 
+ i);
                    
this.days.push(d);
                }
            },
            pick: 
function(date) {
                alert(
this.formatDate( date.getFullYear() , date.getMonth() + 1, date.getDate()));
            },
            pickPre: 
function(year, month) {
                
//  setDate(0); 上月最后一天
                //  setDate(-1); 上月倒数第二天
                //  setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(
0);
                
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickNext: 
function(year, month) {
                
var d = new Date(this.formatDate(year , month , 1));
                d.setDate(
35);
                
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickYear: 
function(year, month) {
                alert(year 
+ "," + month);
            },
            
            
// 返回 类似 2016-01-02 格式的字符串
            formatDate: function(year,month,day){
                
var y  = year;
                
var m = month;
                
if(m<10) m = "0" + m;
                
var d = day;
                
if(d<10) d = "0" + d;
                
return y+"-"+m+"-"+d
            },
        },
    });
</script>

完整代码:

<!DOCTYPE html>
<html lang="en">
    
<head>
        
<meta charset="UTF-8">
        
<title>日历</title>
        
<style type="text/css">
            * 
{
                box-sizing
: border-box;
            
}
            
            ul 
{
                list-style-type
: none;
            
}
            
            body 
{
                font-family
: Verdana, sans-serif;
                background
: #E8F0F3;
            
}
            #calendar
{
                width
:80%;
                margin
: 0 auto;
                box-shadow
: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
            
}
            .month 
{
                width
: 100%;
                background
: #00B8EC;
            
}
            
            .month ul 
{
                margin
: 0;
                padding
: 0;
                display
: flex;
                justify-content
: space-between;
            
}
            
            .year-month 
{
                display
: flex;
                flex-direction
: column;
                align-items
: center;
                justify-content
: space-around;
            
}
            
            .year-month:hover 
{
                background
: rgba(150, 2, 12, 0.1);
            
}
            
            .choose-year 
{
                padding-left
: 20px;
                padding-right
: 20px;
            
}
            
            .choose-month 
{
                text-align
: center;
                font-size
: 1.5rem;
            
}
            
            .arrow 
{
                padding
: 30px;
            
}
            
            .arrow:hover 
{
                background
: rgba(100, 2, 12, 0.1);
            
}
            
            .month ul li 
{
                color
: white;
                font-size
: 20px;
                text-transform
: uppercase;
                letter-spacing
: 3px;
            
}
            
            .weekdays 
{
                margin
: 0;
                padding
: 10px 0;
                background-color
: #00B8EC;
                display
: flex;
                flex-wrap
: wrap;
                color
: #FFFFFF;
                justify-content
: space-around;
            
}
            
            .weekdays li 
{
                display
: inline-block;
                width
: 13.6%;
                text-align
: center;
            
}
            
            .days 
{
                padding
: 0;
                background
: #FFFFFF;
                margin
: 0;
                display
: flex;
                flex-wrap
: wrap;
                justify-content
: space-around;
            
}
            
            .days li 
{
                list-style-type
: none;
                display
: inline-block;
                width
: 14.2%;
                text-align
: center;
                padding-bottom
: 15px;
                padding-top
: 15px;
                font-size
: 1rem;
                color
: #000;
            
}
            
            .days li .active 
{
                padding
: 6px 10px;
                border-radius
: 50%;
                background
: #00B8EC;
                color
: #fff;
            
}
            
            .days li .other-month 
{
                padding
: 5px;
                color
: gainsboro;
            
}
            
            .days li:hover 
{
                background
: #e1e1e1;
            
}
        
</style>
    
</head>
    
<body>
        
<h1>CSS 日历</h1>
        
<div id="calendar">
            
<div class="month">
                
<ul>
                    
<li class="arrow" @click="pickPre(currentYear,currentMonth)"></li>
                    
<li class="year-month" @click="pickYear(currentYear,currentMonth)">
                        
<span class="choose-year">{{ currentYear }}</span>
                        
<span class="choose-month">{{ currentMonth }}月</span>
                    
</li>
                    
<li class="arrow" @click="pickNext(currentYear,currentMonth)"></li>
                
</ul>
            
</div>
            
<ul class="weekdays">
                
<li></li>
                
<li></li>
                
<li></li>
                
<li></li>
                
<li></li>
                
<li style="color:red"></li>
                
<li style="color:red"></li>
            
</ul>
            
<ul class="days">
                
<li @click="pick(day)" v-for="day in days">
                    
<!--今天-->
                    
<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
                    
<span v-else>
                        
<!--今天-->
                        
<span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span>
                    
<span v-else>{{ day.getDate() }}</span>
                    
</span>
                
</li>
            
</ul>
        
</div>
        
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js" type="text/javascript" charset="utf-8"></script>
        
<script type="text/javascript">
            
new Vue({
                el: '#calendar',
                data: {
                    currentDay: 
1,
                    currentMonth: 
1,
                    currentYear: 
1970,
                    currentWeek: 
1,
                    days: [],
                },
                created: 
function() {
                    
this.initData(null);
                },
                methods: {
                    initData: 
function(cur) {
                        
var date;
                        
if (cur) {
                            date 
= new Date(cur);
                        } 
else {
                            date 
= new Date();
                        }
                        
this.currentDay = date.getDate();
                        
this.currentYear = date.getFullYear();
                        
this.currentMonth = date.getMonth() + 1;
                        
this.currentWeek = date.getDay(); // 16,0
                        if (this.currentWeek == 0) {
                            
this.currentWeek = 7;
                        }
                        
var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
                        console.log(
"today:" + str + "," + this.currentWeek);
                        
this.days.length = 0;
                        
// 今天是周日,放在第一行第7个位置,前面6个
                        for (var i = this.currentWeek - 1; i >= 0; i--) {
                            
var d = new Date(str);
                            d.setDate(d.getDate() 
- i);
                            console.log(
"y:" + d.getDate());
                            
this.days.push(d);
                        }
                        
for (var i = 1; i <= 35 - this.currentWeek; i++) {
                            
var d = new Date(str);
                            d.setDate(d.getDate() 
+ i);
                            
this.days.push(d);
                        }
                    },
                    pick: 
function(date) {
                        alert(
this.formatDate( date.getFullYear() , date.getMonth() + 1, date.getDate()));
                    },
                    pickPre: 
function(year, month) {
                        
//  setDate(0); 上月最后一天
                        //  setDate(-1); 上月倒数第二天
                        //  setDate(dx) 参数dx为 上月最后一天的前后dx天
                        var d = new Date(this.formatDate(year , month , 1));
                        d.setDate(
0);
                        
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                    },
                    pickNext: 
function(year, month) {
                        
var d = new Date(this.formatDate(year , month , 1));
                        d.setDate(
35);
                        
this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                    },
                    pickYear: 
function(year, month) {
                        alert(year 
+ "," + month);
                    },
                    
                    
// 返回 类似 2016-01-02 格式的字符串
                    formatDate: function(year,month,day){
                        
var y  = year;
                        
var m = month;
                        
if(m<10) m = "0" + m;
                        
var d = day;
                        
if(d<10) d = "0" + d;
                        
return y+"-"+m+"-"+d
                    },
                },
            });
        
</script>
    
</body>
</html>

文章来自:http://hanks.xyz

posted on 2016-10-12 17:36 汪杰 阅读(22) 评论(0)  编辑 收藏 引用 所属分类: divandcss
只有注册用户登录后才能发表评论。

<2016年10月>
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

最新随笔

搜索

  •  

积分与排名

  • 积分 - 339726
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜