JQuery官方的Datepicker控件,可以很方便的使用,可以让用户很方便的在输入框上选择时间。
废话少说,现在进入正题
一、国际惯例,先上实例
1、代码
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Date: <input id="datepicker" type="text" />
2、效果
二、具体用法
1、需要加载文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
2、页面上的HTML代码
需要一个用来加载datepicker控件的输入框
3、js代码
最简单的初始化函数:
4、datepicker()的参数
datepicker非常强大,所以也提供了很多使用的参数,先看一个复杂一点的例子,然后再介绍参数。
$(function() {
$( "#datepicker" ).datepicker({
changeMonth:true, //月份下拉列表
changeYear: true, //月份下拉列表
minDate: "-5d", //可选最小日期
maxDate: "+10d", //可选最大日期
showOn: "both", //点击图片和输入框都弹出面板
buttonImage:"calendar.gif",
buttonImageOnly:true,
showButtonPanel: true, //显示面板底部按钮
closeTextType:"close", //关闭按钮文字
currentText: "today", //返回今天按钮文字
dateFormat:"yy-mm-dd",
dayNamesMin:['Sun','Mo','Tu','We','Th','Fr','Sa'],
beforeShow: function(event, ui) { //打开窗口之前
alert('this is from ifxoxo.com');
}//其他参数详见下面
});
});
</script>
效果如下(灰色部分表示不能选择)
因为参数较多,把所有参数根据功能分成几组进行阐述
(1)、动画
duration | ‘normal’ | 设置日期控件展开动画的显示时间,可选是
“slow”, “normal”, “fast”,”代表立刻,数字代表毫秒数。 |
showAnim | ‘show’ | 设置显示、隐藏日期插件的动画的名称。 |
showOptions | {} | 如果使用showAnim来显示动画效果的话,可以通过此参数来增加一些附加的参数设置。 |
(2)、图片按钮
buttonImage | “” | 设置弹出按钮的图片,如果非空,则按钮的文本将成为alt属性,不直接显示。 |
buttonImageOnly | false | 是否把按钮安全显示成图片的样子 |
buttonText | “…” | 设置触发按钮的文本内容。 |
showOn | ‘focus’ | 设置什么事件触发显示日期插件的面板,可选值:
focus, button, both(当为focus时,不显示图片按钮) |
(3)、选中之后时间格式
dateFormat | mm/dd/yy | 设置日期字符串的显示格式。 |
dayNames | ['Sunday', 'Monday',
'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] |
设置一星期中每天的名称,从星期天开始。此内容用于dateFormat时显示,以及日历中当鼠标移至行头时显示。 |
dayNamesMin | ['Su', 'Mo', 'Tu',
'We', 'Th', 'Fr', 'Sa'] |
设置一星期中每天的缩语,从星期天开始,此内容用于dateFormat时显示,以前日历中的行头显示 |
dayNamesShort | ['Sun', 'Mon', 'Tue',
'Wed', 'Thu', 'Fri', 'Sat'] |
设置一星期中每天的缩语,从星期天开始, |
navigationAsDateFormat | false | 如果设置为true,则formatDate函数将应用到 prevText,nextText和currentText的值中显示,例如显示为月份名称。 |
constrainInput | true | 如果设置为true,则约束当前输入的日期格式。 |
(4)、面板底部的按钮控制
showButtonPanel | false | 设置是否在面板上显示相关的按钮 |
closeTextType | “done” | 设置关闭按钮的文本内容 |
currentText | “today” | 设置当天按钮的文本内容 |
gotoCurrent | false | 如果设置为true,则点击当天按钮时,
将移至当前已选中的日期,而不是今天 |
(5)、可选中的时间范围
maxDate | false | 设置一个最大的可选日期。可以是Date对象,
或者是数字(从今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如:’+1m +7d’)。 |
minDate | false | 设置一个最小的可选日期。可以是Date对象,
或者是数字(从今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如:’+1m +7d’)。 |
yearRange | -10:+10 | 控制年份的下拉列表中显示的年份数量,可以是
(-nn:+nn),也可以是绝对值 (-nnnn:+nnnn) |
shortYearCutoff | ‘+10′ | 设置截止年份的值。
如果是(0-99)的数字则以当前年份开始算起, 当超过截止年份时,则被认为是上个世纪 |
(6)、面板中上一月 下一月按钮控制
hideIfNoPrevNext | false | 设置当没有上一个/下一个可选择的情况下,
隐藏掉相应的按钮。(默认为不可用) |
nextText | ‘Next’ | 设置“下个月”链接的显示文字 |
prevText | ‘Prev’ | 设置“上个月”链接的显示文字。 |
stepMonths | 1 | 当点击上/下一月时,一次翻几个月。 |
(7)、面板其他显示参数
firstDay | 0 | 设置一周中的第一天。星期天为0,星期一为1,以此类推。 |
defaultDate | null | 设置默认加载完后第一次显示时选中的日期。
可以是Date对象, 或者是数字(从今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如:’+1m +7d’)。 |
changeMonth | false | 设置允许通过下拉框列表选取月份。 |
changeYear | false | 设置允许通过下拉框列表选取年份。 |
monthNames | ['January', 'February',
'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
设置所有月份的名称 |
monthNamesShort | ['Jan', 'Feb', 'Mar',
'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] |
设置所有月份的缩写。
(具体展现在下拉列表changeMonth) |
numberOfMonths |
1 | 设置一次要显示多少个月份。
如果为整数则是显示月份的数量, 如果是数组[2, 3],则是显示的行与列的数量。 |
showCurrentAtPos | 0 | 设置当多月份显示的情况下,当前月份显示的位置。自顶部/左边开始第x位。 |
showMonthAfterYear | false | 是否在面板的头部年份后面显示月份。 |
showOtherMonths | false | 是否在当前面板显示上、下两个月的一些日期数(不可选)。 |
isRTL | false | 如果设置为true,则所有文字是从右自左。 |
appendText | null | 在日期插件的所属域后面添加指定的字符串 |
(8)、同步显示到其他input
altField | null | 将选择的日期同步到另一个input中,
配合altFormat可以显示不同格式的日期字符串。 |
altFormat | ” | 当设置了altField的情况下,显示在另一个input中的日期格式。 |
5、datepicker的方法和事件
(1)create 加载的时候此事件将被触发function(event, ui)
(2)beforeShow 展示之前此事件将被触发 function(event, ui)
(3)beforeShowDay 展示日期之前事件将被触发 function(date)
(4)onChangeMonthYear 月份或者年份的时候此事件将被触发function(year, month, ui)
(5)onClose 关闭的时候此事件将被触发 function(dateText, ui)
(6)onSelect 选中的时候此事件将被触发function(dateText, ui)
beforeShow: function(event, ui) { alert4'has create!!'); }
});
6、方法
(1)destory 销毁 .datepicker( “destroy” )
(2)disable 不可用 .datepicker( “disable” )
(3)enable 可用 .datepicker( “enable” )
(4)option 获取参数 .datepicker( “option”, optionName )
(5)option 设置参数 .datepicker( “option” , optionName , [value] )
(6)widget 返回这个element .datepicker( “widget” )
(7)getDate 获取date .datepicker( “date” )
(8)setDate 设置date .datepicker( “setDate”, date )
$(".selector").datepicker( "setDate", '+1m +7d');
三、其他jquery-ui文章
1、jquery ui(一)简介
2、jquery ui(二)拖拽 draggable和droppable
3、jquery ui(三)弹出窗口 dialog
4、jquery ui(四)进度条 progressbar
5、jquery ui(五)日期选择器 datepicker
相关推荐
首先,jQuery UI Datepicker是一个基于jQuery库的日期选择器插件,它提供了一套完整的日期选择解决方案,包括各种格式化选项、日期范围限制、多语言支持等特性。开发者可以通过简单的API调用来集成到项目中,极大地...
jQuery UI的日期选择器(jQuery datepicker)是一个广泛使用的组件,尤其在网页表单中用于输入日期时。这个组件提供了一个优雅、用户友好的界面,允许用户通过日历视图来选择日期,而不是手动输入。在中文环境中,...
《jQuery日期时间选择器datepicker深度解析》 在Web开发中,日期和时间的选择是一个常见的功能需求,用户界面的友好性和易用性对于提升用户体验至关重要。jQuery的datepicker插件以其丰富的功能和灵活的定制性,...
其中,jQuery UI是jQuery的一个扩展库,提供了一系列可交互的用户界面组件,其中包括我们今天要讨论的"日期选择器"——jQuery UI Datepicker。这个插件允许用户方便地选择日期,甚至可以扩展到选择时间,实现年月日...
DatePicker还可以与其他jQuery UI组件结合使用,如时间选择器TimePicker Addon,以实现日期和时间的联合选择。此外,可以利用API实现更复杂的功能,如限制可选日期范围、禁用特定日期等。 总结,jQuery UI的...
**Datepicker** 是 jQuery UI 提供的一个非常实用的日期选择插件,它可以帮助开发者轻松地在网页上添加日期选择功能。要使用 Datepicker,首先需要确保页面已经加载了 jQuery 和 jQuery UI 的相关文件。 1. **引入...
jQuery UI库中的Datepicker组件是此类功能的一个强大实现,它提供了丰富的功能和多样的主题,使得日期选择器既能满足功能需求,又能与网站设计无缝融合。本文将深入探讨jQuery UI Datepicker及其全主题,帮助开发者...
jQuery UI 的日期选择器(Datepicker)是一个强大的交互组件,允许用户方便地在网页上选择日期。它提供了多种自定义选项,如日期格式、日期范围限制、预设日期、星期的第一天设置等,可以根据项目需求进行定制。这个...
jQuery UI中的日期选择器(DatePicker)是一个非常流行的前端组件,用于在网页上提供方便的日期输入功能。这个组件使得用户可以以日历的形式选择日期,而不是手动输入,从而提高了用户体验和数据准确性。以下是对`...
日期选择器在网页开发中是常见的一种交互组件,它能够帮助用户方便地选取日期,而jQuery UI中的datepicker组件就是这样一个强大的工具。本文将详细介绍如何在项目中使用jQuery UI的datepicker,以及它的一些主要功能...
jQuery UI 是一个基于jQuery的开源UI库,提供了多种可定制的组件,包括对话框、滑块、进度条以及我们关注的日期选择器Datepicker。Datepicker提供了一种优雅的方式来显示和选择日期,它支持多种本地化设置,可以...
首先,jQuery UI 包含多个可定制的组件,如日期选择器(Datepicker)、对话框(Dialog)、拖放功能(Draggable)、可排序列表(Sortable)和可折叠面板(Accordion)。这些组件都经过精心设计,能够无缝融入各种网页...
《jQuery_datepicker日期选择器:实现多功能日期选择的利器》 在Web开发中,日期选择器是一个不可或缺的组件,它能够帮助用户方便地输入或选择日期,提高用户体验。jQuery_datepicker是jQuery UI库中的一个核心组件...
进一步,我们可以定制日期选择器的行为,例如设置默认日期、改变日期格式等: ```javascript $( ".selector" ).datepicker({ defaultDate: "+1w", dateFormat: "yy-mm-dd" }); ``` 这将使日期选择器在打开时默认...
《jQuery日期选择器Air-Datepicker深度解析》 在当今的Web开发中,用户界面的交互性和用户体验成为了衡量一个网站或应用质量的重要标准之一。日期选择器作为一种常见且实用的UI组件,对于输入日期和时间提供了极大...
首先,jQuery UI的日期选择器(Datepicker)是一个强大的工具,允许用户以友好的方式输入或选择日期。在网页中,它通常与输入框(`<input>`)元素结合使用,通过`$(selector).datepicker()`方法初始化。这个方法会将...
**jQuery UI 日期选择器(Datepicker)控件** jQuery UI 是一个强大的 JavaScript 库,它扩展了 jQuery 的功能,提供了丰富的用户界面组件。在这些组件中,日期选择器(Datepicker)是一个非常常用且实用的功能,常...
在网页开发中,日期选择器是一个常见的功能,用于让用户方便地输入或选择日期。jQuery UI中的DatePicker插件是一个强大的工具,它提供了丰富的自定义选项,使得日期选择功能既美观又实用。下面我们将深入探讨jQuery ...
《jQuery UI Datepicker 日期选择器详解》 在网页开发中,日期选择器是一个非常常见的功能,用于方便用户输入或选择日期。jQuery UI中的Datepicker是实现这一功能的强大工具,它以其灵活性、易用性和良好的跨浏览器...
标题"jQuery ui带时间的日期选择器代码"所指的就是如何在jQuery UI的日期选择器基础上添加时间选择的功能。 首先,我们需要确保引入了jQuery和jQuery UI的相关库。这通常意味着在HTML文件的`<head>`部分包含以下...