JQuery datepicker 用法

 

jQuery UI很强大，其中的日期选择插件Datepicker是一个配置灵活的插件，我们可以自定义其展示方式，包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
官方地址：http://docs.jquery.com/UI/Datepicker，官方示例： http://jqueryui.com/demos/datepicker/。

一个不错的地址，用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/

DatePicker基本使用方法：


<!DOCTYPE html>

<html>

<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>

  $(document).ready(function() {

    $("#datepicker").datepicker();

  });

  </script>

</head>

<body style="font-size:62.5%;">

<div type="text" id="datepicker"></div>

</body>

</html>

page up/down - 上一月、下一月

ctrl+page up/down - 上一年、下一年

ctrl+home - 当前月或最后一次打开的日期

ctrl+left/right - 上一天、下一天

ctrl+up/down - 上一周、下一周

enter - 确定选择日期

ctrl+end - 关闭并清除已选择的日期

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 : false

  Set 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) { ... } });

JQuery datepicker 用法的更多相关文章

  1. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  2. jQuery $.each用法[转]

    jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...

  3. 日期选择器：jquery datepicker的使用

    helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui     在jquery ui中,提供了一个非常实用 ...

  4. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  5. jquery cookie 用法

    jquery cookie 用法 $.cookie("name","value","options")  当不设置options时,此coo ...

  6. [转]Jquery Ajax用法

    原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源:   时间 ...

  7. jquery.cookie用法详细解析，封装的操作cookie的库有jquery.cookie.js

    jquery.cookie用法详细解析 需要注意存入cookie前,对数据进行序列化, 得到后在反序列化: 熟练运用:JSON.stringify();和JSON.parse(): 通常分为如下几个步 ...

  8. jquery.post用法补充(type设置问题)

    jquery.post用法 http://blog.csdn.net/itmyhome1990/article/details/12578275 当使用ajax获取data数据的时候,直接data.f ...

  9. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

随机推荐

  1. OpenJudge 2810(1543) 完美立方 / Poj 1543 Perfect Cubes

    1.链接地址: http://bailian.openjudge.cn/practice/2810/ http://bailian.openjudge.cn/practice/1543/ http:/ ...

  2. linux 配置Socks5

    1.配置 Socks5 编译环境. yum -y install gcc automake autoconf libtool make 2.安装 Socks5 需要的包. yum -y install ...

  3. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

  4. 压力测试之apache benchmark

    ab 的全称是 ApacheBench , 是 Apache 附带的一个小工具 , 专门用于 HTTP Server 的 benchmark testing , 可以同时模拟多个并发请求.前段时间看到 ...

  5. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  6. django1.6之mysql配置

    # Database# https://docs.djangoproject.com/en/1.6/ref/settings/#databases setting 配置修改 INSTALLED_APP ...

  7. 基于C#的SolidWorks插件开发(1)--SolidWorks API接口介绍

    这是两年前毕业时写的一篇关于SolidWorks插件开发与公司PDM集成的毕业设计,最近闲来无事拿出来整理一下,大神们可以略过. 1.1   SolidWorks API接口 正确调用SolidWor ...

  8. 关于appStore评分的相关说明--转自张诚教授

    在iOS7以前,评分地址如下 itms-apps://ax.itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?typ ...

  9. python 进程信息

    通过psutil模块读取机器进程信息: #-*- coding: UTF-8 -*-import psutil;import osimport CommMethod '''获取机器当前进程信息'''d ...

  10. python里面的几个编码函数

    时不时的被编码折腾一下 >>> print urllib.quote('中国') %E4%B8%AD%E5%9B%BD >>> s = '%E4%B8%AD%E5% ...