基于Vue2.0前端开发的date-picker

前端开发vue大神|前端开发vue|vue前端开发实战技巧

后期有空把time-picker一起加上
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”utf-8″>
    <title>vue前端开发快速入门:datepicker base vue</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .date-picker {
            display: inline-block;
            position: relative;
            vertical-align: top;
        }
        .date-ipt {
            position: relative;
            width: 200px;
            height: 30px;
            padding: 0 10px;
            line-height: 28px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
        }
        .date-item {
            position: absolute;
            top: 30px;
            left: 0;
            width: 300px;
            padding: 10px;
            background: #fff;
            box-shadow: 0 2px 5px 1px #aaa;
            z-index: 5;
        }
        .dp-hd,
        .dp-ft {
            font-weight: bold;
            text-align: center;
        }
        .date-row {
            position: relative;
            height: 40px;
            line-height: 40px;
        }
        .date-row .pre {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
        }
        .date-row .next {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 40px;
        }
        .date-row .pre:hover,
        .date-row .next:hover {
            background: #eee;
            cursor: pointer;
            border-radius: 5px;
        }
        .date-row .date {
            display: block;
            margin: 0 45px;
        }
        .date-row .date:hover {
            background: #eee;
            border-radius: 5px;
            cursor: pointer;
        }
        .day-row .cell,
        .dp-bd .cell {
            display: inline-block;
            width: 40px;
            height: 36px;
            border-radius: 5px;
            text-align: center;
            line-height: 36px;
            cursor: pointer;
        }
        .dp-bd .month {
            width: 70px;
            height: 60px;
            margin-bottom: 12px;
            line-height: 60px;
        }
        .dp-bd .cell:hover {
            background: #eee;
        }
        .dp-bd .other {
            opacity: .5;
            cursor: no-drop;
        }
        .dp-bd .other:hover {
            background: none;
        }
        .dp-bd .today,
        .dp-bd .today:hover {
            background: #daf4e3;
        }
        .dp-bd .current,
        .dp-bd .current:hover {
            background: #5b75df;
            color: #fff;
        }
        .go-today {
            display: block;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            cursor: pointer;
        }
        .go-today:hover {
            background: #eee;
        }
    </style>
