您好,欢迎访问一九零五行业门户网

jquery日期控件怎么用

jquery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活。下面做一个使用日期插件datapicker的例子。
下载jquery核心文件就不用说了吧,datepicker是轻量级插件,只需jquery的min版本就行了,然后到官网下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以官网下载datepicker,包括ui.core.js和ui.datepicker.js。
推荐课程:jquery教程。
jquery.ui.datepicker-zh-cn.js,内容如下:
jquery(function($){    $.datepicker.regional['zh-cn'] = {        closetext: '关闭',        prevtext: '<上月', nexttext: '下月>',        currenttext: '今天',        monthnames: ['一月','二月','三月','四月','五月','六月',        '七月','八月','九月','十月','十一月','十二月'],        monthnamesshort: ['一','二','三','四','五','六',        '七','八','九','十','十一','十二'],        daynames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],        daynamesshort: ['周日','周一','周二','周三','周四','周五','周六'],        daynamesmin: ['日','一','二','三','四','五','六'],        weekheader: '周',        dateformat: 'yy-mm-dd',        firstday: 1,        isrtl: false,        showmonthafteryear: true,        yearsuffix: '年'};    $.datepicker.setdefaults($.datepicker.regional['zh-cn']);});
实例:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <title>日期控件datepicker</title>        <!-- 引入 jquery -->    <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script>    <!--添加datepicker支持-->    <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>    <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>    <!-- 或者引入jquery ui包,其中也包含对datepicker的支持 <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>    -->    <!--引入样式css-->    <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />    <!-- 添加中文支持-->    <mce:script src="js/jquery.ui.datepicker-zh-cn.js" mce_src="js/jquery.ui.datepicker-zh-cn.js" type="text/javascript"></mce:script>    <mce:script type="text/javascript"><!-- //等待dom元素加载完毕. $(function(){ $("#selectdate").datepicker({//添加日期选择功能 numberofmonths:1,//显示几个月 showbuttonpanel:true,//是否显示按钮面板 dateformat: 'yy-mm-dd',//日期格式 cleartext:"清除",//清除日期的按钮名称 closetext:"关闭",//关闭选择框的按钮名称 yearsuffix: '年', //年的后缀 showmonthafteryear:true,//是否把月放在年的后面 defaultdate:'2011-03-10',//默认日期 mindate:'2011-03-05',//最小日期 maxdate:'2011-03-20',//最大日期 //monthnames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'], //daynames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], //daynamesshort: ['周日','周一','周二','周三','周四','周五','周六'], //daynamesmin: ['日','一','二','三','四','五','六'], onselect: function(selecteddate) {//选择日期后执行的操作 alert(selecteddate); } }); }); // --></mce:script> </head> <body>  <input type="text" id="selectdate" readonly="readonly"/> </body></html>
注意:由于jquery datepicker不是最新版本的,如果下载新版本jquery-ui-1.8.13中的css文件会造成日期控件不能显示的问题,所以这里使用了1.7.3的ui。简单一点就是用jquery-ui的压缩js。
以上就是jquery日期控件怎么用的详细内容。
其它类似信息

推荐信息