jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址：，官方示例：&。
一个不错的地址，用来DIY jQuery UI界面效果的站点
首先请到官网下载datepicker插件代码，注意官网提供了整个jquery ui的所有插件下载，但是您可以选择其中几个用到的插件下载，本文中只用到datepicker，所以只选择下载jquery ui核心代码和datepicker代码。你可以直接点击本文上面的Download下载按钮下载demo源码包，其中就包括了datepicker插件源码。
首先在head之间引入jquery库文件和datepicker插件以及相关css。
&type=&text/javascript&&src=&js/jquery.js&&&type=&text/javascript&&src=&js/jquery-ui-datepicker.js&&&rel=&stylesheet&&type=&text/css&&href=&css/jquery-ui.css&&&
然后在body间加入一个输入框。
&type=&text&&id=&date_1&&&
调用datepicker非常简单，直接使用以下代码就可以实现：
&&&&$(function(){&
& & $(&#date_1&).datepicker({
& & & showButtonPanel: true,
& & & changeMonth: true,
& & & changeYear: true,
& & & dateFormat:&yy-mm-dd&,
& & & minDate: -20, maxDate: &+1M +10D&,
& & & appendText: &(日期)&,
& & & autoSize: true
这样，单击输入框的时候会自动弹出一个日期选择器，选中日期后，自动关闭选择器，并在输入框中显示选中的日期。
本文已收录于以下专栏：
相关文章推荐
在项目中增加了jquery file upload 的一些内容之后，
在使用Bootbox+JQuery datepicker时，发现点击输入框，并不是被div层遮住了，而是根本就没有触发这个显示日期的事件，且无错误提示信息。
情况是这样的：
1.html代码：
my97datepicker 设置当天日期的前或后不能选中
当天日期后不能选中
当天日期前不能选中
首先感谢网易LOFTER博主Ivy的博客，我才顿悟了问题所在，希望给后面用这几款插件的童鞋一个提醒，别犯和我同样的错误！
这里是lvy博主写的博客：http://ivy.blog.1...
一、应用场景
实际应用中可能会根据日期字段查询某个日期范围内的数据，则需要对日期选择器可选时间进行限制，
如：开始时间不能大于结束时间，结束时间不能小于开始时间，此时就要为开始日期选择器和结束日期选...
最近在我的一个项目需要用一个日期插件来显示时间，在网上找了一下，最后决定使用My97DatePicker，颜色好看，布局也很合理，但是用的时候遇到很多问题，最大的问题有一下两个：
在jsp文...
$.extend($.fn.datebox.defaults.rules,{
gtStartDate: {
validator: function(value,param){//
这里介绍一个jquery插件datepicker日期选择器工具,主要用于实现javascript自定义日期时间选择的功能,以提高用户体验。 javascript的日期选择器工具很多,jquery插件d...
他的最新文章
讲师：汪剑
讲师：刘道宽
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)9个有用的jQuery日历和日期选择器插件
　作者: 创想中国　编辑:
　　日期选择器　　MIT和GPL许可证下发布的日期选择器是一个jQuery日历插件。它有很多的选项和功能。例如，你可以有多个日历组件，标记日期作为特殊的日子，很容易通过C??SS自定义，并允许不同的选择模式。所有这些都可以轻松配置。　　　　jQuery的周历插件　　jQuery的周历是一个插件，其中将包括一个Web应用程序中的周历。事件可以作为一个数组或JSON提供，这些事件可以随意拖动，下拉并调整其大小。　　简单的jQuery日期选择器插件 　　这是一个非常简单的的日期选择器插件。但是，它提供了很多有益和必要的日期选择器功能。例如，您可以轻松地浏览，以月和年通过下拉选择框下降。　　　　jQuery的日期选择器　　这是一个干净，不显眼的jQuery插件，它允许你轻松地添加日期选择器，Web窗体和网页。有很多这个简单的插件的配置和选项。如何使用这个插件的更多例子，你可以参考插件页面。　　有很多的选项和事件的回调，可以参考通过官方插件页面。　　　　jQuery的互动日期范围选择器　　这个强大的日期范围选择器是一个修改后的版本的jQuery UI的DatePicker组件。它有一个更快的日期选择预设日期/范围和平稳过渡的清单。最新版本使用了jQuery UI 1.7和jQuery UI CSS框架。随着jQuery UI的升级，用户现在可以切换日历主题容易。　　
大学生分期购物销量榜
已有条评论
IT168企业级内容合作：027-
广告热线：027-
客服热线：027-
加入微博，记录点滴，分享感动，握手明星
& 大楚网媒体库 & 湖北3C媒体库 & 正文
9个有用的jQuery日历和日期选择器插件
　　【IT168技术】事件日历和日期选择器是是我们开发当中经常遇到的问题，这个时候我们就需要用jquery插件来实现，昨天我在做项目的时候，遇到了个问题就是如何显示倒计时问题，我这个时候就用jquery插件解决的，今天给大家分享9个其他的时间选择器插件
　　FullCalendar
　　FullCalendar是一个著名的jQuery日历插件，它提供了拖和下降功能，与谷歌日历整合，并能够通过JSON获取事件等功能。设计人员可以轻松定制外观和感觉的日历，而开发人员可以利用用户触发的事件暴露挂钩。
Astonishing iCal-like Calendar　　这是一个使用jQuery和CSS来构建一个iPhone风格的日历应用程序的教程。
　　jQuery UI的DatePicker　　jQuery UI的DatePicker的是一个高度可配置的插件，他添加到您的网页的日期选择器的功能。您可以自定义的日期格式和语言，限制了可选择的日期范围，并容易添加按钮和其他导航选项4jMonthCalendar
　　jMonthCalendar
　　jMonthCalendar支持全月日历和事件。这个插件的有趣的部分是它允许开发者开发互动的日历。
日期选择器　　MIT和GPL许可证下发布的日期选择器是一个jQuery日历插件。它有很多的选项和功能。例如，你可以有多个日历组件，标记日期作为特殊的日子，很容易通过CSS自定义，并允许不同的选择模式。所有这些都可以轻松配置。
　　jQuery的周历插件
　　jQuery的周历是一个插件，其中将包括一个Web应用程序中的周历。事件可以作为一个数组或JSON提供，这些事件可以随意拖动，下拉并调整其大小。
　　简单的jQuery日期选择器插件
　　这是一个非常简单的的日期选择器插件。但是，它提供了很多有益和必要的日期选择器功能。例如，您可以轻松地浏览，以月和年通过下拉选择框下降。
　　jQuery的日期选择器　　这是一个干净，不显眼的jQuery插件，它允许你轻松地添加日期选择器，Web窗体和网页。有很多这个简单的插件的配置和选项。如何使用这个插件的更多例子，你可以参考插件页面。
　　有很多的选项和事件的回调，可以参考通过官方插件页面。
jQuery的互动日期范围选择器　　这个强大的日期范围选择器是一个修改后的版本的jQuery UI的DatePicker组件。它有一个更快的日期选择预设日期/范围和平稳过渡的清单。最新版本使用了jQuery UI 1.7和jQuery UI CSS框架。随着jQuery UI的升级，用户现在可以切换日历主题容易。
关注微信，享受大楚新折扣。
打开微信――发现――扫一扫，扫描左侧的微信二维码。
精彩推荐焦点今日热评
Copyright & 1998 - 2017 Tencent. All Rights ReservedjQuery UI 教程
jQuery UI API - 日期选择器部件（Datepicker Widget）
描述：从弹出框或内联日历选择一个日期。
版本新增：1.0
jQuery UI 日期选择器（Datepicker）是向页面添加日期选择功能的高度可配置插件。您可以自定义日期格式和语言，限制可选择的日期范围，添加按钮和其他导航选项。
默认情况下，当相关的文本域获得焦点时，在一个小的覆盖层打开日期选择器。对于一个内联的日历，只需简单地将日期选择器附加到 div 或者 span 上。
当日期选择器打开时，下面的键盘命令可用：
PAGE UP：移到上一个月。
PAGE DOWN：移到下一个月。
CTRL+PAGE UP：移到上一年。
CTRL+PAGE DOWN：移到下一年。
CTRL+HOME：移到当前月份。如果日期选择器是关闭的则打开。
CTRL+LEFT：移到上一天。
CTRL+RIGHT：移到下一天。
CTRL+UP：移到上一周。
CTRL+DOWN：移到下一周。
ENTER：选择聚焦的日期。
CTRL+END：关闭日期选择器，并清除日期。
ESCAPE：关闭日期选择器，不做任何选择。
$.datepicker.setDefaults( settings )
为所有的日期选择器改变默认设置。
方法来改变个别实例的设置。
代码实例：
设置所有的日期选择器在获得焦点时或点击图标时打开。
$.datepicker.setDefaults({
showOn: "both",
buttonImageOnly: true,
buttonImage: "calendar.gif",
buttonText: "Calendar"
设置所有的日期选择器都有法语文本。
$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
格式化日期为一个带有指定格式的字符串值。
格式可以是下列组合：
d - 一月中的第几天（没有前导零）
dd - 一月中的第几天（两位数）
o - 一年中的第几天（没有前导零）
oo - 一年中的第几天（三位数）
D - 天的短名称
DD - 天的长名称
m - 一年中的第几月（没有前导零）
mm - 一年中的第几月（两位数）
M - 月的短名称
MM - 月的长名称
y - 年（两位数）
yy - 年（四位数）
@ - Unix 时间戳（ms since 01/01/1970）
! - Windows 钟表（100ns since 01/01/0001）
'...' - 文本
'' - 单引号
其他 - 文本
也有一些 $.datepicker 预定义的标准日期格式：
ATOM - 'yy-mm-dd' （与 RFC 3339/ISO 8601 相同）
COOKIE - 'D, dd M yy'
ISO_8601 - 'yy-mm-dd'
RFC_822 - 'D, d M y' （参照 RFC 822）
RFC_850 - 'DD, dd-M-y' （参照 RFC 850）
RFC_1036 - 'D, d M y' （参照 RFC 1036）
RFC_1123 - 'D, d M yy' （参照 RFC 1123）
RFC_2822 - 'D, d M yy' （参照 RFC 2822）
RSS - 'D, d M y' （与 RFC 822 相同）
TICKS - '!'
TIMESTAMP - '@'
W3C - 'yy-mm-dd' （与 ISO 8601 相同）
代码实例：
以 ISO 格式显示日期。产生 ""。
$.datepicker.formatDate( "yy-mm-dd", new Date( 2007, 1 - 1, 26 ) );
以扩展法语格式显示日期。产生 "Samedi, Juillet 14, 2007"。
$.datepicker.formatDate( "DD, MM d, yy", new Date( 2007, 7 - 1, 14 ), {
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
dayNames: $.datepicker.regional[ "fr" ].dayNames,
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
monthNames: $.datepicker.regional[ "fr" ].monthNames
从一个指定格式的字符串值中提取日期。
格式可以是下列组合：
d - 一月中的第几天（没有前导零）
dd - 一月中的第几天（两位数）
o - 一年中的第几天（没有前导零）
oo - 一年中的第几天（三位数）
D - 星期几的短名称
DD - 星期几的长名称
m - 一年中的第几月（没有前导零）
mm - 一年中的第几月（两位数）
M - 月的短名称
MM - 月的长名称
y - 年（两位数）
yy - 年（四位数）
@ - Unix 时间戳（ms since 01/01/1970）
! - Windows 钟表（100ns since 01/01/0001）
'...' - 文本
'' - 单引号
其他 - 文本
一些可能被抛出的异常：
'Invalid arguments' - 如果格式或值为空则抛出此异常。
'Missing number at position nn' - 如果格式显示一个未找到的数值则抛出此异常。
'Unknown name at position nn' - 如果格式显示一个未找到的星期几名称或月份名称则抛出此异常。
'Unexpected literal at position nn' - 如果格式显示一个未找到的文本值则抛出此异常。
'Invalid date' - 如果日期无效则抛出此异常，比如 '31/02/2007'。
代码实例：
提取一个 ISO 格式的日期。
$.datepicker.parseDate( "yy-mm-dd", "" );
提取一个扩展法语格式的日期。
$.datepicker.parseDate( "DD, MM d, yy", "Samedi, Juillet 14, 2007", {
shortYearCuroff: 20,
dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort,
dayNames: $.datepicker.regional[ "fr" ].dayNames,
monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort,
monthNames: $.datepicker.regional[ "fr" ].monthNames
$.datepicker.iso8601Week( date )
确定一个给定的日期在一年中的第几周：1 到 53。
该函数使用 ISO 8601 定义一周：一周从星期一开始，每一年的第一周包含 1 月 4 日。这意味着上一年至多有三天可能包含在当年的第一周中，当年至多有三天可能包含在上一年的最后一周中。
选项的默认实现。
代码实例：
查找日期在一年中的第几周。
$.datepicker.iso8601Week( new Date( 2007, 1 - 1, 26 ) );
$.datepicker.noWeekends
设置如 beforeShowDay 函数，防止选择周末。
我们可以在
选项中提供 noWeekends() 函数，用来计算所有工作日，提供一个 true/false 值的数组，用来指示日期是否可选择。
代码实例：
设置 DatePicker，让周末不可选。
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
日期选择器提供了迎合不同的语言和日期格式本地化内容的支持。每个本地化包含在名称后追加语言代码的文件中，例如法语为 jquery.ui.datepicker-fr.js。所需的本地化文件需要包含在主要的日期选择器代码后面。每个本地化文件添加了它自己的设置到可用的本地化集合中，所有实例自动应用这些设置为默认设置。
$.datepicker.regional 属性保存了一个本地化数组，以语言代码作为前置，默认前置为 ""，表示英语。每个条目是一个带有下列属性的对象：closeText、prevText、nextText、currentText、monthNames、monthNamesShort、dayNames、dayNamesShort、dayNamesMin、weekHeader、dateFormat、firstDay、isRTL、showMonthAfterYear 和 yearSuffix。
您可以通过下面代码恢复默认的本地化：
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
您可以通过下面代码覆盖一个特定地点的日期选择器：
$( selector ).datepicker( $.datepicker.regional[ "fr" ] );
日期选择器部件（Datepicker Widget）使用
来定义它的外观和感观的样式。如果需要使用日期选择器指定的样式，则可以使用下面的 CSS class 名称：
ui-datepicker：日期选择器的外层容器。如果日期选择器是内联的，该元素会另外带有一个 ui-datepicker-inline class。如果设置了
选项，该元素会另外带有一个 ui-datepicker-rtl class。
ui-datepicker-header：日期选择器的头部容器。
ui-datepicker-prev：用于选择上一月的控件。
ui-datepicker-next：用于选择下一月的控件。
ui-datepicker-title：日期选择器包含月和年的标题容器。
ui-datepicker-month：月的文本显示，如果设置了
选项则显示 &select& 元素。
ui-datepicker-year：年的文本显示，如果设置了
选项则显示 &select& 元素。
ui-datepicker-calendar：包含日历的表格。
ui-datepicker-week-end：周末的单元格。: Cells containing weekend days.
ui-datepicker-other-month：发生在某月但不是当前月天数的单元格。
ui-datepicker-unselectable：用户不可选择的单元格。
ui-datepicker-current-day：已选中日期的单元格。
ui-datepicker-today：当天日期的单元格。
ui-datepicker-buttonpane：当设置
选项时使用按钮面板（buttonpane）。
ui-datepicker-current：用于选择当天日期的按钮。
选项用于显示多个月份，则使用一些额外的 class：
ui-datepicker-multi：一个多月份日期选择器的最外层容器。该元素会根据要显示的月份个数另外带有 ui-datepicker-multi-2、ui-datepicker-multi-3 或 ui-datepicker-multi-4 class 名称。
ui-datepicker-group：分组内单独的选择器。该元素会根据它在分组中的位置另外带有 ui-datepicker-group-first、ui-datepicker-group-middle 或 ui-datepicker-group-last class 名称。
（可选的；当与
选项一起使用时）
该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
该部件以编程方式操作元素的值，因此当元素的值改变时不会触发原生的 change 事件。
不支持在 &input type="date"& 上创建日期选择器，因为会造成与本地选择器的 UI 冲突。
一个简单的 jQuery UI 日期选择器（Datepicker）。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&日期选择器部件（Datepicker Widget）演示&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.10.2.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&div id="datepicker"&&/div&
$( "#datepicker" ).datepicker();
记住登录状态
重复输入密码在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想添加一个日期选择器，要求是只能选周日那天，有没有做过的
这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
只选周日，那就判断getDay()===0的时候.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
既然只能选中周日，周日那天在每行又是固定的。只给每行第一个元素绑定事件就好了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
bootstrap的datetimepicker可以设置所选时间可选：有一个参数setDaysOfWeekDisabled可以设置一周的哪几天不可选。
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以使用WDatePicker这个插件。&input type="text" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',disabledDays:[1,2,3,4,5,6]})" /&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个问题已经被关闭无法回答
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：