</head>
<body>
    <div id=”app”>
        <date-picker date=”2016-01-01″></date-picker>
        <date-picker date=””></date-picker>
    </div>
    <!– <script src=”http://cdn.bootcss.com/moment.js/2.16.0/moment.min.js”></script> –>
    <script src=”http://cdn.bootcss.com/vue/2.0.6/vue.min.js”></script>
    <script>
        Vue.component(‘date-picker’, {
            template: ‘<div class=”date-picker”>’ +
                ‘<div @click=”show === true? show = false : show = true” class=”date-ipt”>{{newDate}}</div>’ +
                ‘<div class=”date-item” v-show=”show”>’ +
                ‘<div v-if=”step === \’day\'”>’ +
                ‘<div class=”dp-hd”>’ +
                ‘<div class=”date-row”>’ +
                ‘<a @click=”preMonth” class=”pre”>&lt;</a>’ +
                ‘<a @click=”setMonth” class=”date”>{{month+1}}月 {{year}}年</a>’ +
                ‘<a @click=”nextMonth” class=”next”>&gt;</a>’ +
                ‘</div>’ +
                ‘<div class=”day-row”>’ +
                ‘<span class=”cell” v-for=”cell in weekName”>{{cell}}</span>’ +
                ‘</div>’ +
                ‘</div>’ +
                ‘<div class=”dp-bd”>’ +
                ‘<span class=”cell other” v-for=”n in preShowLen”>{{preLen – preShowLen + n}}</span><a @click=”resetDay(n)” class=”cell” :class=”{\’today\’: isToday(n),\’current\’: curDay === n}” v-for=”n in curLen”>{{n}}</a><span class=”cell other” v-for=”n in nextShowLen”>{{n}}</span>’ +
                ‘</div>’ +
                ‘</div>’ +
                ‘<div v-if=”step === \’month\'”>’ +
                ‘<div class=”dp-hd”>’ +
                ‘<div class=”date-row”>’ +
                ‘<a @click=”setYear -= 1″ class=”pre”>&lt;</a>’ +
                ‘<a>{{setYear}}年</a>’ +
                ‘<a @click=”setYear += 1″ class=”next”>&gt;</a>’ +
                ‘</div>’ +
                ‘</div>’ +
                ‘<div class=”dp-bd”>’ +
                ‘<a @click=”resetMonth(index)” class=”cell month” :class=”{\’today\’: isTomonth(index), \’current\’: curMonth === index}” v-for=”(cell, index) in monthName”>{{cell}}</a>’ +
                ‘</div>’ +
                ‘</div>’ +
                ‘<div class=”dp-ft”>’ +
                ‘<a @click=”goToday” class=”go-today”>今天</a>’ +
                ‘</div>’ +
                ‘</div>’ +
                ‘</div>’,
            data: function () {
                return {
                    newDate: ”,
                    today: ”,
                    toYear: ”,
                    toMonth: ”,
                    step: ‘day’,
                    year: ”, //显示年份
                    month: ”, //显示月份0~11
                    curLen: ”, //当前月日期数
                    preLen: ”, //上个月最后一天
                    preShowLen: ”, //显示上个月的天数
                    nextShowLen: ”, //显示下个月的天数
                    curDay: ”, //选中的日期
                    weekName: [‘周日’, ‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’],
                    monthName: [‘一月’, ‘二月’, ‘三月’, ‘四月’, ‘五月’, ‘六月’, ‘七月’, ‘八月’, ‘九月’, ‘十月’, ‘十一月’, ‘十二月’],
                    setYear: ”,
                    curMonth: ”,
                    show: false
                }
            },
            props: [‘date’],
            methods: {
                reloadDay: function (year, month) {
                    this.year = year;
                    this.month = month;
                    this.curLen = this.getDayLen(year, month + 1);
                    if (month === 0) {
                        this.preLen = this.getDayLen(year, 12);
                    } else {
                        this.preLen = this.getDayLen(year, month);
                    }
                    firstDay = new Date(year, month, 1);
                    this.preShowLen = firstDay.getDay();
                    lastDay = new Date(year, month, this.curLen);
                    this.nextShowLen = 6 – lastDay.getDay();
                },
                setMonth: function () {
                    this.setYear = this.year;
                    this.curMonth = this.month;
                    this.step = ‘month’;
                },
                preMonth: function () {
                    if (this.month === 0) {
                        this.reloadDay(this.year – 1, 11);
                    } else {
                        this.reloadDay(this.year, this.month – 1);
                    }
                    this.curDay = ”;
                },
                nextMonth: function () {
                    if (this.month === 11) {
                        this.reloadDay(this.year + 1, 0);
                    } else {
                        this.reloadDay(this.year, this.month + 1);
                    }
                    this.curDay = ”;
                },
                resetDay: function (n) {
                    this.curDay = n;
                    var m = this.month + 1;
                    if (m < 10) {
                        m = ‘0’ + m;
                    }
                    if (n < 10) {
                        n = ‘0’ + n;
                    }
                    this.newDate = this.year + ‘-‘ + m + ‘-‘ + n;
                    this.show = false;
                },
                isToday: function (n) {
                    if (this.year === this.toYear && this.month === this.toMonth && n === this.today.getDate()) {
                        return true;
                    } else {
                        return false;
                    }
                },
                isTomonth: function (index) {
                    if (this.setYear === this.toYear && index === this.toMonth) {
                        return true;
                    } else {
                        return false;
                    }
                },
                goToday: function () {
                    if (this.year !== this.toYear || this.month !== this.toMonth) {
                        this.reloadDay(this.toYear, this.toMonth);
                    }
                    var m = this.toMonth + 1;
                    if (m < 10) {
                        m = ‘0’ + m;
                    }
                    var n = this.today.getDate();
                    this.curDay = n;
                    if (n < 10) {
                        n = ‘0’ + n;
                    }
                    this.date = this.toYear + ‘-‘ + m + ‘-‘ + n;
                    this.show = false;
                },
                resetMonth: function (index) {
                    this.reloadDay(this.setYear, index);
                    this.step = ‘day’;
                },
                getDayLen: function (year, month) {
                    var theDay = new Date(year, month, 0);
                    return theDay.getDate();
                }
            },
            mounted: function () {
                this.today = new Date();
                this.toYear = this.today.getFullYear();
                this.toMonth = this.today.getMonth();
                if (this.date) {
                    this.reloadDay(parseInt(this.date.split(‘-‘)[0]), parseInt(this.date.split(‘-‘)[1]) – 1);
                    this.curDay = parseInt(this.date.split(‘-‘)[2]);
                    this.newDate = this.date;
                } else {
                    this.reloadDay(this.toYear, this.toMonth);
                    this.newDate = this.toYear + ‘-‘ + this.toMonth + ‘-‘ + this.today.getDate()
                }
            }
        })
        var vm = new Vue({
            el: ‘#app’
        })
    </script>
</body>
</html>
豆瓣 vue前端开发|vue 开发从前端到后端|vue前端开发的数据来自于
» 本文来自:前端开发者 » 《基于Vue2.0前端开发的date-picker》
» 本文链接地址:https://www.rokub.com/3901.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!