laydate特殊需求--下篇(倚天剑篇)

讨论 已结 精帖
48 4111
岁月小偷
悬赏:50飞吻
皮一下,看到下篇会不会想找找它的上篇[偷笑] 其实没有,但是确实也有,只不过是另外一个帖子 http://fly.layui.com/jie/28954/ ,不叫上篇而已,但是实际上可以说是这个帖子的上篇。这一篇的测试例子是在上篇的修改之后继续的,实际应用中跟上篇的修改没有强绑定的关系。
对于很多的laydate的特殊需求,比如最近看到的,不可选择秒只能选择小时,分钟,这个用format可以做到的效果是即使选了也转成实际的HH:mm但是如果想要做到second列是不可选的,据我所指的目前的源码是不支持的。
效果如下图

还有一个就是日期只能选择周一的,如下图

更多奇奇怪怪的需求就不列了,可以说基本大部分只要满足需求的合理的想法都是能够实现的,通过改造之后,改造的源码改动其实非常非常小,但是影响是非常大的,而且需要有对laydate有足够的了解。
下篇的源码修改主要集中在laydate提供的几个事件,一个ready,一个change和done。修改的思路都是一样的就是将执行监听的时候的this指向到that本身。
修改一

修改二


完整测试代码 https://pan.baidu.com/s/1-SbpmBizUW1gUm6AIsU9cQ

今天测试的时候还发现上篇漏了一个处理


有特殊需求的可以下载测试代码下来看看,里面包括一个基于2.3.0版本的laydate的源码对应的修改的laydate.js。但是还是那句话这个修改是一个双刃剑,得有一定的了解才能用好,用的不好可能会导致弹出来的laydate异常。就看怎么使了。
回帖
  • 沙发,[good]
    0 回复
  • @岁月小偷 必须的啊,要紧跟大神的脚步,向大神学习![太开心]
    1 回复
  • 三笠
    2018-7-5
    厉害[good]
    0 回复
  • 这是个啥效果 很棒
    0 回复
  • 0 回复
  • @圣地亚哥 thankyou[微笑]
    0 回复
  • @金乡大蒜 应对各种奇奇怪怪的但是有使用场景需要用到的效果[偷笑]
    0 回复
  • Jasmine_w
    2018-7-5
    [给力] 大神好厉害,手动点赞[抱抱]
    0 回复
  • @茉莉 过奖了谢谢[哈哈]
    0 回复
  • 向大神学习![鼓掌]
    0 回复
  • 汪
    2018-7-5
    大佬缺徒弟吗哈哈哈[哈哈] 不过看着确实牛逼
    0 回复
  • @菜鸟程序猿 逢贴必到呀这是[嘻嘻] 谢谢捧场[哈哈]
    0 回复
  • @ 担当不起啦,只是一个比较老的菜鸟,这些特殊的需求也只有在真正需要用到的时候才有作用,如果没有这些空间本身做不出来的需求就不用折腾哈
    0 回复
  • BCNumb
    2018-7-5
    [good] 6
    0 回复
  • @BCNumb thankyou[微笑]
    0 回复
  • 陌独行
    2018-7-6
    [威武]
    0 回复
  • @陌独行 thankyou[微笑]
    0 回复
  • [威武] [给力] 厉害厉害,不愧是榜首
    0 回复
  • @冬日温暖 过奖了[微笑]
    0 回复
  • 番茄
    2018-7-9
    @岁月小偷
    直接用这个第三方的,也撸的很开心[嘻嘻]
    0 回复
  • @番茄 条条大道通罗马[偷笑]
    0 回复
  • 大哥,困扰一天问题,求解决呀! input两个,选择时间日期后,直接显示在另外一个input里面! 百度查的不能用onchange,用onclick或者鼠标滑过,失去焦点事件都不能直接显示在另外的input,官方回调看不太懂!不知道怎么用,求解决呀大佬!
    0 回复
  • @冥冥之中天注定 你的意思是在laydate选择一个日期确定之后想要把选中的日期设置到某一个input中吗?
    0 回复
  • @岁月小偷 大佬目前出来一小步了,您先看下代码,我两个input的选择日期框,怎么显示一个,我需要把两个拼接在一起显示在我的id为date的input框里面
    <script type="text/javascript">
    //执行一个laydate实例
    laydate.render({
    elem: '#test1',
    theme: 'molv',
    done: function(value, date, endDate){
    document.getElementById('date').value = document.getElementById('test1').value;
    }
    });

    laydate.render({
    elem: '#test2', //指定元素
    theme: 'molv',
    done: function(value, date, endDate){
    document.getElementById('date').value = document.getElementById('test2').value;
    }
    });
    </script>
    0 回复
  • @岁月小偷 打错了,只能在id为date的input里显示一个,不能拼接,求解决呀
    0 回复
  • @冥冥之中天注定
    这一块不要这么写额,直接用done回调的第一个参数value就可以了,这样写怎么说呢,从一个正常的思维来说是没问题的,但是目前laydate有一个问题,就是有的时候done执行的时候还没有把值设置进去input里面,有时候又是先设置值然后再执行done,这个有时候不是随机出现的额,是在点击确定的时候会出现先done然后再设置值进去input的诡异顺序,点击确定其他的好像都是比较正常的先设置值然后再执行done,所以还是要以done的第一个参数value为准就可以了,试试看。
    0 回复
  • @冥冥之中天注定 然后是你的另外一个问题,就是要拼接出来放到input里面去,这个可以大概这么写

    laydate.render({
    elem: '#test1',
    theme: 'molv',
    done: function(value, date, endDate){
    $('#date').val(value + ($('test2').val() ? (' ~ ' + $('test2').val()) : '') );
    //document.getElementById('date').value = document.getElementById('test1').value;
    }
    });

    laydate.render({
    elem: '#test2',
    theme: 'molv',
    done: function(value, date, endDate){
    $('#date').val(($('test1').val() ? ($('test1').val() + ' ~ ') : '') + value);
    //document.getElementById('date').value = document.getElementById('test1').value;
    }
    });
    试试看是不是你想要的结果
    0 回复
  • @岁月小偷 好的,大佬,我试试看 谢谢腻
    0 回复
  • lovnie
    2018-7-18
    @岁月小偷 请教一下 layDate 有两个选择框 第二个选择框根据第一个选择框的值 设置最小日期 怎么重新绑定
    用了change改变和选中后的回调 重新渲染绑定 试了不行
    0 回复
  • @lovnie 你事件的类型是什么呢?如果是type为date的是不会走change回调的,但是会走done回调,所以稳妥还是在done回调里面做,然后不起作用的这个要看你修改参照我里面说的“上篇”修改了源码了没有,要重复render laydate的话必须修改源码额。
    0 回复