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日期控件怎么用的详细内容。