.net mvc页面UI之Jquery博客日历控件实现代码

一、效果图

二、页面文件

页面上需要添加<div id="cal"></div>标记。

三、JS代码

代码如下:
// JavaScript 日历

$(document).ready(function () {

    //当前时间

    $now = new Date();                      //当前的时间

    $nowYear = $now.getFullYear();          //当前的年

    $nowMonth = $now.getMonth();            //当前的月

    $nowDate = $now.getDate();              //当前的日

    $nowMonthCn = monthCn($nowMonth);       //格式化后的月

    //第一次设置当前时间

    calOpt($now);

    //上个月鼠标点击事件

    $('#prevMonth').live('click', function () {

        var year_text = $('.thisYear').text();

        var month_text = $('.thisMonth').text() - 2;

        var date_text = $('.thisDate').text();

        $('#cal').html('');

        var d = new Date(year_text, month_text, date_text);

        calOpt(d);

        return false;

    });

    //下个月鼠标点击事件

    $('#nextMonth').live('click', function () {

        var year_text = $('.thisYear').text();

        var month_text = $('.thisMonth').text();

        var date_text = $('.thisDate').text();

        $('#cal').html('');

        var d = new Date(year_text, month_text, date_text);

        calOpt(d);

        return false;

    });

    //关闭日历鼠标点击事件

    $('#cal_close').live('click', function () {

        $('#cal').html('');

        $('#cal').hide();

        return false;

    });

});

//是否在数组中？返回下标+1

function inArray(val, arr) {

    for (var index = 0; index < arr.length; index++) {