vuejs日历 

<!doctype html>
<html>
<head>
    <title>vuejs日历</title>
    <meta charset="utf-8"/>
</head>
<body>
<style>
    html {
        color: #666;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        font-size: 100%;
        font-family: "Microsoft YaHei", "SimHei";
    }

    * {
        margin: 0;
        padding: 0;
    }

    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .wrap {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }

    .jcenter {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .acenter {
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
    }

    .tcenter {
        text-align: center;
    }

    .h100 {
        height: 100% !important;
    }

    .datetimes .thead {
        line-height: 36px;
        height: 36px;
        border-bottom: 1px solid #eee;
    }

    .datetimes .thead button {
        border: 0;
        background: transparent;
        padding: 0 1em;
    }

    .datetimes .thead .currdate {
        padding: 0 1em;
    }

    .datetimes .columns7 {
        margin: 0 1em;
        line-height: 30px;
    }

    .datetimes .columns7 .colum {
        position: relative;
        font-size: 12px;
        box-sizing: border-box;
        text-align: center;
        margin: 5px 3px;
        width: -webkit-calc(14.28% - 6px);
        width: calc(14.28% - 6px);
        border-radius: 3px;
    }

    .datetimes .columns7 .day {
        color: #333;
        border: 1px solid #efefef;
    }

    .datetimes .columns7 .day.selected {
        color: blue;
        border-color: #3997D6;
    }

    .datetimes .header {
        color: #3997D6;
    }
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="vue_tab_attend" class="h100 scroll">
    <dl class="datetimes">
        <dt class="thead flex acenter jcenter">
            <button @click="setYear(-1)">上年</button>
            <button @click="setMonth(-1)">上月</button>
            <span class="currdate">{{year}}-{{month}}</span>
            <button @click="setMonth(1)">下月</button>
            <button @click="setYear(1)">下年</button>
        </dt>
        <dd class="flex header columns7">
            <span class="colum" v-for="i in 7" :key="i">{{weeks[i - 1][1]}}</span>
        </dd>
        <dd class="flex tbody wrap columns7">
            <span class="colum" v-for="(d, idx) in days" :key="idx" @click="day = d.d || day"
                  :class="{'day': d.d, 'selected': d.d == day}">{{ d.d }}</span>
        </dd>
    </dl>
</div>
<script>
    (function () {
        var today = new Date();
        new Vue({
            el: '#vue_tab_attend',
            data: {
                options: {},
                year: today.getFullYear(),
                month: today.getMonth() + 1,
                day: today.getDate(),
                days: [],
                weeks: [
                    [0, '日'],
                    [1, '一'],
                    [2, '二'],
                    [3, '三'],
                    [4, '四'],
                    [5, '五'],
                    [6, '六']
                ]
            },
            watch: {
                month: function (v, o) {
                    this.creatMonth()
                },
                year: function () {
                    this.creatMonth()
                }
            },
            created: function () {
                this.creatMonth();
            },
            methods: {
                setMonth: function (step) {
                    var val = this.month + step;
                    if (val < 1) {
                        this.month = 12;
                        this.year -= 1;
                    } else if (val > 12) {
                        this.month = 1;
                        this.year += 1;
                    } else {
                        this.month = val;
                    }
                },
                setYear: function (step) {
                    this.year += step;
                },
                creatMonth: function () {
                    var self = this;
                    var first = new Date(this.year, this.month - 1, 1);
                    var last = new Date(this.year, this.month, 0);
                    var bweek = first.getDay();
                    var fweek = this.weeks[0][0];
                    var before = fweek ? (bweek || 7) - 1 : bweek;
                    var total = before + last.getDate();
                    var after = 7 - (total % 7 || 7);
                    var days = Array(total + after).join(',').split(',');
                    this.days = days.map(function (item, idx) {
                        return (idx >= before && idx < total) ? {
                            y: self.year,
                            m: self.month,
                            d: idx - before + 1,
                            on: false
                        } : {};
                    });
                }
            }
        })
    })();
</script>
</body>
</html>

 

posted @ 2017-10-14 16:32  一夜梦想  阅读(394)  评论(0)  编辑  收藏  举报