资源描述:
《jqueryui(五)日期选择器datepicker》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、原文地址:jqueryui(五)日期选择器datepicker作者:kerwinJQuery官方的Datepicker控件,可以很方便的使用,可以让用户很方便的在输入框上选择时间。废话少说,先上实例【代码】
Date:
【效果图】下面介绍一下具体用法:一、需要加载的js文件(1)jquery.js(2)jquery.ui.cor
2、e.js(3)jquery.ui.widget.js(4)jquery.ui.datepicker.js二、html代码需要一个用来加载datepicker控件的输入框三、js代码初始化函数:$(.selecter).datepicker()【参数】因为参数较多,把所有参数根据功能分成几组进行阐述1、动画duration'normal'设置日期控件展开动画的显示时间,可选是"slow","normal","fast",''代表立刻,数字代表毫秒数。showAnim'sho
3、w'设置显示、隐藏日期插件的动画的名称。showOptions{}如果使用showAnim来显示动画效果的话,可以通过此参数来增加一些附加的参数设置。2、图片按钮buttonImage""设置弹出按钮的图片,如果非空,则按钮的文本将成为alt属性,不直接显示。buttonImageOnlyfalse是否把按钮安全显示成图片的样子buttonText"..."设置触发按钮的文本内容。showOn'focus'设置什么事件触发显示日期插件的面板,可选值:focus,button,both(当为focus时,不显示图片按钮)3、选中
4、之后时间格式dateFormatmm/dd/yy设置日期字符串的显示格式。dayNames['Sunday','Monday','Tuesday','Wednesday',设置一星期中每天的名称,从星期天开始。此内容用于dateFormat时显示,以及日历中当鼠标移至行头时显示。'Thursday','Friday','Saturday']dayNamesMin['Su','Mo','Tu','We','Th','Fr','Sa']设置一星期中每天的缩语,从星期天开始,此内容用于dateFormat时显示,以前日历中的行头显示
5、dayNamesShort['Sun','Mon','Tue','Wed','Thu','Fri','Sat']设置一星期中每天的缩语,从星期天开始,navigationAsDateFormatfalse如果设置为true,则formatDate函数将应用到prevText,nextText和currentText的值中显示,例如显示为月份名称。constrainInputtrue如果设置为true,则约束当前输入的日期格式。4、面板底部的按钮控制showButtonPanelfalse设置是否在面板上显示相关的按钮close
6、TextType"done"设置关闭按钮的文本内容currentText"today"设置当天按钮的文本内容gotoCurrentfalse如果设置为true,则点击当天按钮时,将移至当前已选中的日期,而不是今天5、可选中的时间范围maxDatefalse设置一个最大的可选日期。可以是Date对象,或者是数字(从今天算起,例如+7),或者有效的字符串('y'代表年,'m'代表月,'w'代表周,'d'代表日,例如:'+1m+7d')。minDatefalse设置一个最小的可选日期。可以是Date对象,或者是数字(从今天算起,例如
7、+7),或者有效的字符串('y'代表年,'m'代表月,'w'代表周,'d'代表日,例如:'+1m+7d')。yearRange-10:+10控制年份的下拉列表中显示的年份数量,可以是(-nn:+nn),也可以是绝对值(-nnnn:+nnnn)shortYearCutoff'+10'设置截止年份的值。如果是(0-99)的数字则以当前年份开始算起,当超过截止年份时,则被认为是上个世纪6、面板中上一月下一月按钮控制hideIfNoPrevNextfalse设置当没有上一个/下一个可选择的情况下,隐藏掉相应的按钮。(默认为不可用)ne
8、xtText'Next'设置“下个月”链接的显示文字prevText'Prev'设置“上个月”链接的显示文字。stepMonths1当点击上/下一月时,一次翻几个月。7、面板其他显示参数firstDay0设置一周中的第一天。星期天为0,星期一为1,以此类推。defaultDa