jQuery Tools DateInput使用详解

先看看样式丰富功能强大的jQuery Tools DateInput截图



首先载入jquery tools插件，要使用DateInput的话还需要载入日历表的CSS样式表，不同的样式表就可以呈现上面截图中的各种样式，样式表可以到官方网站下载，甚至你可以自行修改定义

然后来看看详细的参数用法

参数	默认值	说明
css	Object	日历表CSS样式定义
firstDay	0	一周的第一天. 周末 = 0, 周一 = 1 等 ….
format	'mm/dd/yy'	表单input输入框中显示的日期格式
lang	'en'	本地化语言，默认只提供英文，需要自行定义
max	0	最大可选日期
min	0	最小可选日期
offset	[0, 0]	日历表位置偏移量
selectors	false	是否显示年份和月份的下拉列表
speed	100	日历表显示速度
trigger	false	是否使用日历表打开按钮，如果为true，默认按钮为<A class='caltrigger'>的一个标签
value		input文本框中的初始文本，可以为任意值，不限于标准日期格式，如：Today
yearRange	[-5, 5]	年份选择范围

input文本框可用的属性

属性	说明
disabled	是否禁用日期输入，如果禁用，则日历框也不会弹出
max	可选的最大日期
min	可选的最小日期
readonly	是否只读，如果只读，则可以弹出日历框但无法选择
value	input文本框中的初始文本，可以为任意值，不限于标准日期格式，如：Today
data-value	初始日期值

示例：

API

方法	返回值	说明
addDay(amount)	API	移动当前选中日期，如果参数为空，则当前选中日期后移一天
addMonth(amount)	API	改变当前月份，如果参数为空，则显示下一个月的日历表。当前选中日期不变
addYear(amount)	API	改变当前年份，如果参数为空，则显示下一年的日历表。当前选中日期不变
getConf()	Object	获取当前实例的参数配置
getCalendar()	jQuery	获取日历表对象
getInput()	jQuery	获取日期输入框
getValue()	Date	获取当前选中日期
getValue(format)	String	获取格式化后的当前选中日期
hide()	API	隐藏日历表
isOpen()	boolean	测试日历表是否已经被打开
setMax(value, [fit])	API	设置最大可选日期，fit参数默认为false，如果为true，且当前选中日期超过最大可选日期，则自动将当前选中日期调整到最大可选日期
setMin(value, [fit])	API	设置最小可选日期，fit参数默认为false，如果为true，且当前选中日期小于最小可选日期，则自动将当前选中日期调整到最小可选日期
setValue(date)	API	设置当前日期，如果参数为空，日历表会自动跳转到当前日期所在月份
setValue(year, month, day)	API	设置当前日期的另一种形式
show()	API	显示日历表
today()	API	跳转到今日

事件

事件名称	何时发生
onBeforeShow	日历表显示之前
onShow	日历表完全显示完毕之后
change	选中日期被改变后
onHide	日历表隐藏时发生，如果返回false则日历表不会被关闭

完整使用方法演示

$(function(){
    $.tools.dateinput.localize("zh-cn",  {
        months:        '一月,二月,三月,四月,五月,六月,七月,' +
                       '八月,九月,十月,十一月,十二月',
        shortMonths:   '一月,二月,三月,四月,五月,六月,七月,' +
                       '八月,九月,十月,十一月,十二月',
        days:          '周日,周一,周二,周三,周四,周五,周六',
        shortDays:     '日,一,二,三,四,五,六'
    });
    $("input[name='startdate'],input[name='enddate']").dateinput({
        lang: 'zh-cn',
        format: 'yyyy-mm-dd',
        offset: [0, 0],
        selectors: true,
        css: {input:'selert2'}
    });
    //[开始日期]决定[结束日期]的最小值
    $("input[name='startdate']").data("dateinput").change(function() {
        var enddate_obj = $("input[name='enddate']").data("dateinput");
        var enddate_min = new Date( this.getValue() );//此处必须新实例化一个日期，否则后面的操作直接影响this对象
        enddate_min.setDate(enddate_min.getDate() + 1);//结束日期的最小值设为开始日期的后一天
        
        //当结束日期的最小值限定小于其当前日期就不会触发结束日期的change()事件
        //所以这里主动调用一下
        //而反之则会触发结束日期的change()事件，此处就不要执行日期改变动作
        if(enddate_min <  enddate_objgetValue br>            myfunc();
        }
        enddate_obj.setMin(enddate_min, true);
    });
    //[结束日期]改变时触发
    $("input[name='enddate']").data("dateinput").change(function() {
        myfunc();
    });
});
function myfunc(){}