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. Eclipse启动报错Java was started but returned exit code=13

    启动Eclipse的时候报错Java was started but returned exit code=13,这个错误的原因是由于eclipse版本与jdk版本不符导致的,可能你的eclipse是 ...

  2. wamp下开启SSL,解决APACHE启动问题

    wamp开启SSL解决wamp5_1.7.4中APACHE启动问题 1.#修改httpd.conf文件LoadModule ssl_module modules/mod_ssl.soInclude c ...

  3. Sersync实时同步企业应用配置实战

    一.实验环境 CentOS版本: 6.6(2.6.32.-504.el6.x86_64) Rsync版本:  Rsync-3.0.6(系统自带) Sersync版本:sersync2.5.4_64bi ...

  4. 简单的powershell 批量生成身份证复印件

    用Powshell 脚本批量完成,代码比较简单,出生日期,图片我都没有改,图片用于测试,附件. cls; $path = Split-Path -Parent $MyInvocation.MyComm ...

  5. Django视图函数

    一.视图函数 1. 视图函数的第一个参数一定是一个HTTPRequest类型的对象,这个对象是Django自动创建的,具体形参名通常用request.通过这个对象,可以调用请求的一些参数,比如requ ...

  6. UNICODE编码表

    UNICODE简介 Unicode(统一码.万国码.单一码)是一种在计算机上使用的字符编码.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进 ...

  7. 【gradle】 入门

    robin@robin-PC2 /D/JavaWorkSpace/payment/alipay-wap (master)$ ./gradlew idea

  8. UrlConnection doPost Https请求 、编码设置

    UrlConnection doPost Https请求 .编码设置 UrlConnection doPost方法 /** * 发送POST请求 * * @param url 请求地址url * @p ...

  9. iOS开发 AFNetworking 3.0使用遇到的问题

    前段时间写了一个iOS开发之AFNetworking 3.0.4使用这篇文章,是基本的用法,昨天在使用的时候又出现了几个问题,特地俩记录下,希望能帮到大家! 问题一 我是做一个获取手机验证码的功能,进 ...

  10. Memcached(五)Memcached的并发实例

    package com.sinosuperman.memcached; import java.io.IOException; import java.net.InetSocketAddress; i ...