简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

jQuery UI 日期選擇器Datepicker詳解

小云云
發布： 2017-12-29 09:06:35
原創
2006 人瀏覽過

日期選擇器（Datepicker）綁定到一個標準的表單 input 欄位上。把焦點移到 input 上（點擊或使用 tab 鍵），在一個小的覆蓋層上開啟一個互動日曆。選擇日期，點選頁面上的任何地方（輸入框即失去焦點），或點選 Esc 鍵來關閉。如果選擇了一個日期，則回饋顯示為 input 的值。本文主要為大家帶來一篇jQuery UI 實例講解 - 日期選擇器(Datepicker)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 默认功能</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker(); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

動畫

#當開啟或關閉 datepicker 時使用不同的動畫。從下拉框中選擇一個動畫，然後在輸入框中點擊來查看它的效果。您可以使用三個標準動畫中任一個，或是使用 UI 特效中的任一個。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 动画</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
  $( "#datepicker" ).datepicker(); 
  $( "#anim" ).change(function() { 
   $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); 
  }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker" size="30"></p> 
 
<p>动画：<br> 
 <select id="anim"> 
  <option value="show">Show (默认)</option> 
  <option value="slideDown">滑下</option> 
  <option value="fadeIn">淡入</option> 
  <option value="blind">Blind (UI 百叶窗特效)</option> 
  <option value="bounce">Bounce (UI 反弹特效)</option> 
  <option value="clip">Clip (UI 剪辑特效)</option> 
  <option value="drop">Drop (UI 降落特效)</option> 
  <option value="fold">Fold (UI 折叠特效)</option> 
  <option value="slide">Slide (UI 滑动特效)</option> 
  <option value="">无</option> 
 </select> 
</p> 
 
 
</body> 
</html>
登入後複製

其他月份的日期

#datepicker 可以顯示其他月份的日期，這些日期也可以設定成可選擇的。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 其他月份的日期</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ 
  showOtherMonths: true, 
  selectOtherMonths: true
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

顯示按鈕列

#透過布林值的showButtonPanel 選項為選擇當天日期顯示一個"Today"按鈕，為關閉日曆顯示一個"Done"按鈕。預設情況下，當按鈕列顯示時會啟用每個按鈕，但是按鈕可透過其他的選項進行關閉。按鈕文字可自訂。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 显示按钮栏</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ 
  showButtonPanel: true
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

內聯顯示

#datepicker 是嵌套在頁面中顯示，而不是顯示在一個覆蓋層中。只需要簡單地在 p 上呼叫 .datepicker() 即可，而不是在 input 上呼叫。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 内联显示</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker(); 
 }); 
 </script> 
</head> 
<body> 
 
日期：<p id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

顯示月份& 年份選單

顯示月份和年份的下拉框，而不是顯示靜態的月份/年份標題，這樣便於在大範圍的時間跨度上導航。新增布林值 changeMonth和 changeYear 選項即可。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 显示月份 & 年份菜单</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ 
  changeMonth: true, 
  changeYear: true
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

顯示多個月份

#設定numberOfMonths 選項為整數2，或大於2 的整數，來在一個datepicker中顯示多個月份。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 显示多个月份</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ 
  numberOfMonths: 3, 
  showButtonPanel: true
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

格式化日期

