现在网络上有很多第三方插件，使用起来也很方便，但插件功能一般都比较丰富，造成我们只需要某个小功能而引入了一个较大的文件，这增大了项目体积和增加用户流量的使用，我个人不太喜欢用插件，更推崇自己实现。该例介绍了一个日历控件的实现。

日历控件

实现思路： 根据需求，我们需要一个实现年月的头，一栏显示周一到周日的地方，和日期的列表，列表我们可以用二维数组实现，第一维控制0~6，第二维则根据月份来设定，同时还要注意本月一号的起始位置。ok，贴上代码：

html代码

  <div class="content">
        <div class="date-picker">
            <div class="month" riot-style="{monthColor}">
                <img style="float:left; padding-left: 2rem;" src="img/icon/nav_back.png" onclick={clickPreMonth}>
                <img style="float:right; padding-right: 2rem" src="img/icon/exchange_white_right_icon.gif"
                     onclick={clickNextMonth}>
                <p>{month_title}</p>
            </div>
            <div class="week" riot-style="{workDayColor}">
                <div class="week-item"><p riot-style="{weekendsDayColor}">日</p></div>
                <div class="week-item"><p>一</p></div>
                <div class="week-item"><p>二</p></div>
                <div class="week-item"><p>三</p></div>
                <div class="week-item"><p>四</p></div>
                <div class="week-item"><p>五</p></div>
                <div class="week-item"><p riot-style="{weekendsDayColor}">六</p></div>
            </div>
            <div class="day">
                <div class="day-line" each="{week in weeks}">
                    <div class="day-item" onclick={clickDay} each="{day in week}">
                        <div if="{day.isSelected}" class="day-item-selected">
                            <p name="{day.day}" if="{day.day == '今天'}" style="color:white;">{day.day}</p>
                            <p name="{day.day}" if="{day.day != '今天'}">{day.day}</p>
                        </div>
                        <div if="{!day.isSelected}">
                            <p name="{day.day}" if="{day.isPassedDayInCurrentMonth}" style="color:#97999d;">
                                {day.day}</p>
                            <p name="{day.day}" if="{day.day == '今天' && !day.isPassedDayInCurrentMonth }"
                               style="color:#0a79ff;">{day.day}</p>
                            <p name="{day.day}" if="{day.day != '今天' && !day.isPassedDayInCurrentMonth}"
                               riot-style="{dayColor}">{day.day}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="confirm" onclick="{clickConfirm}">
            <div class="confirm-btn"><p>确定</p></div>
        </div>
    </div>

显示日期的二维数组代码

function showDate() {
    var cDate = date ? date : new Date();
    var cDayOnWeek = cDate.getDay()
    self.pageMonth = cDate.getMonth()
    self.pageYear = cDate.getFullYear()
    var tmp = new Date(self.pageYear, self.pageMonth + 1, 0)
    var daysOnMonth = tmp.getDate()
    tmp = new Date(self.pageYear, self.pageMonth, 1)
    var dayOnWeek = tmp.getDay()
    var dayLines = new Array()

    for (var i = 0; i <= 5; i++) {
        dayLines[i] = new Array()
    }
    for (var i = 1; i <= daysOnMonth; i++) {
        dayLineIndex = parseInt((i + dayOnWeek - 1) / 7)
        dayOnWeekIndex = (i + dayOnWeek - 1) % 7
        if ((self.currentDate.getDate() == i) && (self.pageMonth == self.currentDate.getMonth()) &&
            (self.pageYear == self.currentDate.getFullYear())) {
            dayLines[dayLineIndex][dayOnWeekIndex] = '今天'
        } else {
            dayLines[dayLineIndex][dayOnWeekIndex] = i
        }
    }

    self.month_title = self.pageYear + '年' + (self.pageMonth + 1) + '月'
    self.weeks = new Array()
    for (var i = 0; i <= 5; i++) {
        var dayLine = dayLines[i];
        if (dayLine.length > 0) {
            self.weeks[i] = new Array()
            for (var j = 0; j < 7; j++) {
                if (dayLine[j]) {
                    self.weeks[i][j] = {
                        'day': dayLine[j],
                        'isSelected': isPickedDay(self.pageYear, self.pageMonth, dayLine[j]),
                        'isPassedDayInCurrentMonth': isPassedDayInCurrentMonth(self.pageYear, self.pageMonth, dayLine[j])
                    }
                } else {
                    self.weeks[i][j] = {'day': '', 'isSelected': false, 'isPassedDayInCurrentMonth': false}
                }
            }
        }
    }
}

