修改的一个简单日历

引入mui.css和mui.js 在plusReady中调用initCalendar();就可以了

//CSS  
.riqi {  
    background: white;  
    width: 94%;  
    left: 50%;  
    overflow: hidden;  
    margin: auto;  
    margin-top: 40px;  
    z-index: 2;  
    position: fixed;  
    margin-left: -47%;  
    padding: 1em 0.5em;  
    top: 10%;  
    display: block;  
}  

.toubu {  
    width: 99%;  
    margin: auto;  
}  

.toubu>div {  
    width: 50%;  
    float: left;  
}  

.toubu>div>*,  
.toubu>div {  
    height: 30px;  
    line-height: 30px;  
    text-align: center;  
}  

.toubu>div>a {  
    background: #41BC7B;  
    color: white;  
    width: 30px;  
    font-size: 18px;  
    float: left;  
}  

.toubu>div>div {  
    float: left;  
    width: 60px;  
    text-align: center;  
    border-top: 1px solid darkgray;  
    border-bottom: 1px solid darkgray;  
}  

.toubu>div>div>span {}  

.toubu>div.yue>* {  
    float: right;  
}  

/**table************************/  

table {  
    border-collapse: collapse;  
}  

table>thead>tr>th {  
    font-size: 14px;  
    padding: 2px 2px;  
    border: 1px solid #D7D7D7;  
}  

table,  
th,  
td {  
    border: 1px solid #D7D7D7;  
    text-align: center;  
    color: #666666;  
    width: 14.28%;  
    font-size: 12px;  
    height: 2em;  
    line-height: 2em;  
}  

.table>table {  
    margin-top: 4em;  
    width: 100%;  
}  

.table>table td.light {  
    color: white;  
    background: #41BC7B;  
}  

.table>table td {  
    color: #5C5B5B;  
    background-color: #BDBDBD;  
}  

.jiezhishijian .shifouxuanzhong a {  
    font-size: 12px;  
    height: 2.5em;  
    line-height: 2.5em;  
    padding: 0;  
}  

#sure {  
    float: right;  
    color: #41BC7B;  
    margin: 10px 15px;  
}  

#cancle {  
    float: right;  
    color: #41BC7B;  
    margin: 10px 15px;  
}  

.table>table td.choose {  
    background-color: red;  
}

//JS  
var currentday, currentyear, currentmonth, nian, yue, tapelement;  
//初始化  
function initCalendar() {  
    var div = document.createElement("div");  
    div.className = 'riqi top_center';  
    div.id = 'riqi';  
    div.innerHTML = '<div class="toubu"><div class="nian"> <a id="nian_jian" class="jian">-</a><div><span id="nian" class="nian">2015</span><span>年</span></div> <a id="nian_jia" class="jia">+</a> </div> <div class="yue"> <a id="yue_jia" class="jia">+</a>  <div><span id="yue" class="yue">12</span><span>月</span></div> <a id="yue_jian" class="jian">-</a> </div> </div> <div class="table"> <table> <thead> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td></tr></tbody></table></div><a id="cancle">取消</a><a id="sure">确定</a>';  
    document.body.appendChild(div);  
    nian = document.getElementById("nian");  
    yue = document.getElementById("yue");  
    var data = new Date();  
    currentday = data.getDate(); //获取当前日  
    currentyear = data.getFullYear(); //获取当前年  
    currentmonth = data.getMonth() + 1; //获取当前月（现实月份）  
    boundTap();  
    initcontent(data);  
}  
//绑定点击事件  
function boundTap() {  
    mui('tbody').on('tap', 'td', function() {  
        if (this.innerText == '') {  
            return;  
        }  
        try {  
            tapelement.classList.remove('choose');  
        } catch (e) {  
            //TODO handle the exception  
        }  
        console.log(this.innerText);  
        this.classList.add('choose');  
        tapelement = this;  
    });  
}  

function initcontent(data) {  
    getCalender(data.getFullYear(), data.getMonth() + 1);  
    //加减点击  
    mui('.top_center').on('tap', '.jia,.jian', function() {  
        switch (this.id) {  
            case 'nian_jia':  
                if (nian.innerText == currentyear) {  
                    return;  
                }  
                nian.innerText++;  
                break;  
            case 'nian_jian':  
                nian.innerText--;  
                break;  
            case 'yue_jia':  
                if (yue.innerText == 12) {  
                    if (nian.innerText == currentyear) {  
                        return;  
                    } else {  
                        nian.innerText++;  
                        yue.innerText = 1;  
                    }  
                } else {  
                    yue.innerText++;  
                }  
                break;  
            case 'yue_jian':  
                if (yue.innerText == 1) {  
                    nian.innerText--;  
                    yue.innerText = 12;  
                } else {  
                    yue.innerText--;  
                }  
                break;  
            default:  
                break;  
        }  
        getCalender(nian.innerText, yue.innerText);  
    });  
}  
/**  
 *  返回传递月份的天数  
 * @param {Object} year 年份  
 * @param {Object} month 月份(现实月份)  
 */  
function getDaynum(year, month) {  
    var tianShu;  
    if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {  
        tianShu = 31;  
    } else if (month != 2) {  
        tianShu = 30;  
    } else {  
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {  
            tianShu = 29;  
        } else {  
            tianShu = 28;  
        }  
    }  
    return tianShu;  
}  
/**  
 * 获取日历排列情况  
 * @param {Object} year 年份  
 * @param {Object} month 月份(现实月份)  
 */  
function getCalender(year, month) {  
    var daynum = getDaynum(year, month);  
    var xingqi = new Date(year + '/' + month + '/1').getDay();  
    var current_day = 0;  
    mui('tbody td').each(function(index, element) {  
        if (index >= xingqi && current_day < daynum) {  
            current_day++;  
            element.innerText = current_day;  
            if (year == currentyear && month == currentmonth && current_day == currentday) {  
                element.className = 'light';  
            } else {  
                element.className = '';  
            }  
        } else {  
            element.className = '';  
            element.innerText = '';  
        }  
    });  
}