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

讨论 已结 精帖
44 1899
岁月小偷
悬赏: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 回复
  • 0 回复
  • 一码春秋
    2018-12-21
    大佬牛皮。。。收藏了
    0 回复
  • @一码春秋 [微笑] 谢谢认可哈[嘻嘻]
    0 回复
  • deadcode
    2019-1-2
    大佬可以设置选择多个日期么,不是range
    0 回复
  • @deadcode 这个还木有实现额,一直想实现来着,你能不能提供一下你想要的效果图呢?目前脑海里大概的形式就是只有基础类型的才支持多选,range的就不准备支持了,然后input中使用逗号分隔或者分号分隔,然后让弹出的laydate组件可以根据input中的值显示多选,同时选中的时候也不会把以前的清除掉,重复点击一个已选中的就是取消掉,最后确定的时候将时间又转成一串字符串这样子的效果,应该大概是这样子是吧,但是实现起来估计有不少麻烦的事情还有细节需要处理额,我这两天找时间好好尝试一下额
    0 回复
  • deadcode
    2019-1-2
    0 回复
  • evn
    2019-1-3
    你这么牛X你爸妈知道吗?
    0 回复
  • @evn 谢谢认可[微笑] @Pojin 还是有很多人习惯用自然周额,所以期待后面的版本会加上这个配置[嘻嘻]
    0 回复
  • 大佬,如何结合法定假日呢[嘻嘻] ,有没有这个打算~~
    0 回复
  • QQ糖
    2019-1-3
    @岁月小偷 师傅,这个表格的数据怎么把一样的数据排列到一起挨着的。

    我是这么写的师傅帮我看一下问题在哪,我测试的时候是对的,但是别人测试的时候是错的。

    0 回复
  • @QQ糖 这个估计要在表格渲染之前先排序一下 @沉默死海 你说的效果是周末有还有其他的法定节假日有特殊的样式对吧,周末的有规律可以统一样式处理额,法定节假日估计不行,因为每年都是相关机构定的,所以如果有数据的就可以mark上去
    0 回复
  • AAbb
    2019-1-4
    多谢大佬,拿走了,不留一下一点痕迹
    0 回复
  • @AAbb 哈哈,这叫此地无银三百两吗[偷笑] 有bug记得反馈哈[微笑]
    0 回复
  • QQ糖
    2019-1-7
    @岁月小偷 使用localeCompare()排序的时候,空字符的话是被拍到前边么
    0 回复
  • QQ糖
    2019-1-7
    @岁月小偷 没事了师傅,我犯了个很2b的错[泪]
    0 回复
  • 易
    2019-1-7
    [赞] 强。
    0 回复
  • 浅瞳
    2019-1-8
    问一下,laydate有没有移动版?或者设置成全屏之类的?
    0 回复
  • 有心了,那么多文字我是打不出来[good]
    0 回复
  • util6
    2019-1-10
    [哈哈] 这颜色有点辣眼睛
    0 回复
  • @util6 就是要辣种效果[偷笑]
    0 回复