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

悠悠 2023-06-25 03:14 14阅读 0赞

项目要求插入日期时选择年月日时分且以十分钟为间隔，不需要秒，项目中使用了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;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20191225113732166.png]

##### 二：在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'
      });

![在这里插入图片描述][20191225113752286.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191225113710946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODk2NzMw,size_16,color_FFFFFF,t_70
[20191225113732166.png]: https://img-blog.csdnimg.cn/20191225113732166.png
[20191225113752286.png]: https://img-blog.csdnimg.cn/20191225113752286.png