jQuery.ui.1.7.2--Datepicker中文文档

这是Datepicker部分的翻译, 有时间的朋友可以加到那份完整的里面...方面查阅.

 

 

<?xml version="1.0" encoding="UTF-8" ?> <!-- 注意事项: 1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议 2. 格式中的所有项都是选填, 如果没有, 不写就是了. 3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<!--[CDATA[这中间写内容]]> 4. 翻译过程中, 一块对应的是一个<translate />标签. 5. 希望大家工作愉快. --> <project> <translate item="droppable" version="7.1"> <translators> <translator nickname="selfimpr" name="雷果国" mail="[email protected]" homepage="http://blog.csdn.net/lgg201" qq="285821471" /> </translators> <relatives> <depend isitem="false"> <name><![CDATA[jquery]]></name> <description><![CDATA[jquery的核心库]]></description> <url><![CDATA[http://docs.jquery.com]]></url> </depend> <depend isitem="false"> <name><![CDATA[jquery.ui.core]]></name> <description><![CDATA[jquery.ui的核心库]]></description> <url><![CDATA[http://jqueryui.com/demos]]></url> </depend> </relatives> <overview> <original><![CDATA[ jquery.ui.datepicker是一个高度可配置的用来添加日期选择功能的插件. 可以自定义日期的格式和语言, 可以限制能够选择的日期的范围, 添加按钮或其他的一些方便的导航选项. 默认情况下, datepicker日历在一个小框中打开并得到焦点(focus), 并且它在失去焦点(blur)或被选择了一个有效时间之后自动关闭. 对于一个行内日历而言, 简单的把datepicker贴附到div或span上就可以了. 可以使用键盘的快捷键来操作datepicker: PAGE UP/DOWN(上一页, 下一页键): 前/后一月 CTRL + PAGE UP/DOWN(): 前/后一年 CTRL + HOME: 当前月或者在其关闭之后重新打开 CTRL + LEFT/RIGHT: 前/后一天 CTRL + UP/DOWN: 前/后一周 ENTER: 接受一个选择的日期 CTRL + END: 关闭 ESCAPE: 关闭datepicker但不清除已经选择的日期 下面是datepicker提供的公用函数: $.datepicker.setDefaults(settings): 设置当前所有的datepicker的共同属性. settings是一个options的对象, 其中可以配置的属性, 和普通的option相同 $.datepicker.formatDate(format, date, settings): 按照format指定的格式, 将一个日期格式化成一个字符串的值 format: 可以接受的格式化字符串, 接受的格式定义如下 d: day, 多少号的意思, 如果是一位的比如1号, 不加0 dd: day, 也是多少号的一是, 如果是一位的, 前面加0, 也就是说1号格式化后是01 o: 不加0的一天是一年中的第多少天 oo: 加零(固定是3位)的一天是一年中的第多少天 D: 星期几的缩写 DD: 星期几的全写 m: 月份数字, 不加0 mm: 月份数字, 不足两位前面加0 M: 月份简写, 比如Feb(二月) MM: 月份全写 y: 两位的年份, 比如09 yy: 四位的年费, 比如2009 @: unix 时间戳 '...': 原文输出 '': 由于单引号是特殊字符, 所以, 需要两个单引号来匹配一个单引号. 任何其他文本: 原文输出 下面是一些预定义的标准日期格式, 可以直接通过$.datepicker.ATOM这样的方式获得, 他们本身就是一些普通的字符串, 只不过是预定义常量而已. 在页面中引入datepicker然后alert($.datepicker.ISO_8601)就可以揭开面纱了. ATOM: 'yy-mm-dd' 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' date: 这个参数就是一个正常的javascript Date对象. settings: 这个参数是一个自定义的对象, 其中装载一些配置信息. 比如老外称星期四做Thu, 我们叫它周四, 那么: alert( $.datepicker.formatDate( $.datepicker.COOKIE, new Date(), {dayNamesShort: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']} ) );, 这个参数就是用来配置一些这样的类似国际化的信息, 可以配置的属性有: dayNamesShort(长度为7的string类型的数组): 星期的缩写的配置, 从星期日开始. dayNames(长度为7的string类型数组): 星期的全写的配置, 从星期日开始. monthNamesShort(长度为12的string类型数组): 月份的缩写的配置, 从一月开始. monthNames(长度为12的string类型数组): 月份的全写的配置, 从一月开始. $.datepicker.iso8601Week(date): 接受一个日期, 直接返回该天是那一年的第多少周. $.datepicker.parseDate(format, value, settings): 将一个给定字符串解析根据给定格式解析成一个javascript Date对象...... format: 和$.datepicker.formatDate函数中介绍的format一样, 但是使用这个函数, 可能会有一些异常抛出: 'Invalid arguments': format或value参数为null 'Missing number at position nn': format指定格式需要的数值在value中没有发现 'Unknown name at position nn': format指定格式中的星期或月份的名称形式没有在value中发现 'Unexpected literal at position nn': format指定格式中的原文输出的部分没有在value中发现. 'Invalid date': 无效的日期: 比如: 2009年18月98号. value: 要转换的字符串 settings: 和$.datepicker.formatDate函数介绍的settings一样, 但是, 在这里多了一个shortYearCutoff属性, shortYearCutoff属性用来设置在使用两位的年份时, 认为应该从0-99中的哪个年份来分割世纪表示法. 也就是解决你给一个值55, 应该是1955年或者2055年的问题. shortYearCutoff在jquery.ui 1.7.2中默认值是'+10', 译者认为这个值应该设置为当前年. 下面是这个问题的处理源码: year += new Date().getFullYear() - new Date().getFullYear() % 100 + (year <= shortYearCutoff ? 0 : -100); new Date().getFullYear() - new Date().getFullYear() % 100获取到了当前的整世纪四位年份, 比如现在获取到就是2000, (year <= shortYearCutoff ? 0 : -100) 当value中给定的年份小于等于shortYearCutoff的时候, 就认为是当前世纪的, 如果value中给定的年费大于shortYearCutoff, 那么就认为是上世纪的. 所以, 以下示例代码: alert($.datepicker.parseDate('dd M y', '26 Nov 18', {shortYearCutoff: 20})); alert($.datepicker.parseDate('dd M y', '26 Nov 20', {shortYearCutoff: 20})); alert($.datepicker.parseDate('dd M y', '26 Nov 21', {shortYearCutoff: 20})); 得到的输出中年份分别是2018, 2020, 1921. ]]></original> </overview> <options> <option name="altField" default="空字符串"> <types> <type name="选择器"> </type> </types> <description><![CDATA[ 用来指定一个要修改的域. 译者推断: 在选定一个日期之后, 是通过value这个属性来把值设置到一个目标field上的. altField就是指要将值设置到的那个目标field, 也就是说它必须有有效的value属性. 但是, 如果将一个自身有value属性的field渲染成一个datepicker控件控制端. 那么它自己也是自己的一个特殊的altField, value是随选择改变的, 但是format却不受altFormat选项的指定受影响... 另外一方面, 只要是altField指定选择器选择到的field, 并且对方有value属性, 那么在选择日期之后, 都会改变的. 详细见第四个demo ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ altField: '#actualDate' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var altField = $('.selector').datepicker('option', 'altField'); ]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'altField', '#actualDate');]]></code> </demo> <demo> <comment><![CDATA[译者注: 注意观察没有value属性的div渲染成datepicker控件之后和有value属性的input[type=button]渲染之后的不同之处]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $("#datepicker").datepicker({ altField: '#altField' }); $('#self_altField').datepicker({ altField: 'input[name=altFiled]' }); }); // --></mce:script> <body> <div id="datepicker" style="border: 1px solid red;" mce_style="border: 1px solid red;"></div> <input type="button" id="altField" /> <input type="button" id="self_altField" value="选择日期" /> <input type="button" name="altFiled" value="被动改变" /> <input type="button" name="altFiled" value="被动改变" /> <div name="altField" style="width: 80px; height: 80px; border: 1px solid black;"></div> </body> ]]></code> </demo> </demos> </option> <option name="altFormat" default="空字符串"> <types> <type name="字符串" /> </types> <description><![CDATA[用来指定所有altField的日期显示格式. 具体的格式控制见概览中的介绍. 这里可以使用datepicker预定义的一些日期格式字符串(见概览) ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ altFormat: 'yy-mm-dd' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var altFormat = $('.selector').datepicker('option', 'altFormat');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'altFormat', 'yy-mm-dd');]]></code> </demo> <demo> <comment><![CDATA[译者注: 给altField的第四个demo中的datepicker分别加上altFormat选项, 注意观察可以发现, 渲染到input[type=button]上的datepicker在日期改变的时候, 格式其实只影响明确指定的altField, 而不会影响自身button上的值的格式.]]></comment> <code><![CDATA[ $("#datepicker").datepicker({ altField: '#altField', altFormat: 'yy-mm-dd' }); $('#self_altField').datepicker({ altField: 'input[name=altFiled]', altFormat: 'yy-mm-dd' }); ]]></code> </demo> </demos> </option> <option name="appendText" default="空字符串"> <types> <type name="字符串"> </type> </types> <description><![CDATA[ 追加到datepicker控制field的后面的文本, 多用于提示信息., 比如指定需要的格式 ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').resizable({ animateDuration: 500 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var animateDuration = $('.selector').resizable('option', 'animateDuration');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').resizable('option', 'animateDuration', 500);]]></code> </demo> <demo> <comment><![CDATA[译者注: 我测试, 这东西只有datepicker控制field是有value的那种field才可以, 比如你设置一个div渲染得到的datepicker的appendText选项是无效的, 如下]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $("#datepicker").datepicker({ altField: '#altField', altFormat: 'yy-mm-dd', appendText: '(yy-mm-dd)' }); $('#self_altField').datepicker({ altField: 'input[name=altFiled]', altFormat: 'yy-mm-dd', appendText: '(yy-mm-dd)' }); }); // --></mce:script> <body> <div id="datepicker" style="width: 200px; height: 200px; border: 1px solid red;"></div> <input type="button" id="altField" /> <input type="button" id="self_altField" value="选择日期" /> <input type="button" name="altFiled" value="被动改变" /> <input type="button" name="altFiled" value="被动改变" /> <div name="altField" style="width: 80px; height: 80px; border: 1px solid black;"></div> </body> ]]></code> </demo> </demos> </option> <option name="buttonImage" default="空字符串"> <relatives> <innerrelative item="datepicker" type="option" name="buttonText"><![CDATA[设置了图片之后, buttonText指定的文本将以alt的方式出现, 也就是鼠标放到按钮上时显示.]]></innerrelative> <innerrelative item="datepicker" type="option" name="buttonImageOnly"><![CDATA[设置了buttonImageOnly后仅渲染指定的buttonImage而不会渲染按钮]]></innerrelative> <innerrelative item="datepicker" type="option" name="showOn"><![CDATA[需要使用showOn指定了与按钮有关的值(button或both)这里指定的button相关属性才会给渲染.]]></innerrelative> </relatives> <types> <type name="字符串"> </type> </types> <description><![CDATA[ 设定button按钮的背景图片路径. 也就是常见的日历控件后面加的那个用来点击招出日历的小图片]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[('.selector').datepicker({ buttonImage: '/images/datepicker.gif' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var buttonImage = $('.selector').datepicker('option', 'buttonImage');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif');]]></code> </demo> <demo> <comment><![CDATA[译者注: 下面例子中, buttonText指定的文本在鼠标放到图片上时显示. 并且只有点击图片才可以招出日历, 另外一点是只显示了图片自身(可以将buttonImageOnly改成false看看效果.) 测试时候请将图片替换成自己有的图片]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $('#self_altField').datepicker({ appendText: '(yy-mm-dd)', buttonImage: 'images/calendar.gif', buttonImageOnly: true, buttonText: '选择日期', showOn: 'button' }); }); // --></mce:script> <body> <input type="button" id="self_altField" value="选择日期(无效)" /> <input type="button" name="altFiled" value="被动改变" /> <input type="button" name="altFiled" value="被动改变" /> <div name="altField" style="width: 80px; height: 80px; border: 1px solid black;"></div> </body> ]]></code> </demo> </demos> </option> <option name="buttonImageOnly" default="false"> <types> <type name="布尔值"> </type> </types> <description><![CDATA[用来设定field后面招出日历的按钮的是否仅仅显示背景图片而不渲染整个按钮的样式]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ buttonImageOnly: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'buttonImageOnly', true);]]></code> </demo> </demos> </option> <option name="buttonText" default="..."> <types> <type name="字符串"> </type> </types> <description><![CDATA[ 用来设定field后面招出日历的按钮上的文本. 当设置了buttonImageOnly的时候, 这里设定的文本将以按钮的alt属性的文本来显示. 决定是否要显示那个按钮的选项是showOn.....当showOn值为'button'或'both'的时候, 按钮才会被渲染 ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ buttonText: 'Choose' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var buttonText = $('.selector').datepicker('option', 'buttonText');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'buttonText', 'Choose');]]></code> </demo> </demos> </option> <option name="changeMonth" default="false"> <types> <type name="布尔值"> </type> </types> <description><![CDATA[设定是否允许使用一个select下拉选择框的方式选择月份. 译者注: 建议设置为true, 因为日历控件本来就是为了方便选择日期, 而不用手动输入, 所以, 尽可能提供给用户一个快速选择到需要日期的路径.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ changeMonth: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var changeMonth = $('.selector').datepicker('option', 'changeMonth');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'changeMonth', true);]]></code> </demo> </demos> </option> <option name="changeYear" default="false"> <types> <type name="布尔值"> </type> </types> <description><![CDATA[设定是否允许使用一个select下拉选择框的方式选择年份. 译者注: 建议设置为true, 因为日历控件本来就是为了方便选择日期, 而不用手动输入, 所以, 尽可能提供给用户一个快速选择到需要日期的路径. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ changeYear: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var changeYear = $('.selector').datepicker('option', 'changeYear');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'changeYear', true);]]></code> </demo> </demos> </option> <option name="closeText" default="Done"> <types> <type name="字符串"> </type> </types> <description><![CDATA[设置日历控件渲染出来之后的关闭按钮上的文本. 需要设置showButtonPanel选项为true才会显示日历控件的辅助按钮.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ closeText: 'X' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var closeText = $('.selector').datepicker('option', 'closeText');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'closeText', 'X');]]></code> </demo> <demo> <comment><![CDATA[译者注: 这个没啥说的, 看看示例就明白了.]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $('#self_altField').datepicker({ closeText: '关闭咯', showButtonPanel: true }); }); // --></mce:script> <body> <input type="button" id="self_altField" value="选择日期" /> </body> ]]></code> </demo> </demos> </option> <option name="constrainInput" default="true"> <types> <type name="布尔值"> </type> </types> <description><![CDATA[设置是否约束输入, 默认为true表示不能自己输入时间, 设置为false后, 可以手动输入时间(输入无效格式或字符会忽略).]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ constrainInput: false });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var constrainInput = $('.selector').datepicker('option', 'constrainInput');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'constrainInput', false);]]></code> </demo> </demos> </option> <option name="currentText" default="Today"> <types> <type name="字符串"> </type> </types> <description><![CDATA[设置日历控件渲染出来之后的返回当天按钮上的文本. 需要设置showButtonPanel选项为true才会显示日历控件的辅助按钮. 译者注: 可以指定描述日期格式的字符串以显示代表的日期.但是这样设置的时候, 还必须设置navigationAsDateFormat为true, 比如 $('.selector').datepicker({ currentText: 'yy-mm-dd', navigationAsDateFormat: true }); ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ currentText: 'Now' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var currentText = $('.selector').datepicker('option', 'currentText');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'currentText', 'Now');]]></code> </demo> </demos> </option> <option name="dateFormat" default="mm/dd/yy"> <types> <type name="字符串"> <description><![CDATA[指定一个字符串形式的日期格式, 这里可以使用datepicker中预定义的那些字符串, 见第四个示例]]></description> </type> </types> <description><![CDATA[ 如果渲染为datepicker的field本身是有value的, 该设置会影响它的日期显示格式. 如果指定了altField但是没有指定altFormat, 该设置同时会应向altField的日期显示格式 如果指定了altField同时指定了altFormat, 那么altFormat指定的日期格式会影响altField的日期, 而dateFormat只会影响自己. 见第四个示例 ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ dateFormat: 'yy-mm-dd' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var dateFormat = $('.selector').datepicker('option', 'dateFormat');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd');]]></code> </demo> <demo> <comment><![CDATA[译者注: 这里演示的是dateFormat和altFormat同时存在时候的工作方式. ]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $('#self_altField').datepicker({ dateFormat: $.datepicker.ATO, altField: '#altField', altFormat: $.datepicker.ISO_8601 }); }); // --></mce:script> <body> <input type="text" id="self_altField" value="选择日期" /> <input type="text" id="altField" /> ]]></code> </demo> </demos> </option> <option name="dayNames" default="['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']"> <types> <type name="数组"> <description><![CDATA[长度为7的数组, 从星期一开始.]]></description> </type> </types> <description><![CDATA[设置格式中使用星期的全名的时候使用的名称. 主要用来配置国际化. 译者注: 一个程序一般而言, 对于同一个用户而言, 这些东西是只需要使用一种的, 没有必要给中国人同时显示中文和英文. 所以, 多数时候, 使用概览中介绍的$.datepicker.setDefaults()设置就可以了, 而不用具体到每个日历中去设置. 具体见第四个示例 ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']});]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var dayNames = $('.selector').datepicker('option', 'dayNames');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'dayNames', ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);]]></code> </demo> <demo> <comment><![CDATA[译者注: 尽量采用推荐的在全局去做这类属性的设置.]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $.datepicker.setDefaults({ dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] }); //上面是推荐的做法. 而且,在一般的web开发中, 应该都会存在一个公共的页面, 大家都去引用, 所以, 上面的代码一般都应该写在那个公共的页面中, 具体描述功能的页面中使用时就不需要再每个都去指定这种全局的东西. //如果一定要在每个页面单独加入, 那么直接设置该属性就可以了. $('#self_altField').datepicker({ dateFormat: $.datepicker.ATO, altField: '#altField', altFormat: 'yy-mm-dd DD' //, dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] }); }); // --></mce:script> <body> <input type="text" id="self_altField" value="选择日期" /> <input type="text" id="altField" /> </body> ]]></code> </demo> </demos> </option> <option name="dayNamesMin" default="['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']"> <types> <type name="数组"> <description><![CDATA[长度为7的数组, 从星期一开始.]]></description> </type> </types> <description><![CDATA[设置日历控件显示的时候, 每列的列头上的显示文本, 具体的设置和dayNames相同. 也推荐全局设置.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ dayNamesMin: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']});]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var dayNames = $('.selector').datepicker('option', 'dayNamesMin');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'dayNamesMin', ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);]]></code> </demo> </demos> </option> <option name="dayNamesShort" default="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"> <types> <type name="数组"> <description><![CDATA[长度为7的数组, 从星期一开始.]]></description> </type> </types> <description><![CDATA[设置日期格式显示中的简写的星期名称. 对应格式化字符串中的D]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']});]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var dayNames = $('.selector').datepicker('option', 'dayNamesShort');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'dayNamesShort', ['周日', '周一', '周二', '周三', '周四', '周五', '周六']);]]></code> </demo> </demos> </option> <option name="defaultDate" default="null"> <types> <type name="日期"> <description><![CDATA[原生的javascript日期]]></description> </type> <type name="数字"> <description><![CDATA[描述从本地当前时间的偏移天数, 比如-9就是9天前.]]></description> </type> <type name="字符串"> <description><![CDATA[ '1y +3m -5d'的方式指定, y代表年, m代表月, d代表天, w代表周 描述的是相对本地当前时间, 年, 月, 日分别产生指定偏移后的时间. 比如今天是2009年11月26日. 那么'1y +3m -5d'指的就是2011年2月21日. 注意, 由于当前11月, 再加3月后, 是14月, 此时, 会再将年份加1, 然后月份取余得到2月. 如果同时设置了minDate或maxDate限定了日历可描述的日期范围, 当指定的defaultDate超出范围时, 就会显示到对应的左/右边界的那一天. ]]></description> </type> </types> <description><![CDATA[设置刚打开日历的时候, 高亮的默认日期.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ defaultDate: +7 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var defaultDate = $('.selector').datepicker('option', 'defaultDate');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'defaultDate', +7);]]></code> </demo> </demos> </option> <option name="duration" default="normal"> <types> <type name="数字"> <description><![CDATA[开始打开到完全打开的毫秒数]]></description> </type> <type name="字符串"> <option> <value><![CDATA[slow]]></value> <comment><![CDATA[慢速打开]]></comment> </option> <option> <value><![CDATA[normal]]></value> <comment><![CDATA[中速打开]]></comment> </option> <option> <value><![CDATA[fast]]></value> <comment><![CDATA[快速打开]]></comment> </option> </type> </types> <description><![CDATA[设置日历控件打开的一个延时特效.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ duration: 'slow' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var duration = $('.selector').datepicker('option', 'duration');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'duration', 'slow');]]></code> </demo> </demos> </option> <option name="firstDay" default="0"> <types> <type name="数字"> <description><![CDATA[0代表星期天, 1代表星期一, 以此类推]]></description> </type> </types> <description><![CDATA[描述日历控件中星期几是第一天.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ firstDay: 1 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var firstDay = $('.selector').datepicker('option', 'firstDay'); ]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'firstDay', 1);]]></code> </demo> </demos> </option> <option name="gotoCurrent" default="false"> <types> <type name="布尔型"> </type> </types> <description><![CDATA[ 如果设置为true, 在选择了一个日期之后, 辅助按钮中的Today按钮的功能(跳转到本地时间今天)被替换成跳转到当前选中的日期. 如果没有选中的, 则还是跳转到本地时间的今天. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ gotoCurrent: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'gotoCurrent', true);]]></code> </demo> </demos> </option> <option name="hideIfNoPrevNext" default="false"> <types> <type name="布尔型"> <description><![CDATA[默认当由于设定的minDate/maxDate设置的日历可控制的日期范围之后, 日历翻到边界的时候, 向前/向后的按钮依旧是显示的, 设置这个属性为true之后, 在到达边界之后, 就可以把前/后按钮也隐藏了.]]></description> </type> </types> <description><![CDATA[描述日历控件中星期几是第一天.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ hideIfNoPrevNext: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'hideIfNoPrevNext', true);]]></code> </demo> </demos> </option> <option name="isRTL" default="false"> <types> <type name="布尔型"> </type> </types> <description><![CDATA[有些国家是从右向左的阅读顺序, 比如中国古代??呵呵, 设置了这个选项为true之后, 日历控件就是从右向左的顺序了. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ isRTL: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var isRTL = $('.selector').datepicker('option', 'isRTL');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'isRTL', true);]]></code> </demo> </demos> </option> <option name="maxDate" default="null"> <types> <type name="日期"> <description><![CDATA[原生的javascript日期]]></description> </type> <type name="数字"> <description><![CDATA[描述从本地当前时间的偏移天数, 比如-9就是9天前.]]></description> </type> <type name="字符串"> <description><![CDATA[ '1y +3m -5d'的方式指定, y代表年, m代表月, d代表天, w代表周 描述的是相对本地当前时间, 年, 月, 日分别产生指定偏移后的时间. 比如今天是2009年11月26日. 那么'1y +3m -5d'指的就是2011年2月21日. 注意, 由于当前11月, 再加3月后, 是14月, 此时, 会再将年份加1, 然后月份取余得到2月. ]]></description> </type> </types> <description><![CDATA[设置日历可以描述的最大日期, 也就是日历的最后一天.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ maxDate: '+1m +1w' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var maxDate = $('.selector').datepicker('option', 'maxDate');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'maxDate', '+1m +1w');]]></code> </demo> </demos> </option> <option name="minDate" default="null"> <types> <type name="日期"> <description><![CDATA[原生的javascript日期]]></description> </type> <type name="数字"> <description><![CDATA[描述从本地当前时间的偏移天数, 比如-9就是9天前.]]></description> </type> <type name="字符串"> <description><![CDATA[ '1y +3m -5d'的方式指定, y代表年, m代表月, d代表天, w代表周 描述的是相对本地当前时间, 年, 月, 日分别产生指定偏移后的时间. 比如今天是2009年11月26日. 那么'1y +3m -5d'指的就是2011年2月21日. 注意, 由于当前11月, 再加3月后, 是14月, 此时, 会再将年份加1, 然后月份取余得到2月. ]]></description> </type> </types> <description><![CDATA[设置日历可以描述的最小日期, 也就是日历的可以描述的最早的一天.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var minDate = $('.selector').datepicker('option', 'minDate'); ]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1));]]></code> </demo> </demos> </option> <option name="monthNames" default="['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']"> <types> <type name="数组"> <description><![CDATA[长度为12的数组, 从一月开始.]]></description> </type> </types> <description><![CDATA[设置格式中使用月份的全名的时候使用的名称. 主要用来配置国际化. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ monthNames: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份']});]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var monthNames = $('.selector').datepicker('option', 'monthNames');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'monthNames', ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份']);]]></code> </demo> </demos> </option> <option name="monthNamesShort" default="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"> <types> <type name="数组"> <description><![CDATA[长度为12的数组, 从一月开始.]]></description> </type> </types> <description><![CDATA[设置格式中使用月份的简写名的时候使用的名称. 主要用来配置国际化. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']});]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'monthNamesShort', ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']);]]></code> </demo> </demos> </option> <option name="navigationAsDateFormat" default="false"> <types> <type name="布尔型"> </type> </types> <description><![CDATA[设置prevText, nextText, currentText选项设置的文本是否使用格式化日期的方式显示文本. 也就是说指定一个格式串然后显示对应的日期. 译者注: 具体见第四个demo]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ navigationAsDateFormat: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'navigationAsDateFormat', true);]]></code> </demo> <demo> <comment><![CDATA[ 译者注: 运行代码后, 注意看Today的那个按钮显示的内容, 还有前/后翻日历的按钮的alt文本(鼠标放上面会显示) ]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $('#datepicker').datepicker({ showButtonPanel: true, gotoCurrent: true, currentText: 'yy-mm-dd', prevText: 'mm月', nextText: 'm月', navigationAsDateFormat: true }); }); // --></mce:script> <body> <input type="text" id="datepicker" /> </body> ]]></code> </demo> </demos> </option> <option name="nextText" default="Next"> <types> <type name="字符串"> </type> </types> <description><![CDATA[设置控件中向后翻一月的按钮的alt文本]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ nextText: 'Later' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var nextText = $('.selector').datepicker('option', 'nextText');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'nextText', 'Later');]]></code> </demo> </demos> </option> <option name="numberOfMonths" default="1"> <types> <type name="数字"> </type> <type name="数组"> <description><![CDATA[两个整数类型的元素, 第一个指定的是行数, 第二个指定的是列数]]></description> </type> </types> <description><![CDATA[设置一次显示几个月. 慎用, 一次显示多个会造成用户体验降低. 因为一次渲染多个耗时比较长.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ numberOfMonths: [2, 3] });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'numberOfMonths', [2, 3]);]]></code> </demo> </demos> </option> <option name="prevText" default="Prev"> <types> <type name="字符串"> </type> </types> <description><![CDATA[设置控件中向前翻一月的按钮的alt文本]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ prevText: 'Earlier' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var prevText = $('.selector').datepicker('option', 'prevText');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'prevText', 'Earlier');]]></code> </demo> </demos> </option> <option name="shortYearCutoff" default="+10"> <types> <type name="数字"> </type> <type name="字符串"> </type> </types> <description><![CDATA[描述使用两位的年份表示的格式中提供一个0-99的年份之后, 具体是指哪一年的问题. 详细使用参见概览中$.datepicker.parseDate方法中关于shortYearCutoff的解释.]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ shortYearCutoff: 50 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'shortYearCutoff', 50);]]></code> </demo> </demos> </option> <option name="showAnim" default="show"> <types> <type name="字符串"> </type> </types> <description><![CDATA[设置日历控件出现的特效. 按照源码中的实现来看, 应该会有对应的隐藏特效, 并且, 源码中有相应的代码, 但是, 我没有测试出来隐藏特效.'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.等所有的特效都可以接受. 使用特效就需要引入相关的js文件. 或者使用整体的js. 具体每个特效的参数使用选项showOptions设置. 至于每个选项的具体含义参见effects部分. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ showAnim: 'fold' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var showAnim = $('.selector').datepicker('option', 'showAnim');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'showAnim', 'fold');]]></code> </demo> </demos> </option> <option name="showButtonPanel" default="false"> <types> <type name="布尔型"> </type> </types> <description><![CDATA[设置是否渲染日历控件中的辅助操作按钮面板..]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ showButtonPanel: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'showButtonPanel', true);]]></code> </demo> </demos> </option> <option name="showCurrentAtPos" default="0"> <types> <type name="数字"> </type> </types> <description><![CDATA[ 译者注: 理解该属性首先要理解多月显示的模式. 在numberOfMonths选项中, 可以看到它的默认值是1, 也就是说默认情况下我们看到的其实就是多月模式, 只不过是1个月而已. 另外一点, 我们选择一个日期的时候, 当前日历的选中日期就是那一天. 显示出来的第一个月的序号看作是0 showCurrentAtPos说的就是当前选中日期所在那个月相对显示出来的月份中的第一个月份之间的偏移数. 这个值是可以设置的比numberOfMonths大的, 由于超出来显示的月份, 所以, 是不会显示的, 但是偏移值是正确的. 这个值也可以设置为负值, 但是我测试设置为负值之后, 跨年会有bug. 另外一方面, 如果是用数组方式指定的numberOfMonths, 那么, 对应的顺序是先从左到右, 然后自上而下. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ showCurrentAtPos: 3 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'showCurrentAtPos', 3);]]></code> </demo> </demos> </option> <option name="showMonthAfterYear" default="false"> <types> <type name="布尔型"> </type> </types> <description><![CDATA[设置日历控件显示中, 每月的头信息部分, 月份在年份后面]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ showMonthAfterYear: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'showMonthAfterYear', true);]]></code> </demo> </demos> </option> <option name="showOn" default="focus"> <types> <type name="字符串"> <option> <value><![CDATA[focus]]></value> <comment><![CDATA[得到焦点的时候]]></comment> </option> <option> <value><![CDATA[button]]></value> <comment><![CDATA[后面追加的按钮点击后]]></comment> </option> <option> <value><![CDATA[both]]></value> <comment><![CDATA[得到焦点或后面追加的按钮点击后]]></comment> </option> </type> </types> <description><![CDATA[设置日历渲染的时机. 译者注: 设置为button, 或both的时候, 就会给field后面追加一个按钮. 也只有这样, 对button相关的设置才是有效的. ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ showOn: 'both' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var showOn = $('.selector').datepicker('option', 'showOn');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'showOn', 'both');]]></code> </demo> </demos> </option> <option name="showOptions" default="{}"> <types> <type name="对象"> </type> </types> <description><![CDATA[根据showAnim设定的特效类型, 设置对应的特效options, 具体每种特效有哪些options参见特效部分]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ showOptions: {direction: 'up' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var showOptions = $('.selector').datepicker('option', 'showOptions');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'showOptions', {direction: 'up');]]></code> </demo> <demo> <comment><![CDATA[译者注: 这里做一个size的特效作为示例, 这个属性的设置主要还是依赖于特效那一块..]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $('#datepicker').datepicker({ showAnim: 'size', showOptions: { from: { width: 80, height: 80 }, to: { width: 200, height: 200 } }, duration: 2000 }); }); // --></mce:script> <body> <input type="text" id="datepicker" /> </body> ]]></code> </demo> </demos> </option> <option name="showOtherMonths" default="false"> <types> <type name="布尔型"> </type> </types> <description><![CDATA[由于日历控件中的每月都是以表格形式显示, 所以总会导致一个表格能够描述的日期总会在之前或之后有上一月或下一月的几天, 设置这个属性为true之后, 就会显示那些不属于本月但又从逻辑上来讲应该在日历上的days]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ showOtherMonths: true });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths'); ]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'showOtherMonths', true);]]></code> </demo> </demos> </option> <option name="stepMonths" default="1"> <types> <type name="整数"> </type> </types> <description><![CDATA[用来设置前/后翻日历的按钮一次翻过几个月. 建议在使用多月显示的时候, 设置这个stepMonths提高用户体验. 详细见第四个demo]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ stepMonths: 3 });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var stepMonths = $('.selector').datepicker('option', 'stepMonths');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'stepMonths', 3);]]></code> </demo> <demo> <comment><![CDATA[译者注: 一次显示3个月, 那么就需要一次翻过3个月(一般情况)]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $('#datepicker').datepicker({ numberOfMonths: 3, stepMonths: 3 }); }); // --></mce:script> <body> <input type="text" id="datepicker" /> </body> ]]></code> </demo> </demos> </option> <option name="yearRange" default="-10:10"> <types> <type name="字符串"> </type> </types> <description><![CDATA[当设置了changeYear选项为true的时候, 需要用yearRange来设置可以选择哪些年份. 这里, yearRange就是设置范围的. 方式1: -number1:+number2 表示以当前年份为中间, 向前可以选择到之前的number1年, 向后可以选择到number2年. 方式2: year1: year2 表示从year1 到year2, 可以是任意整数 ]]></description> <demos> <demo> <comment><![CDATA[初始化]]></comment> <code><![CDATA[$('.selector').datepicker({ yearRange: '2000:2010' });]]></code> </demo> <demo> <comment><![CDATA[获取属性值]]></comment> <code><![CDATA[var yearRange = $('.selector').datepicker('option', 'yearRange');]]></code> </demo> <demo> <comment><![CDATA[设置属性值]]></comment> <code><![CDATA[$('.selector').datepicker('option', 'yearRange', '2000:2010');]]></code> </demo> </demos> </option> </options> <events> <event name="beforeShow"> <trigger><![CDATA[datepicker显示之前]]></trigger> <arguments> <argument name="input"> <![CDATA[已经经过jquery处理的原生HTML DOM元素对象, 就是被自己渲染成datepicker的那个元素. 比如$('#datepicker').datepicker();渲染之后, 那么它的beforeShow事件响应函数接受到的input参数就是id为datepicker的那个元素]]> </argument> </arguments> <description><![CDATA[该事件的响应函数必须返回一个对象, 返回的对象实际上就是一个options选项的配置....datepicker插件会根据返回的options去渲染日历插件. 详细见第二个demo]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code><![CDATA[ $('.selector').datepicker({ beforeShow: function(input) { ... } }); ]]></code> </demo> <demo> <comment><![CDATA[当我们需要根据文本框中的值不同给出不同的日历控件的时候, 就可以使用这个事件 示例中, 如果文本框中没有值, 就显示一个普通的datepicker, 如果里面的值在当前时间之前, 显示一个2行3列的日历, 如果里面的值在当前时间之后, 显示一个3行2列的日历. ]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- var i = 0; $(function() { $('#datepicker').datepicker({ beforeShow: function(input) { var current = $(input).val(); current = $.datepicker.parseDate('mm/dd/yy', current); if(!current) { return {}; } else if(current < new Date()) { return {numberOfMonths: [2, 3]}; } else { return {numberOfMonths: [3, 2]}; } } }); }); // --></mce:script> <body> <input type="text" id="datepicker" /> </body> ]]></code> </demo> </demos> </event> <event name="beforeShowDay"> <trigger><![CDATA[每渲染一个Day触发一次.]]></trigger> <arguments> <argument name="date"> <![CDATA[当前渲染的日期]]> </argument> </arguments> <description><![CDATA[ 这个事件的响应函数接受一个参数, 就是当前正在渲染的日期, 必须返回一个数组, 并且, 数组的第一个元素是一个布尔值, 用来指示当前渲染的日期是否是选中的, 第二个元素是CSS样式名称, 用来指定这一天用哪个样式来渲染, 如果不指定样式, 就指定为空字符串'', 第三个参数是一个文本, 该文本是鼠标移到这一天之后显示的文本, 也就是常说的alt文本. ]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code><![CDATA[ $('.selector').datepicker({ beforeShowDay: function(date) { ... } }); ]]></code> </demo> <demo> <comment><![CDATA[ 译者注: 下面的示例中, 就通过beforeShowDay事件作出了周末加背景色的效果, 并且选择本地时间当天, 鼠标移到每天之后, 显示是哪年哪月哪日. ]]></comment> <code><![CDATA[ <mce:style type="text/css"><!-- .weekday{background: red;} --></mce:style><style type="text/css" mce_bogus="1">.weekday{background: red;}</style> <mce:script type="text/javascript"><!-- var i = 0; $(function() { $('#datepicker').datepicker({ beforeShowDay: function(date) { var; var css_style = ''; if(date.getDate() == new Date().getDate()) { selected = true; } if(date.getDay() == 0 || date.getDay() == 6) { css_style = 'weekday'; } var tooltip = $.datepicker.formatDate('yy年mm月dd日', date); return [selected, css_style, tooltip]; } }); }); // --></mce:script> </head> <body> <div id="msg" style="color: red;" mce_style="color: red;"></div> <input type="text" id="datepicker" /> </body> ]]></code> </demo> </demos> </event> <event name="onChangeMonthYear"> <trigger><![CDATA[日历的年份或月份发生变化后触发]]></trigger> <arguments> <argument name="year"> <![CDATA[变化之后的年份.]]> </argument> <argument name="month"> <![CDATA[变化之后的月份]]> </argument> <argument name="inst"> <![CDATA[当前的datepicker对象实例.]]> </argument> </arguments> <description><![CDATA[ 允许通过这个事件来处理一些需要自己扩展的事件功能. 在事件响应函数中, this引用的是渲染了datepicker输入框. ]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code><![CDATA[ $('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } }); ]]></code> </demo> <demo> <comment><![CDATA[ 译者注: 下面的处理仅仅是对整个日历控件加了一个click事件. 需要的话, 可以对照datepicker的DOM模型随意添加自己的事件. inst.dpDiv可以获取到日历控件对象整体的经过jquery包装的DOM对象 以示例中代码形成的datepicker为例, 其DOM模型代码如下: <div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"> <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> <a title="Prev" class="ui-datepicker-prev ui-corner-all"> <span class="ui-icon ui-icon-circle-triangle-w"></span> </a> <a title="Next" class="ui-datepicker-next ui-corner-all"> <span class="ui-icon ui-icon-circle-triangle-e"></span> </a> <div class="ui-datepicker-title"> <span class="ui-datepicker-month"></span> <span class="ui-datepicker-year"></span> </div> </div> <table class="ui-datepicker-calendar"> <thead> <tr> <th class="ui-datepicker-week-end"> <span title="Sunday"></span> </th> <th> <span title="Monday"></span> </th> <th> <span title="Tuesday"></span> </th> <th> <span title="Wednesday"></span> </th> <th> <span title="Thursday"></span> </th> <th> <span title="Friday"></span> </th> <th class="ui-datepicker-week-end"> <span title="Saturday"></span> </th> </tr> </thead> <!-- tbody里面显示的就是每一天的表格. --> <tbody> <tr> <!-- 上一月或下一月的日期, 如果没有设置showOtherMonths选项就不会被渲染, 所以, 这个td里面没有a标签 --> <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><!-- 这个是需要渲染的日期, 里面用a标签来实现. --> <td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> <a class="ui-state-default"></a> </td> </tr> </tbody> </table> </div> ]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- var i = 0; $(function() { $('#datepicker').datepicker({ onChangeMonthYear: function(year, month, inst) { inst.dpDiv.bind('click', function(event) {alert('没事不要乱点我, 要罚款的哦~~!~');}); } }); }); // --></mce:script> <body> <div id="msg" style="color: red;" mce_style="color: red;"></div> <input type="text" id="datepicker" /> </body> ]]></code> </demo> </demos> </event> <event name="onClose"> <trigger><![CDATA[日历控件被关闭的时候.]]></trigger> <arguments> <argument name="dateText"> <![CDATA[选择的日期被格式化后的文本形式.]]> </argument> <argument name="inst"> <![CDATA[日历控件对象实例]]> </argument> </arguments> <description><![CDATA[ 允许通过这个事件来处理一些需要自己扩展的事件功能. 在事件响应函数中, this引用的是渲染了datepicker输入框. ]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code><![CDATA[ $('.selector').datepicker({ onClose: function(dateText, inst) { ... } }); ]]></code> </demo> <demo> <comment><![CDATA[译者注: 下面的示例中, 实现的是不通过设置altField, 但是同样在关闭的时候, 将选择了的日期文本显示到指定位置.]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- var i = 0; $(function() { $('#datepicker').datepicker({ onClose: function(dateText, inst) { $('#msg').text(dateText); } }); }); // --></mce:script> <body> <div id="msg" style="color: red;" mce_style="color: red;"></div> <input type="text" id="datepicker" /> </body> ]]></code> </demo> </demos> </event> <event name="onSelect"> <trigger><![CDATA[选择了一个日期之后]]></trigger> <arguments> <argument name="dateText"> <![CDATA[选择的日期被格式化后的文本形式.]]> </argument> <argument name="inst"> <![CDATA[日历控件对象实例]]> </argument> </arguments> <description><![CDATA[ 允许通过这个事件来处理一些需要自己扩展的事件功能. 在事件响应函数中, this引用的是渲染了datepicker输入框. ]]></description> <demos> <demo> <comment><![CDATA[初始化时设置事件]]></comment> <code><![CDATA[ $('.selector').datepicker({ onSelect: function(dateText, inst) { ... } }); ]]></code> </demo> </demos> </event> </events> <methods> <method name="destroy"> <description><![CDATA[完全移除一个datepicker控件, 使其回退到该元素被初始化成datepicker控件之前的状态.]]></description> <demos> <demo> <code><![CDATA[$(".selector").datepicker('destroy');]]></code> </demo> </demos> </method> <method name="disable"> <description><![CDATA[将可datepicker控件样式改变成为失效, 与enable对应.]]></description> <demos> <demo> <code><![CDATA[$(".selector").datepicker('disable');]]></code> </demo> </demos> </method> <method name="enable"> <description><![CDATA[将datepicker控件样式改变为允许, 与disable对应.]]></description> <demos> <demo> <code><![CDATA[$(".selector").datepicker('enable');]]></code> </demo> </demos> </method> <method name="option"> <arguments> <argument name="optionName " type="字符串"><![CDATA[选项一节中列举的所有选项名都可用]]></argument> <argument name="value" type="任意"><![CDATA[该选项可以接受的任意数据值.]]></argument> </arguments> <description><![CDATA[获取或设置datepicker控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置. ]]></description> <demos> <demo> <code><![CDATA[$(".selector").datepicker('option', optionName[, value]);]]></code> </demo> </demos> </method> <method name="dialog"> <description><![CDATA[在一个指定的元素内渲染一个datepicker控件. 译者注: 由于直接渲染会添加一个莫名的input输入框, 所以可以加入$('.ui-datepicker').next().hide();把那个input输入框给去掉. ]]></description> <arguments> <argument name="dateText" type="字符串"><![CDATA[指定默认的时间]]></argument> <argument name="onSelect" type="函数"><![CDATA[在新渲染出来的日历中选择了一天之后的事件, 该事件和datepicker的onSelect的处理方式一样, 也接受dateText和日历控件的实例两个参数]]></argument> <argument name="settings" type="对象"><![CDATA[和普通创建一个datepicker对象时配置的options对象同理]]></argument> <argument name="pos" type="数字"><![CDATA[[x, y]的一个数组, 描述的是新渲染出来的日历的左上角相对于浏览器窗口内容区域的左上角的位置.]]></argument> </arguments> <demos> <demo> <comment><![CDATA[译者注: 下面的代码就是将一个日历控件渲染到一个目标按钮中, 但是, 该日历第二次显示会有错误. 原因不明.]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { display = function() { $('#datepicker').datepicker( 'dialog', $.datepicker.formatDate('mm/dd/yy', new Date()), function(dateText, inst) { alert(dateText); }, {showButtonPanel: true}, [12, 32] ); $('.ui-datepicker').next().hide(); } }); // --></mce:script> <body> <input type="button" id="datepicker" style="color: black; width: 200px; height: 230px; border: 1px solid black;"> </input> <input type="button" value="display" onclick="display();" style="background: #88EECC" mce_style="background: #88EECC" /> </body>]]></code> </demo> </demos> </method> <method name="isDisabled"> <description><![CDATA[判断指定的datepicker是否是disabled的]]></description> <demos> <demo> <comment><![CDATA[译者注: 下面的代码展示了isDisabled的一个小bug, 在这里如果通过disable方法, 设置了datepicker1是disable的, 弹出的true, 设置了datepicker2是disable的, 则会弹出false, 这就说明在使用isDisabled方法判断时, 如果给定的选择器可以选择到多个元素, 那么会按照顺序取第一个进行判断, 而不管其他的是否设置了disable]]></comment> <code><![CDATA[ <mce:script type="text/javascript"><!-- $(function() { $('#datepicker1').datepicker(); $('#datepicker2').datepicker(); //$('#datepicker1').datepicker('disable'); $('#datepicker2').datepicker('disable'); alert($('input').datepicker('isDisabled')); }); // --></mce:script> </head> <body> <input type="button" id="datepicker1" style="color: black; width: 200px; height: 230px; border: 1px solid black;"> </input> <input type="button" id="datepicker2" value="display" style="background: #88EECC" mce_style="background: #88EECC" /> </body> ]]></code> </demo> </demos> </method> <method name="hide"> <description><![CDATA[将指定的datepicker隐藏]]></description> <demos> <demo> <comment><![CDATA[speed是可选参数, 指定隐藏共使用的时间.]]></comment> <code><![CDATA[$(".selector").datepicker('hide'[, speed]);]]></code> </demo> </demos> </method> <method name="show"> <description><![CDATA[显示指定的datepicker]]></description> <demos> <demo> <code><![CDATA[$(".selector").datepicker('show');]]></code> </demo> </demos> </method> <method name="getDate"> <description><![CDATA[获取日历控件当前选中的日期. 如果没有选中的, 返回null,]]></description> <demos> <demo> <code><![CDATA[$(".selector").datepicker('getDate');]]></code> </demo> </demos> </method> <method name="setDate"> <description><![CDATA[设置日历控件选中日期, 可以使用defaultDate选项中的那种'+5y -5d'的方式设置一个相对本地当前时间的一个偏移]]></description> <demos> <demo> <code><![CDATA[$(".selector").datepicker('setDate', date);]]></code> </demo> </demos> </method> </methods> <theme><![CDATA[ jquery.ui.datepicker插件使用了jquery.ui的css框架样式使它看起来更舒服, 包含一些颜色和背景等, 推荐使用jquery的在线样式定制来修改主题. 如果需要深层次的自定义样式, 可以修改ui.datepicker.css这个样式表来达到预期效果. 下面代码是一个最终生成的最简单的datepicker控件的DOM代码, 这些代码可以帮助理解整个datepicker控件的结构以便更方便的修改css. <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"> <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> <div class="ui-datepicker-title"> <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span> </div> </div> <table class="ui-datepicker-calendar"> <thead> <tr> <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> ... </tr> </thead> <tbody><tr> <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td> ... </tr> </tbody> </table> <div class="ui-datepicker-buttonpane ui-widget-content"> <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button> <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button> </div> </div> ]]></theme> <summarize><![CDATA[ altField, altFormat: 设置联动改变的输入框相关信息 appendText: field后面追加的提示文本 buttonImage, buttonImageOnly, buttonText: 设置打开日历的按钮的相关属性 changeMonth, changeYear, yearRange: 设置可以选择的月份和年份及其相关 closeText, currentText, nextText, prevText, navigationAsDateFormat, showButtonPanel: 设置辅助按钮及其相关 constrainInput: 设置是否允许用户输入日期 dateFormat, showMonthAfterYear: 设置相关位置的日期格式 dayNames, dayNamesMin, dayNamesShort, monthNames, monthNamesShort: 设置相关的本地化信息. defaultDate, firstDay: 设置日历控件的一些初始属性 duration, showAnim, showOptions: 设置日历控件渲染时的一些动作特效 gotoCurrent: 设定跳转到当前选中天数可用 hideIfNoPrevNext, showOtherMonths, stepMonths: 设置使日期控件逻辑上更健壮的一些属性, isRTL: 适应一些特殊语种 maxDate, minDate: 设定日历表述的范围 numberOfMonths, showCurrentAtPos: 多月模式相关设定 shortYearCutoff: 强化两位年的描述能力 showOn: 设定日历控件的显示的触发条件 ]]--></summarize> </translate> </project>