免费的企业建站系统,h5商城网站是什么意思,wordpress主机 知乎,网站建设 如何友情链接为了防止用户输入的日期格式错误#xff0c;我们选择在源头将日期格式固定#xff0c;也就是不让用户自己输入#xff0c;而是通过我们给定的格式去选择#xff0c;于是就有了datepicker日期选择器#xff0c;日期选择插件Datepicker是一个配置灵活的插件#xff0c;我们…为了防止用户输入的日期格式错误我们选择在源头将日期格式固定也就是不让用户自己输入而是通过我们给定的格式去选择于是就有了datepicker日期选择器日期选择插件Datepicker是一个配置灵活的插件我们可以自定义其展示方式包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址http://docs.jquery.com/UI/Datepicker官方示例 http://jqueryui.com/demos/datepicker/。
DatePicker基本使用方法
!DOCTYPE html
html
headlink hrefhttp://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css relstylesheet typetext/css/script srchttp://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js/scriptscript srchttp://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js/scriptscript$(document).ready(function() {$(#datepicker).datepicker();});/script
/head
body stylefont-size:62.5%;div typetext iddatepicker/div/body
/htmlpage up/down - 上一月、下一月
ctrlpage up/down - 上一年、下一年
ctrlhome - 当前月或最后一次打开的日期
ctrlleft/right - 上一天、下一天
ctrlup/down - 上一周、下一周
enter - 确定选择日期
ctrlend - 关闭并清除已选择的日期
escape - 关闭并取消选择$.datepicker.setDefaults( settings ) - 全局设置日期选择插件的参数.
$.datepicker.formatDate( format, date, settings ) - 格式化显示的日期字符串
$.datepicker.iso8601Week( date ) - 给出一个日期确实他是一年中的第几周
$.datepicker.parseDate( format, value, settings ) - 按照指定格式获取日期字符串 d - 每月的第几天 (没有前导零)
dd - 每月的第几天 (两位数字)
o - 一年中的第几天 (没有前导零)
oo - 一年中的第几天 (三位数字)
D - day name short
DD - day name long
m - 月份 (没有前导零)
mm - 月份 (两位数字)
M - month name short
MM - month name long
y - 年份 (两位数字)
yy - 年份 (四位数字)- Unix 时间戳 (从 01/01/1970 开始)
... - 文本- 单引号
其它 - 文本ATOM - yy-mm-dd (Same as RFC 3339/ISO 8601)
COOKIE - D, dd M yy
ISO_8601 - yy-mm-dd
RFC_822 - D, d M y
RFC_850 - DD, dd-M-y
RFC_1036 - D, d M y
RFC_1123 - D, d M yy
RFC_2822 - D, d M yy
RSS - D, d M y
TIMESTAMP -
W3C - yy-mm-dd altField : String : 将选择的日期同步到另一个域中配合altFormat可以显示不同格式的日期字符串。初始$(.selector).datepicker({ altField: #actualDate });获取var altField $(.selector).datepicker(option, altField);设置$(.selector).datepicker(option, altField, #actualDate); altFormat : String : 当设置了altField的情况下显示在另一个域中的日期格式。初始$(.selector).datepicker({ altFormat: yy-mm-dd });获取var altFormat $(.selector).datepicker(option, altFormat);设置$(.selector).datepicker(option, altFormat, yy-mm-dd); appendText : String : 在日期插件的所属域后面添加指定的字符串。初始$(.selector).datepicker({ appendText: (yyyy-mm-dd) });获取var appendText $(.selector).datepicker(option, appendText);设置$(.selector).datepicker(option, appendText, (yyyy-mm-dd)); buttonImage : String : 设置弹出按钮的图片如果非空则按钮的文本将成为alt属性不直接显示。初始$(.selector).datepicker({ buttonImage: /images/datepicker.gif });获取var buttonImage $(.selector).datepicker(option, buttonImage);设置$(.selector).datepicker(option, buttonImage, /images/datepicker.gif); buttonImageOnly : Boolean : falseSet to true to place an image after the field to use as the trigger without it appearing on a button.初始$(.selector).datepicker({ buttonImageOnly: true });获取var buttonImageOnly $(.selector).datepicker(option, buttonImageOnly);设置$(.selector).datepicker(option, buttonImageOnly, true); buttonText : String : ...设置触发按钮的文本内容。初始$(.selector).datepicker({ buttonText: Choose });获取var buttonText $(.selector).datepicker(option, buttonText);设置$(.selector).datepicker(option, buttonText, Choose); changeMonth : Boolean : false设置允许通过下拉框列表选取月份。初始$(.selector).datepicker({ changeMonth: true });获取var changeMonth $(.selector).datepicker(option, changeMonth);设置$(.selector).datepicker(option, changeMonth, true); changeYear : Boolean : false设置允许通过下拉框列表选取年份。初始$(.selector).datepicker({ changeYear: true });获取var changeYear $(.selector).datepicker(option, changeYear);设置$(.selector).datepicker(option, changeYear, true); closeTextType: StringDefault: Done设置关闭按钮的文本内容此按钮需要通过showButtonPanel参数的设置才显示。初始$(.selector).datepicker({ closeText: X });获取var closeText $(.selector).datepicker(option, closeText);设置$(.selector).datepicker(option, closeText, X); constrainInput : Boolean : true如果设置为true则约束当前输入的日期格式。初始$(.selector).datepicker({ constrainInput: false });获取var constrainInput $(.selector).datepicker(option, constrainInput);设置$(.selector).datepicker(option, constrainInput, false); currentText : String : Today设置当天按钮的文本内容此按钮需要通过showButtonPanel参数的设置才显示。初始$(.selector).datepicker({ currentText: Now });获取var currentText $(.selector).datepicker(option, currentText);设置$(.selector).datepicker(option, currentText, Now); dateFormat : String : mm/dd/yy设置日期字符串的显示格式。初始$(.selector).datepicker({ dateFormat: yy-mm-dd });获取var dateFormat $(.selector).datepicker(option, dateFormat);设置$(.selector).datepicker(option, dateFormat, yy-mm-dd); dayNames : Array : [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]设置一星期中每天的名称从星期天开始。此内容用于dateFormat时显示以及日历中当鼠标移至行头时显示。初始$(.selector).datepicker({ dayNames: [Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi] });获取var dayNames $(.selector).datepicker(option, dayNames);设置$(.selector).datepicker(option, dayNames, [Dimanche, Lundi, Mardi, Mercredi, Jeudi, Vendredi, Samedi]); dayNamesMin : Array : [Su, Mo, Tu, We, Th, Fr, Sa]设置一星期中每天的缩语从星期天开始此内容用于dateFormat时显示以前日历中的行头显示。初始$(.selector).datepicker({ dayNamesMin: [Di, Lu, Ma, Me, Je, Ve, Sa] });获取var dayNamesMin $(.selector).datepicker(option, dayNamesMin);设置$(.selector).datepicker(option, dayNamesMin, [Di, Lu, Ma, Me, Je, Ve, Sa]); dayNamesShort : Array : [Sun, Mon, Tue, Wed, Thu, Fri, Sat]设置一星期中每天的缩语从星期天开始此内容用于dateFormat时显示以前日历中的行头显示。初始$(.selector).datepicker({ dayNamesShort: [Dim, Lun, Mar, Mer, Jeu, Ven, Sam] });获取var dayNamesShort $(.selector).datepicker(option, dayNamesShort);设置$(.selector).datepicker(option, dayNamesShort, [Dim, Lun, Mar, Mer, Jeu, Ven, Sam]); defaultDate : Date, Number, String : null设置默认加载完后第一次显示时选中的日期。可以是Date对象或者是数字从今天算起例如7或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如1m 7d)。初始$(.selector).datepicker({ defaultDate: 7 });获取var defaultDate $(.selector).datepicker(option, defaultDate);设置$(.selector).datepicker(option, defaultDate, 7); duration : String, Number : normal设置日期控件展开动画的显示时间可选是slow, normal, fast代表立刻数字代表毫秒数。初始$(.selector).datepicker({ duration: slow });获取var duration $(.selector).datepicker(option, duration);设置$(.selector).datepicker(option, duration, slow); firstDay : Number : 0设置一周中的第一天。星期天为0星期一为1以此类推。初始$(.selector).datepicker({ firstDay: 1 });获取var firstDay $(.selector).datepicker(option, firstDay);设置$(.selector).datepicker(option, firstDay, 1); gotoCurrent : Boolean : false如果设置为true则点击当天按钮时将移至当前已选中的日期而不是今天。初始$(.selector).datepicker({ gotoCurrent: true });获取var gotoCurrent $(.selector).datepicker(option, gotoCurrent);设置$(.selector).datepicker(option, gotoCurrent, true); hideIfNoPrevNext : Boolean : false设置当没有上一个/下一个可选择的情况下隐藏掉相应的按钮。默认为不可用初始$(.selector).datepicker({ hideIfNoPrevNext: true });获取var hideIfNoPrevNext $(.selector).datepicker(option, hideIfNoPrevNext);设置$(.selector).datepicker(option, hideIfNoPrevNext, true); isRTL : Boolean : false如果设置为true则所有文字是从右自左。初始$(.selector).datepicker({ isRTL: true });获取var isRTL $(.selector).datepicker(option, isRTL);设置$(.selector).datepicker(option, isRTL, true); maxDate : Date, Number, String : null设置一个最大的可选日期。可以是Date对象或者是数字从今天算起例如7或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如1m 7d)。初始$(.selector).datepicker({ maxDate: 1m 1w });获取var maxDate $(.selector).datepicker(option, maxDate);设置$(.selector).datepicker(option, maxDate, 1m 1w);$(.selector).datepicker(option, maxDate, 12/25/2012); minDate : Date, Number, String : null设置一个最小的可选日期。可以是Date对象或者是数字从今天算起例如7或者有效的字符串(y代表年, m代表月, w代表周, d代表日, 例如1m 7d)。初始$(.selector).datepicker({ minDate: new Date(2007, 1 - 1, 1) });获取var minDate $(.selector).datepicker(option, minDate);设置$(.selector).datepicker(option, minDate, new Date(2007, 1 - 1, 1));$(.selector).datepicker(option, minDate, 12/25/2012); monthNames : Array : [January, February, March, April, May, June, July, August, September, October, November, December]设置所有月份的名称。初始$(.selector).datepicker(monthNames:[Januar,Februar,Marts,April,Maj,Juni,Juli,August,September,Oktober,November,December]});获取var monthNames $(.selector).datepicker(option, monthNames);设置$(.selector).datepicker(option, monthNames, [Januar,Februar,Marts,April,Maj,Juni,Juli,August,September,Oktober,November,December]); monthNamesShort : Array : [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]设置所有月份的缩写。初始$(.selector).datepicker(monthNamesShort:[Jan,Feb,Mar,Apr,Maj,Jun,Jul,Aug,Sep,Okt,Nov,Dec]});获取var monthNamesShort $(.selector).datepicker(option, monthNamesShort);设置$(.selector).datepicker(option, monthNamesShort, [Jan,Feb,Mar,Apr,Maj,Jun,Jul,Aug,Sep,Okt,Nov,Dec]); navigationAsDateFormat : Boolean : false如果设置为true则formatDate函数将应用到 prevText,nextText和currentText的值中显示例如显示为月份名称。初始$(.selector).datepicker({ navigationAsDateFormat: true });获取var navigationAsDateFormat $(.selector).datepicker(option, navigationAsDateFormat);设置$(.selector).datepicker(option, navigationAsDateFormat, true); nextText : String : Next设置“下个月”链接的显示文字。初始$(.selector).datepicker({ nextText: Later });获取var nextText $(.selector).datepicker(option, nextText);设置$(.selector).datepicker(option, nextText, Later); numberOfMonths : Number, Array : 1设置一次要显示多少个月份。如果为整数则是显示月份的数量如果是数组则是显示的行与列的数量。初始$(.selector).datepicker({ numberOfMonths: [2, 3] });获取var numberOfMonths $(.selector).datepicker(option, numberOfMonths);设置$(.selector).datepicker(option, numberOfMonths, [2, 3]); prevText : String : Prev设置“上个月”链接的显示文字。初始$(.selector).datepicker({ prevText: Earlier });获取var prevText $(.selector).datepicker(option, prevText);设置$(.selector).datepicker(option, prevText, Earlier); shortYearCutoff : String, Number : 10设置截止年份的值。如果是0-99的数字则以当前年份开始算起如果为字符串则相应的转为数字后再与当前年份相加。当超过截止年份时则被认为是上个世纪。初始$(.selector).datepicker({ shortYearCutoff: 50 });获取var shortYearCutoff $(.selector).datepicker(option, shortYearCutoff);设置$(.selector).datepicker(option, shortYearCutoff, 50); showAnim : String : show设置显示、隐藏日期插件的动画的名称。初始$(.selector).datepicker({ showAnim: fold });获取var showAnim $(.selector).datepicker(option, showAnim);设置$(.selector).datepicker(option, showAnim, fold); showButtonPanel : Boolean : false设置是否在面板上显示相关的按钮。初始$(.selector).datepicker({ showButtonPanel: true });获取var showButtonPanel $(.selector).datepicker(option, showButtonPanel);设置$(.selector).datepicker(option, showButtonPanel, true); showCurrentAtPos : Number : 0设置当多月份显示的情况下当前月份显示的位置。自顶部/左边开始第x位。初始$(.selector).datepicker({ showCurrentAtPos: 3 });获取var showCurrentAtPos $(.selector).datepicker(option, showCurrentAtPos);设置$(.selector).datepicker(option, showCurrentAtPos, 3); showMonthAfterYear : Boolean : false是否在面板的头部年份后面显示月份。初始$(.selector).datepicker({ showMonthAfterYear: true });获取var showMonthAfterYear $(.selector).datepicker(option, showMonthAfterYear);设置$(.selector).datepicker(option, showMonthAfterYear, true); showOn : String : focus设置什么事件触发显示日期插件的面板可选值focus, button, both初始$(.selector).datepicker({ showOn: both });获取var showOn $(.selector).datepicker(option, showOn);设置$(.selector).datepicker(option, showOn, both); showOptions : Options : {}如果使用showAnim来显示动画效果的话可以通过此参数来增加一些附加的参数设置。初始$(.selector).datepicker({ showOptions: {direction: up });获取var showOptions $(.selector).datepicker(option, showOptions);设置$(.selector).datepicker(option, showOptions, {direction: up); showOtherMonths : Boolean : false是否在当前面板显示上、下两个月的一些日期数不可选。初始$(.selector).datepicker({ showOtherMonths: true });获取var showOtherMonths $(.selector).datepicker(option, showOtherMonths);设置$(.selector).datepicker(option, showOtherMonths, true); stepMonths : Number : 1当点击上/下一月时一次翻几个月。初始$(.selector).datepicker({ stepMonths: 3 });获取var stepMonths $(.selector).datepicker(option, stepMonths);设置$(.selector).datepicker(option, stepMonths, 3); yearRange : String : -10:10控制年份的下拉列表中显示的年份数量可以是相对当前年(-nn:nn)也可以是绝对值 (-nnnn:nnnn)初始$(.selector).datepicker({ yearRange: 2000:2010 });获取var yearRange $(.selector).datepicker(option, yearRange);设置$(.selector).datepicker(option, yearRange, 2000:2010);beforeShow : function(input)在日期控件显示面板之前触发此事件并返回当前触发事件的控件的实例对象。初始$(.selector).datepicker({ beforeShow: function(input) { ... } }); beforeShowDay : function(date)在日期控件显示面板之前每个面板上的日期绑定时都触发此事件参数为触发事件的日期。调用函数后必须返回一个数组[0]此日期是否可选(true/false)[1]此日期的CSS样式名称(表示默认)[2]当鼠标移至上面出现一段提示的内容。初始$(.selector).datepicker({ beforeShowDay: function(date) { ... } }); onChangeMonthYear : function(year, month, inst)当年份或月份改变时触发此事件参数为改变后的年份月份和当前日期插件的实例。初始$(.selector).datepicker({ onChangeMonthYear: function(year, month, inst) { ... } }); onClose : function(dateText, inst)当日期面板关闭后触发此事件无论是否有选择日期参数为选择的日期和当前日期插件的实例。初始$(.selector).datepicker({ onClose: function(dateText, inst) { ... } }); onSelect : function(dateText, inst)当在日期面板选中一个日期后触发此事件参数为选择的日期和当前日期插件的实例。$(.selector).datepicker({ onSelect: function(dateText, inst) { ... } });
