laydate输入日期年月日时分,以十分钟为间隔,不需要秒

项目要求插入日期时选择年月日时分且以十分钟为间隔,不需要秒,项目中使用了layui的laydate日期插件,下面是实现此功能的具体操作:

一:去除选择日期插件上的秒样式,更改分样式使其只显示00、10、20、30、40、50
.layui-laydate-content>.layui-laydate-list {
    padding-bottom: 0px;
    overflow: hidden;
}
.layui-laydate-content>.layui-laydate-list>li{
    width:50%
}

.merge-box .scrollbox .merge-list {
    padding-bottom: 5px;
}
.layui-laydate-content>.layui-laydate-list>li:nth-child(2)>ol>li:nth-child(-n+10):nth-child(n+2){
    display: none;
}
.layui-laydate-content>.layui-laydate-list>li:nth-child(2)>ol>li:nth-child(-n+20):nth-child(n+12){
    display: none;
}
.layui-laydate-content>.layui-laydate-list>li:nth-child(2)>ol>li:nth-child(-n+30):nth-child(n+22){
    display: none;
}
.layui-laydate-content>.layui-laydate-list>li:nth-child(2)>ol>li:nth-child(-n+40):nth-child(n+32){
    display: none;
}
.layui-laydate-content>.layui-laydate-list>li:nth-child(2)>ol>li:nth-child(-n+50):nth-child(n+42){
    display: none;
}
.layui-laydate-content>.layui-laydate-list>li:nth-child(2)>ol>li:nth-child(-n+60):nth-child(n+52){
    display: none;
}

在这里插入图片描述
在这里插入图片描述

二:在js中的laydate.render中加format,使得选择日期时间之后,输入框中显示yyyy-MM-dd HH:mm格式的日期
<#input id="actualBerthingTime" name="实际靠泊时间"/>
 laydate.render({
      elem: '#actualBerthingTime'
      , type: 'datetime',
      trigger: 'click',
      format: 'yyyy-MM-dd HH:mm'
  });

在这里插入图片描述

发布了59 篇原创文章 · 获赞 20 · 访问量 3645

猜你喜欢

转载自blog.csdn.net/qq_34896730/article/details/103696014