首頁 > 開發者 > JavaScript

jQuery之日期選取器的深入解析

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1：預設情況下，日期輸入文字框獲得頁面焦點的時候，日期選取器組件會在一個覆蓋層中開啟日曆選擇面板，當日期輸入文字框失去焦點或者選擇一個日期的時候，將自動關閉該日曆選擇面板
$(selector).datepicker([options]);
簡單一實例：
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Local</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#inputDate").datepicker({
  /* 地區化周名為中文 */
  dayNamesMin : ["日", "一", "二", "三", "四", "五", "六"], 
  /* 每周從周一開始 */
  firstDay : 1,
  /* 地區化月名為中文習慣 */
  monthNames : ["1月", "2月", "3月", "4月", "5月", "6月",
     "7月", "8月", "9月", "10月", "11月", "12月"],
  /* 月份顯示在年後面 */
  showMonthAfterYear : true,
  /* 年份尾碼字元 */
  yearSuffix : "年",
  /* 格式化中文日期
  （因為月份中已經包含“月”字，所以這裡省略） */
  dateFormat : "yy年MMdd日"  
 }); 
});
</script>
<style>
*{ font-size:12px; }
</style>
</head>
<body>
請輸入一個日期：
<input type="text" id="inputDate" />
</body>
</html>

：
 

2：指定彈出日期選取器的圖片按鈕
需要添加響應的資源檔：
複製代碼 代碼如下:
         $(document).ready(function() {
                  $("#datepicker").datepicker({
                               showOn: "button",
                               buttonImage: "Images/calendar.gif",
                               buttonImageOnly: true
                 });
          }); 

複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePickerIcon</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $( "#datepicker" ).datepicker({
  showOn: "button",
  buttonImage: "Images/calendar.gif",
  buttonImageOnly: true
 });
});
</script>
<style>
*{ font-size:12px; }
body{ padding : 30px; }
#datepicker{ margin:0; height:13px; }
</style>
</head>
<body>
<div>請選擇一個日期：<input type="text" id="datepicker"></div>
</body>
</html>

：
  

3：顯示帶年、月份下拉式清單和按鈕面板的日期選取器
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Local</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#inputDate").datepicker({
  changeMonth: true,  //可以選擇月份
  changeYear: true,   //可以選擇年份
  showButtonPanel: true,  //顯示按鈕面板
  currentText: '今天',  //當前日期按鈕上顯示的文字
  closeText: '關閉',    //關閉按鈕上顯示的文本
  yearRange: 'c-60:c+20'

 }); 
});
</script>
<style>
*{ font-size:12px; }
</style>
</head>
<body>
請輸入一個日期：
<input type="text" id="inputDate" />
</body>
</html>

：
  
4：同時顯示多個月份的日期選取器
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePickerButton</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $( "#datepicker" ).datepicker({
  numberOfMonths : 3,  //顯示月份的個數
  showCurrentAtPos : 1,  //當前月份在第二個位置
  stepMonths : 3  //翻頁時一次跳過三個月份
 });
});
</script>
<style>
*{ font-size:11px; }
#datepicker{ margin:0; height:13px; }
</style>
</head>
<body>
請選擇一個日期：<input type="text" id="datepicker">
</body>
</html>

：
  

5：日期選取器的一些方法
dialog, isDisabled, hide, show, refresh, getDate, setDate
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Dialog</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#inputDate").datepicker(); 
 $("#showDialog").click(function(){
  $("#inputDate").datepicker("dialog","",function(dateText, inst){
   $("#inputDate").val(dateText);
  });
 });
});
</script>
<style>
*{ font-size:12px; }
</style>
</head>
<body>
請輸入一個日期：
<input type="text" id="inputDate" />
<button id="showDialog">Show</button>
</body>
</html>

：
  

6：日期選取器的一些事件
6.1 beforeShow事件：顯示日期選取器之前觸發該事件。
6.2 beforeShowDay事件：日期選取器上每一天選擇之前都將觸發該事件  function(date) {}
6.3 onChangeMonthYear: 當日期選取器選定新的年份或者月份時觸發該事件function(year, month, inst);
6.4 onClose事件：當關閉日期選取器控制項的時候觸發此事件。function(dataText, inst) {}
6.5 onSelect事件：當日期選取器選中一個日期時觸發該事件。function(dataText, inst) {}   //dataText為所選的日期的字串，inst為日期選取器執行個體
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DatePicker Dialog</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 /* 有日誌的日期集合 */
 var hasLog=[{ month:10,  day:1 },
    { month:10, day:5 },
    { month:10, day:20 }];

 function hasToday(date){
  /* 測試當前日期是否在集合中存在有相同項 */
  for(var i in hasLog){
   /* 因為js中的Date類型的月份取值範圍是0-11，
    所以這裡調用getDate()以後要加1才是當前月份 */
   if(hasLog[i].month == (date.getMonth()+1) &&
    hasLog[i].day == date.getDate()){
    return true;
   }
  }
  return false
 }

 $("#datepicker").datepicker({
  beforeShowDay : function(date){
   /* 在顯示日期之前，
    測試如果當前日期在集合中存在，
    則為當前日期添加一個class */
   var dat = new Date(date);
   var css ="" ;
   if(hasToday(dat)){
    css="light_day";
   }
   return [true, css];
  },
  onSelect : function(dateText,inst){
   /* 在選中日期之後，
    測試如果當前日期在集合中存在，
    則向頁面列印相應的提示資訊 */
   var dat = new Date(dateText);
   if(hasToday(dat)){
    var msg="得到了日期：" + dateText +
     "，我們可以在這裡查詢當前日期的日誌列表";
    $("#logList").text(msg);
   }
  }
 });
});
</script>
<style>
body{ padding:30px; }
*{ font-size:12px; }
#logList{ margin:10px 0; padding:8px; }
.light_day .ui-state-default{ background:#fdc; }
.light_day .ui-state-default:hover,
.light_day .ui-state-default:active{ background:#fed; }
</style>
</head>
<body>
<div id="datepicker"></div>
<div id="logList"></div>
</body>
</html>

：
  

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More