点击选中日期效果

self.clickDay = function (e) {
    if (!self.canSelectDays) {
        return
    }

    var attributes = e.target.attributes;
    if ((!attributes) || (attributes.length == 0) || (!attributes['name'])) {
        return
    }

    var day = attributes['name'].value

    if (isPassedDayInCurrentMonth(self.pageYear, self.pageMonth, day)) {
        return
    }

    for (var i = self.weeks.length - 1; i >= 0; i--) {
        for (var j = self.weeks[i].length - 1; j >= 0; j--) {
            if (self.weeks[i][j].day == day) {
                self.weeks[i][j].isSelected = true;
                self.pickedDay = {
                    'year': self.pageYear,
                    'month': self.pageMonth,
                    'date': self.weeks[i][j].day
                }
            } else {
                self.weeks[i][j].isSelected = false;
            }
        }
    }

    self.update()
}

点击下一个月 (点击上个月与此类似)

self.clickNextMonth = function (e) {
    self.selectedMonthSpan++;

    if (self.pageMonth == 11) {
        self.pageMonth = 0
        self.pageYear++
    } else {
        self.pageMonth++
    }

    showDate(new Date(self.pageYear, self.pageMonth, 1))
    updateMonthStyle()
}

点击选择日期效果切换

function updateMonthStyle() {
    self.update({
        monthColor: {
            'background': self.canSelectDays ? '#0a79ff' : '#97999d'
        },

        workDayColor: {
            'color': self.canSelectDays ? '#181a28' : '#97999d'
        },

        weekendsDayColor: {
            'color': self.canSelectDays ? '#0a79ff' : '#97999d'
        },

        dayColor: {
            'color': self.canSelectDays ? '#181a28' : '#97999d'
        }
    })
}

判断是否为 “今天 ”

function isPickedDay(year, month, date) {
    if (self.pickedDay.year == 0) {
        return false
    }

    var today = self.currentDate.getDate()

    return ((self.pickedDay.year == year) && (self.pickedDay.month == month) &&
        ((self.pickedDay.date == date)) || ((self.pickedDay.date == today) && (date == '今天')) )
}

"今天 " 以前时间置灰

function isPassedDayInCurrentMonth(year, month, day) {
    return ((year == self.currentDate.getFullYear()) &&
    (month == self.currentDate.getMonth()) &&
    (day < self.currentDate.getDate()))
}

 
以下为样式列表

.content {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.date-picker {
    width: 25.993rem;
    margin-left: 2rem;
    margin-right: 2rem;
    /*height: 28.1667rem;*/
    margin-top: 3rem;
    background: white;
}

.month {
    width: 100%;
    height: 3.1667rem;
}

.month p {
    display: block;
    color: white;
    line-height: 3.1667rem;
    text-align: center;
}

.month img {
    height: 1.2rem;
    margin-top: 0.9667rem;
    margin-bottom: 0.9667rem;
}

.week {
    width: 24rem;
    height: 2rem;
    margin-top: 1.5rem;
    margin-left: 0.8rem;
}

.week-item {
    width: 3.42rem;
    height: 100%;
    float: left;
}

.week-item p, .day-item p {
    text-align: center;
    line-height: 2rem;
    font-size: 0.833rem;
    width: 100%;
}

.day {
    width: 24rem;
    margin-top: 1rem;
    margin-left: 0.8rem;
    height: 20rem;
}

.day-item {
    width: 2rem;
    height: 2rem;
    margin-top: 1rem;
    margin-left: 0.71rem;
    margin-right: 0.71rem;
    float: left;
}

.day-item-selected {
    width: 2rem;
    height: 2rem;
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;
    border-radius: 1rem;
    background: #0a79ff;
}

.day-item-selected p {
    color: white;
}

.confirm {
    margin-top: 2.667rem;
    width: 100%;
    height: 8.5rem;
}

.confirm-btn {
    margin-left: 0.1667rem;
    height: 100%;
    width: 29.6666rem;
    background: url(img/icon/train_tickets_btn.png);
    background-size: cover;
}

.confirm-btn p {
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    margin-top: 2.5rem;
    color: white;
}