layui layDate 添加可以设置一周开始的设置

讨论 已结 精帖 44 3086
岁月小偷
悬赏:20飞吻
标题不知道怎么描述,还是先看效果,应该都不陌生

比较直白的功能,国际惯例周日作为一周的开始,但是有的用户使用习惯还是比较倾向周一作为一周的开始,但是目前laydate是没有一个配置项可以来决定这个的,顾在laydatePro中添加了一个配置项的支持如下:

从注释里面也可以看到,为了使用的方便,可以设置0到6(也就是Date.getDay()对应的值)之外,同时提供了可以设置成对应的日一二三或者Su,Mo,Tu这些。下面简单的介绍一下背后的实现逻辑:
1,在默认的config中添加一个weekStart的初始值


2,在render的时候用正则表达式校验填入的值符合要求不,符合的话设置成对应的0-6如果不符合重置成0


3,到了后面实际渲染这个laydate的时候根据weekStart去生成节点
这里有两个部分,一个是表头的th上显示的

另外一个是实际td里面的内容的


到此关于设定一周开始的就改好了,例子给出的是周一开始,这个实际是使用会比较常见的,但是并不是只能设置周一,实际上支持设置任意一天作为开始,后面跟据实际需要的时候设置即可


留了一个彩蛋,测试效果中的layui-this的效果,默认的效果是一个长方格,如果要跟我例子中的要的是一个圈圈,有配置项么?可以自己试试哈,如果需要下午再针对这个追加说明额[微笑]
关于圈圈怎么实现的说说我的思路,一开始觉得直接从css入手,但是看了一下,日期里面实际就是一个表格每天对应的都是一个td里面没有任何子节点了,而且他们是一个长方形的,36*30,如果给强制变成正方形的样子又变得很怪,如果不变方直接改td的border-radius那么就变成一个椭圆的了,而且还有一个更加麻烦的事情就是如果theme使用了gird的话这个就跟grid不符合了,我们关注的是active的这个标记,所以转变一下,实际现在td内部的内容太过简单只有对应的值,如果能埋进去一个div啥的,后面就自由多了,完全可以设置里面的div的样式来达到想要的效果,而不用动table的td的样式,所以还是跟其他的一样添加一个是否需要这个功能的配置,但是这里一开始是准备直接利用theme来处理的,但是又遇到另外一个问题,这里的主题实际怎么说的就是原始的laydate缺少一种多主题的支持,比如原先的支持传一个色值,那么除了这个这个我用另外一个主题来决定是圈圈的,那么怎么同时支持两个主题,综合考虑了之后还是决定不折腾,新增多一个参数:circleMark: ture/false。为啥不让它支持可以类似form的verify一样支持多主体的呢?我的考虑是即使不想要用我的扩展,换回原始的laydate,我希望你写的代码在原始的laydate下也是可以直接跑的,所以如果修改了theme的支持类似‘#ff00ff|circle’这样子的后面不用插件这段代码就会出不来要的主题了。所以修改如下
再生成日历的时候就埋进去一个div

如果设置了circleMark就添加多一个主题class

后面用样式控制

最后还有一个主意的就是如果设置了theme是#开头的颜色的,实际是会生成一个style用#当前laydate的id的控制td的背景颜色,这个优先级很高,直接把circle的给盖过去了,所以在下面这里加多一个限制,如果是circle的做一些其他的处理

出来的效果就是上面的gif看到的啦[微笑]
回帖
  • 这个功能非常实用!谢谢分享。
    0 回复
  • Zlheb
    2018-12-18
    南方人民发来贺电[嘻嘻]
    1 回复
  • 收藏了 [哈哈]
    0 回复
  • lay初见
    2018-12-18
    手动点赞[good]
    0 回复
  • @lay初见 @Zlheb @四年之约 谢谢认可[嘻嘻]
    0 回复
  • Zlheb
    2018-12-18
    看到你有一篇关于TableCheckbox的帖子 里面有个你自定义的导出 有问题 layui的table自带的导出也有提示(前端导出基本都被检测为不安全的文件) 但是打开数据是全的 你看下是不是有问题

    0 回复
  • @Zlheb 这个功能是layui自带的额,而且好像用过一些其他的导出的插件都一样的,导出了之后打开这个文件都会报这个信息,可以不用理会它的,直接打开就可以了,具体原因没去查额,
    0 回复
  • Zlheb
    2018-12-18
    前端导出的都会有这个检测提示 主要是你的数据没显示出来
    0 回复
  • @Zlheb 你说的是这个按钮吗

    下载下来是下面的

    是吗?如果是的话这个实际上是自己做测试的时候遗留下来的,只是测一下table.exportFile这个方法啦,不是没有数据哈,就是让它导出的{id: 1};请无视它额


    0 回复
  • Zlheb
    2018-12-18
    [鄙视] 纯属误导我
    0 回复