jQuery Tools DateInput使用详解

最新推荐文章于 2022-05-11 15:23:44 发布

万宝哥

最新推荐文章于 2022-05-11 15:23:44 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/tinico/article/details/18033531

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了jQueryToolsDateInput插件的使用方法，包括样式定制、参数配置、API方法及事件处理等内容，并提供了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

参数

默认值

说明

css

Object

日历表CSS样式定义

firstDay

一周的第一天. 周末 = 0, 周一 = 1 等 ….

format

'mm/dd/yy'

表单input输入框中显示的日期格式

lang

'en'

本地化语言，默认只提供英文，需要自行定义

max

最大可选日期

min

最小可选日期

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(){}