首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery UI 实例讲解 - 日期选择器(Datepicker)

Posted in jQuery onSeptember 18, 2017

默认功能

日期选择器（Datepicker）绑定到一个标准的表单 input 字段上。把焦点移到 input 上（点击或者使用 tab 键），在一个小的覆盖层上打开一个交互日历。选择一个日期，点击页面上的任意地方（输入框即失去焦点），或者点击 Esc 键来关闭。如果选择了一个日期，则反馈显示为 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>日期：<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 是嵌套在页面中显示，而不是显示在一个覆盖层中。只需要简单地在 div 上调用 .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> 
 
日期：<div id="datepicker"></div> 
 
 
</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="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' 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['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']); 
});

以上这篇jQuery UI 实例讲解 - 日期选择器(Datepicker)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

jQuery UI 实例讲解 - 日期选择器(Datepicker)

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
jQuery plugin animsition使用小结
Sep 14 #jQuery
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
React中jquery引用的实现方法
Sep 12 #jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 #jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 #jQuery
key(1) 曝光融合(1) kafka(2) pycryto(1) shell脚本(1) 有序排列(1) 数据加密(1) HDR(1) 公共键(1) 连接器(1)
You might like
深入php self与$this的详解
2013/06/08 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
javascript学习笔记（四）function函数部分
2014/09/30 Javascript
jQuery实现的小图列表，大图展示效果幻灯片示例
2016/10/25 Javascript
网络传输协议（http协议）
2016/11/18 Javascript
原生js开发的日历插件
2017/02/04 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Python编程中类与类的关系详解
2019/08/08 Python
Python气泡提示与标签的实现
2020/04/01 Python
斯凯奇澳大利亚官网：SKECHERS澳大利亚
2018/03/31 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
自荐书范文范例
2014/02/13 职场文书
高中打架检讨书
2014/02/13 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
教师工作总结范文2014
2014/11/10 职场文书
先进班集体申报材料
2014/12/26 职场文书
学术会议领导致辞
2015/07/29 职场文书
初中生入团申请书范文（五篇）
2019/10/16 职场文书