jqueryUI 日历

浏览数：18 / 时间：2015年06月09日

《1》

<html>
<head>
    <title></title>
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <input type="text" id="rili" />
</body>
</html>

<script type="text/javascript">
    $("#rili").datepicker({

        //--------------------------下面四行代码就可以将整个日历中文化了---------------------------------//



        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],//以数组形式指定星期中的天的最小格式。

        firstDay: 1,//指定日历中的星期从星期几开始。0 表示星期日。

        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],




        //-----------------------------------------------------------------------------------//

        dateFormat: 'yy-mm-dd', //指定日历返回的日期格式。例如：2015-5-12

        showOtherMonths: true,//如果设置为true，当月中没有使用的单元格会显示填充(即填充上个月末尾的日期)，但那些日期无法使用

        changeYear: true,  ///设置为true，在日历上显示快速选择年份的下拉列表。
        changeMonth: true, ///设置为true，在日历上显示快速选择月份的下拉列表。
        showMonthAfterYear: true,//设置为true，则将月份放置在年份之后



        //showOn: "button", //如果这里设置为"button"那么日历绑定的控件#rili后面会多出一个按钮，点击一下这个按钮就会弹出日历（此时点击#rili就不会再弹出日历框了）
        showOn: "both",//如果这里设置为"both"那么日历绑定的控件#rili后面也会多出一个按钮，点击这按钮或者点击#rili都会弹出日历框
        buttonText: "日历",// 上面说了设置了showOn:"both"或showOn: "button"后#rili元素后面会多出一个按钮，这里就是设置这个按钮的名字的
        buttonImage: "images/calendar.gif", //这里我们也可以给#rili后面的那个按钮设置为一个图片（但是这样的话图片会显示在按钮里，很丑）
        buttonImageOnly: true, //设置为true 则会使图片代替按钮。（如果仅仅设置buttonImage图片会显示在按钮里，很丑，这里让它不显示按钮）


        yearSuffix: "年",//显示在年后面的文本 例如：在日历的表头会显示2015 四月 那么这里设置yearSuffix: "年",后日历表头就会显示2015年 四月
        //如果我想在月的后面也加一个”份“呢？那也很简单，只要在上面那个monthNamesShort属性值的后面加一个份就行了。例如：monthNamesShort:['一月份', '二月份'],

        nextText: "下一月", //当鼠标移入日历上的用于选择下一月，或上一页的方向按钮（即像这样的< >的方向按钮）的时候 显示提示文本，即提示：下一页
        prevText: "上一月",


        showButtonPanel: true, //开启显示按钮面板，只有它开启了，下面那两个“关闭”，和“今天”两个按钮才能显示出来
        closeText: '关闭', //将日历添加"关闭"按钮
        currentText: '今天', //将日历添加"回到今天"的按钮


        yearRange: "1940:2020", //设置下拉菜单年份的区间。比如：1950: 2020 这样用户就可以选择1950年-2020年之间的年份了。

        //maxDate: 1,//日历中可以选择的最大日期 例如：今天是5月15日，那么在日历中可以选择的最大日日期就是5月16日，16日后面的所有日期都变成灰色，不能再选择了。如果maxDate: 0日历中可以选择的最大日期就是5月15日了。如果maxDate: 2 日历中可选择的最大日期就是5月17日。以此类推

        //minDate: 0 ,//日历中可以选择的最小日期 例如：今天是5月15日，那么在日历中科院选择的最大日期就是5月16日，5月16日之前的所有日期都变成灰色，不能在选择了。 （maxDate和minDate 的值也可以为负值的哦）


        showAnim: false, //日历关闭或显示时的特效。它的值有blind，bounce，clip，slide，drop，fold，highlight，puff，scale，pulsate，fadeIn
        //设为false表示关闭特效




        //----------------------------方法
        beforeShow: function () {
            //alert("日历打开之前被调用");
        },
        onClose: function (dateText, inst) { //dateText是当时选中的日期字符串 ，inst 是一个对象（它就是你日历绑定的那个元素的jquery对象）
            //alert("日历关闭的时候被调用" + dateText);

            /*
            for (var i in inst) {
                document.write(i + "<br/>")
                //通过打印inst这个对象得知他又一下属性或方法
                id
                input
                selectedDay
                selectedMonth
                selectedYear
                drawMonth
                drawYear
                inline
                dpDiv
                settings
                append
                trigger
                lastVal
                currentDay
                currentMonth
                currentYear
                yearshtml
                _keyEvent
            }
            */

            //alert(inst.id); //获取到绑定日历元素控件的id号 这里打印出：rili

        },

        onSelect: function (dateText, inst) {//dateText是当时选中的日期字符串 ，inst 是一个对象
            // alert("选择日历的日期时被调用");
            alert(inst.currentDay); //打印出选中日期的“天” 例如选中5月15日 打印出15
        },

        //------------------------可以用它来禁用掉一个月份中我不让用户选择的日期。

        beforeShowDay: function (date) { //日历显示之前会调用这个方法
            //这个date会得到日历的月份，年份，和日期，和周等所有与日期有关的信息
            //该方法必须返回一个数组来指定每个日期的信息：

            //数组里的第一项：该日期是否可以被选择（数组的第一项，为true 或false）false表示不能被选择
            //数组里的第二项：表示该日期单元格上使用的CSS 类 我们可以在css里定义这个单元格的样式
            //数组里的第三项：该日期单元格上显示的字符串提示信息
            if (date.getDate() == 2) {//如果日期等于1
                return [false, 'a', "不能选择1号"]   //这里的a是一个class类  ，当鼠标放到日期的1号上就会提示“不能选择1号“
            } else {
                return[true]
            }           
        }

    });



    $("#rili").datepicker("setDate", "2013-10-12"); //设置当前的日期为2013-10-12

    alert($("#rili").datepicker("getDate"));//获取当前日期。不过它获取到的是Sat Oct 12 2013 00:00:00 GMT+0800 这样的值我们需要用下面的方法来取我们要的

    alert($("#rili").datepicker("getDate").getFullYear()); //获取当前日期中的年份


</script>