移动端网页轻量级日期控件LCalenda

所属分类:输入-选择框

 92985  357  查看评论 (67)
分享到微信朋友圈
X
移动端网页轻量级日期控件LCalenda ie兼容10

注:请在移动端查看效果。

LCalendar

纯原生js的移动端日期插件,不依赖任何库,体积非常小只有10k

用法

在html页面中引入input标签,通过自定义属性data-lcalendar控制最小日期和最大日期,写法如下:

...
<input type="text" readonly="" name="input_date" placeholder="请输入日期" data-lcalendar="2000-01-01,2018-01-29" />
...

将样式文件引入到页面中:

...
<link rel="stylesheet" href="LCalendar.css">
...

同时引入js文件到页面中:

...
<script src="LCalendar.js"></script>
...

初始化插件:

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

jQuery下拉多选插件ySelect.js

简单实用的jQuery多选插件ySelect.js,支持反选,搜索,分组。
  选择框
 39509  320

zTree 下拉插件(原创)

基于zTree实现的下拉树型菜单选择
  选择框
 24823  285

省市区三级联动

省市区三级联动,代码简洁
  选择框
 34576  341

bootstrap下拉列表插件

bootstrap插件一款基于jquery bootstrap的下拉列表插件 ,有很多样式的下拉框
  选择框
 55211  461

讨论这个项目(67)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    天下有道,我黼子佩 0
    2021/7/13 17:40:20

    点击遮罩层实现关闭功能我给作者补上了,如果谁需要可以找我,原理其实很简单,就是把作者所有的事件都租阻止冒泡并且写了一个关闭事件。

    回复
    hupc 0
    2020/7/2 11:02:36
    这个可以支持年月日时分秒吗,我看type是datetime时,只能支持到年月日时分,不能支持秒 回复
    丿Sorry丶 0
    2020/3/31 19:42:13
    当传入最小日期为月底最后一天时就会出现直接到12月分份的问题 回复
    幸运的虫虫 0
    2019/9/24 10:29:01
    怎么监听确定按钮呢? 回复
    0
    2019/6/12 17:32:18
    LCalendar.js:594 Uncaught TypeError: Cannot read property 'querySelector' of null
        at LCalendar.js:594
    (anonymous)@LCalendar.js:594
    setInterval (async)
    rollGear@LCalendar.js:567
    gearTouchEnd@LCalendar.js:554

    选择日期的时候会报这个错。。。  然后旁边有个小红框 一直刷新数字  越来越大   就我自己有这个问题吗?

    var date_yy = _self.gearDate.querySelector(".date_yy");
    target["int_" + target.id] = setInterval(function() {
    rollGear(target);

     报错行数  

        风芥0
        2019/10/21 9:22:22
        我也遇到同样的问题,而且有时候报错的行数不同,请问解决了吗
    回复
    Shirley_CN 0
    2019/4/2 9:24:33
    问个问题,我改了传入的时间数据,现在是动态生成的,但是int初始化在ajax里面每次调用就重复出现多个时间控件,能有什么办法移除么
        错过了三生三世0
        2019/6/28 17:32:17
        解决了么。同问
    回复
    |.逍遥ギ¤沉默∮ 0
    2019/3/30 9:24:55
    设置默认值,点击取消和确定的回调函数呢?怎么设置 回复
    zqilong 0
    2018/12/10 14:00:54
    怎么更改分钟的值啊,我想让它间隔5分钟 并不像这样每一分钟都显示得 有解决办法么 回复
    这个年纪 0
    2018/10/11 9:50:54
    填入开始时间不会显示在开始时间框里 会显示在结束时间框里 有什么办法解决吗
        tournesol0
        2018/11/7 14:28:11
        同问,请问您解决了吗。现在我遇到这个问题
    回复
    WFuChengGeGe 0
    2018/9/7 10:18:01
    能设置分钟30分钟一个节点的吗 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复