[置顶] Jquery日期选择
1、首先将Jquery中的datepicker插件中的相关属性值改成中文的:
创新互联是一家集网站建设,新建企业网站建设,新建品牌网站建设,网站定制,新建网站建设报价,网络营销,网络优化,新建网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
$.datepicker.regional['zh-CN'] = { clearText:'清除', clearStatus:'清除已选日期', closeText:'关闭', closeStatus:'不改变当前选择', prevText:'<上月', prevStatus:'显示上月', prevBigText:'<<', prevBigStatus:'显示上一年', nextText:'下月>', nextStatus:'显示下月', nextBigText:'>>', nextBigStatus:'显示下一年', currentText:'今天', currentStatus:'显示本月', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], monthStatus:'选择月份', yearStatus:'选择年份', weekHeader:'周', weekStatus:'年内周次', dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], dayStatus:'设置 DD 为一周起始', dateStatus:'选择 m月 d日, DD', dateFormat:'yy-mm-dd', firstDay:1, initStatus:'请选择日期', isRTL:false}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
2、html页面中有两个日期输入框,分别为起始日期和结束日期:
起始日期: 结束日期:
3、调用修改后的datepicker插件:
var $start_date_value = "2012年1月1日"; // TODO 改成可以配置的 var $end_date_value = new Date();// When document has loaded, initialize pagination and form $(document).ready(function(){ $(".imagezz").click($test_image_check_box_click); $(".test-image-datepicker" ).datepicker({ changeMonth:true, changeYear:true, showOn:"both", buttonImage:"images/calendar.gif", buttonImageOnly:true, showButtonPanel:true, onSelect:function(dateText, inst){ if ($(this).attr("id") == "start-datepicker") { $start_date_value= dateText; } if ($(this).attr("id") == "end-datepicker") { $end_date_value= dateText; } //下面可以写一些根据日期变化引起页面相关部分修改的函数 //...... } }); $(".test-image-datepicker").datepicker("option", "dateFormat", "yy年mm月dd日"); $('.test-image-datepicker').attr("readonly","readonly"); $("#start-datepicker").datepicker("setDate",$start_date_value); $("#end-datepicker").datepicker("setDate",$end_date_value);
datepicker其余选项及方法详见:http://api.jqueryui.com/datepicker/
网页名称:[置顶] Jquery日期选择
文章位置:http://ybzwz.com/article/ieghhs.html