jqueryUI 日历

来源：互联网发布：中国域名注册商编辑：程序博客网时间：2024/06/10 06:04

《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>

0 0