Jquery日期选择datepicker插件用法实例分析

前端技术 2023/09/06 JavaScript

本文实例讲述了Jquery日期选择datepicker插件用法。分享给大家供大家参考。具体如下：

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页面中有两个日期输入框，分别为起始日期和结束日期：

<label for=\"start-datepicker\">起始日期:</label> <input type=\"text\" class=\"datepicker test-image-datepicker\" id=\"start-datepicker\" size=\"15\" />  
<label for=\"end-datepicker\">结束日期:</label> <input type=\"text\" class=\"datepicker test-image-datepicker\" id=\"end-datepicker\" size=\"15\" />

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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/14931

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案