#以各種方式顯示日期回饋。從下拉方塊中選擇一種日期格式，然後在輸入方塊中點擊並選擇日期，查看所選格式的日期顯示。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 格式化日期</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker(); 
 $( "#format" ).change(function() { 
  $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); 
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker" size="30"></p> 
 
<p>格式选项：<br> 
 <select id="format"> 
 <option value="mm/dd/yy">Default - mm/dd/yy</option> 
 <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> 
 <option value="d M, y">Short - d M, y</option> 
 <option value="d MM, y">Medium - d MM, y</option> 
 <option value="DD, d MM, yy">Full - DD, d MM, yy</option> 
 <option value="&#39;day&#39; d &#39;of&#39; MM &#39;in the year&#39; yy">With text - &#39;day&#39; d &#39;of&#39; MM &#39;in the year&#39; yy</option> 
 </select> 
</p> 
 
 
</body> 
</html>
登入後複製

圖示觸發器

#點擊輸入框旁的圖示來顯示 datepicker。設定 datepicker 在獲得焦點時打開（預設行為），或在點擊圖示時打開，或在獲得焦點/點擊圖示時打開。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 图标触发器</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ 
  showOn: "button", 
  buttonImage: "images/calendar.gif", 
  buttonImageOnly: true
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

本地化日曆

#本地化 datepicker 日曆語言和格式（預設為 English / Western 格式）。 datepicker 包含對從右到左讀取的語言的內建支持，例如 Arabic 和 Hebrew。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 本地化日历</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"></script> 
 <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"></script> 
 <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"></script> 
 <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ); 
 $( "#locale" ).change(function() { 
  $( "#datepicker" ).datepicker( "option", 
  $.datepicker.regional[ $( this ).val() ] ); 
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"> 
 <select id="locale"> 
 <option value="ar">Arabic (?(???????</option> 
 <option value="zh-TW">Chinese Traditional (繁體中文)</option> 
 <option value="">English</option> 
 <option value="fr" selected="selected">French (Fran?ais)</option> 
 <option value="he">Hebrew (?(?????</option> 
 </select></p> 
 
 
</body> 
</html>
登入後複製

填入另一個輸入框

使用altField 和altFormat 選項，無論何時選擇日期，都會在另一個輸入框中填入帶有一定格式的日期。這個功能透過對電腦友善性的日期進一步加工後，向使用者呈現一個使用者友善性的日期。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 填充另一个输入框</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ 
  altField: "#alternate", 
  altFormat: "DD, d MM, yy"
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"> <input type="text" id="alternate" size="30"></p> 
 
 
</body> 
</html>
登入後複製

限制日期範圍

#透過 minDate 和 maxDate 選項限制可選擇的日期範圍。設定起止日期為實際的日期（new Date(2009, 1 - 1, 26)），或為與今天的一個數值偏移（-20），或為一個週期和單位的字串（'+1M +10D '）。如果設定為字串，使用 'D' 表示天，使用 'W' 表示週，使用 'M' 表示月，使用 'Y' 表示年。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 限制日期范围</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

選擇一個日期範圍

#選擇要搜尋的日期範圍。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 选择一个日期范围</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#from" ).datepicker({ 
  defaultDate: "+1w", 
  changeMonth: true, 
  numberOfMonths: 3, 
  onClose: function( selectedDate ) { 
  $( "#to" ).datepicker( "option", "minDate", selectedDate ); 
  } 
 }); 
 $( "#to" ).datepicker({ 
  defaultDate: "+1w", 
  changeMonth: true, 
  numberOfMonths: 3, 
  onClose: function( selectedDate ) { 
  $( "#from" ).datepicker( "option", "maxDate", selectedDate ); 
  } 
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<label for="from">从</label> 
<input type="text" id="from" name="from"> 
<label for="to">到</label> 
<input type="text" id="to" name="to"> 
 
 
</body> 
</html>
登入後複製

顯示一年中的第幾週

datepicker 可以顯示一年中的第幾週。預設的計算是按照 ISO 8601 定義：每週從星期一開始，每年的第一周包含該年的第一個星期四。這就意味著一年中的某些天可能是屬於另一年中的周。 


<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="utf-8"> 
 <title>jQuery UI 日期选择器（Datepicker） - 显示一年中的第几周</title> 
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
 <script> 
 $(function() { 
 $( "#datepicker" ).datepicker({ 
  showWeek: true, 
  firstDay: 1 
 }); 
 }); 
 </script> 
</head> 
<body> 
 
<p>日期：<input type="text" id="datepicker"></p> 
 
 
</body> 
</html>
登入後複製

jQuery的datepicker變成中文:jquery.ui.datepicker-zh-CN.js通常會找這個js,我把這個js的程式碼拿出來，以後就不需要再上網找啦:


jQuery(function($){ 
 $.datepicker.regional[&#39;zh-CN&#39;] = { 
  closeText: &#39;关闭&#39;, 
  prevText: &#39;<上月&#39;, 
  nextText: &#39;下月>&#39;, 
  currentText: &#39;今天&#39;, 
  monthNames: [&#39;一月&#39;,&#39;二月&#39;,&#39;三月&#39;,&#39;四月&#39;,&#39;五月&#39;,&#39;六月&#39;, 
  &#39;七月&#39;,&#39;八月&#39;,&#39;九月&#39;,&#39;十月&#39;,&#39;十一月&#39;,&#39;十二月&#39;], 
  monthNamesShort: [&#39;一&#39;,&#39;二&#39;,&#39;三&#39;,&#39;四&#39;,&#39;五&#39;,&#39;六&#39;, 
  &#39;七&#39;,&#39;八&#39;,&#39;九&#39;,&#39;十&#39;,&#39;十一&#39;,&#39;十二&#39;], 
  dayNames: [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;], 
  dayNamesShort: [&#39;周日&#39;,&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;], 
  dayNamesMin: [&#39;日&#39;,&#39;一&#39;,&#39;二&#39;,&#39;三&#39;,&#39;四&#39;,&#39;五&#39;,&#39;六&#39;], 
  weekHeader: &#39;周&#39;, 
  dateFormat: &#39;yy-mm-dd&#39;, 
  firstDay: 1, 
  isRTL: false, 
  showMonthAfterYear: true, 
  yearSuffix: &#39;年&#39;}; 
 $.datepicker.setDefaults($.datepicker.regional[&#39;zh-CN&#39;]); 
});
登入後複製

相關推薦：

如何開發一個微信小程式的日期選擇器

React Native開源時間日期選擇器組件的有關詳解

#JS觸控螢幕網頁版仿app彈窗型滾動清單選擇器/日期選擇器

以上是jQuery UI 日期選擇器Datepicker詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
jquery 選擇器
來源：php.cn
上一篇：關於Vue元件實現tips的總結 下一篇：EasyUI建立人員樹範例程式碼
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
2
1771
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
10
1911
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1626
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1537
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1572
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！