手机端日期时间插件lCalendar.js

本文详细介绍了LCalendar日期选择器的使用方法,包括如何在HTML页面中引入和配置,以及如何通过JS初始化插件。同时,还提供了设置最小和最大日期限制的示例,以及如何处理多个日期选择器的实例。

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

1.页面引入样式css

...  

2.页面引入js

3.页面样式书写–在html页面中引入input标签,通过自定义属性data-lcalendar控制最小日期和最大日期


...  

4.在js中初始化插件:


var calendar = new LCalendar();
calendar.init({
    ‘trigger’: ‘#demo1’,//标签id
    ‘type’: ‘date’,//date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择
    ‘minDate’:‘1900-1-1’,//最小日期 注意:该值会覆盖标签内定义的日期范围
    ‘maxDate’:‘2016-3-18’//最大日期 注意:该值会覆盖标签内定义的日期范围
});

//LCalendar时间选择组件(当有开始和结束两个时间弹框选择,初始化两个)
    LCalendar:function () {
        var calendar = new LCalendar();
        calendar.init({
            ‘trigger’: ‘#StartTime’, //标签id
            ‘type’: ‘date’, 
            ‘minDate’:currentTime(), //最小日期
            ‘maxDate’: endTime(), //最大日期
            ‘clickcallback’:function(date){
           //回调
            }            
        });
        var calendardatetime = new LCalendar();
        calendardatetime.init({
            ‘trigger’: ‘#EntTime’,
            ‘type’: ‘date’,
            ‘minDate’:currentTime(),
            ‘maxDate’: endTime(), //最大日期
            ‘clickcallback’:function(date){
             //回调
            }            
        });
    },

作者:dxj124
来源:CSDN
原文:https://blog.csdn.net/dxj124/article/details/81214793
版权声明:本文为博主原创文章,转载请附上博文链接!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值