Layui 日期时间选择器实现

Layui 日期时间选择器实现（不包含秒）

在 Layui 中实现日期时间选择器，并且确保与后端 datetime 格式交互时不包含秒：

1. 前端新增页面实现

<div class="layui-form-item">
    <label class="layui-form-label">日期时间</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" id="datetime" name="datetime" placeholder="yyyy-MM-dd HH:mm">
    </div>
</div>

<script>
layui.use(['laydate', 'form'], function(){
    var laydate = layui.laydate;
    var form = layui.form;
    
    // 日期时间选择器
    laydate.render({
        elem: '#datetime',
        type: 'datetime',
        format: 'yyyy-MM-dd HH:mm',  // 指定格式，不包含秒
        ready: function(date){
            // 初始化时去掉秒
            this.setValue(layui.util.toDateString(date, 'yyyy-MM-dd HH:mm'));
        },
        done: function(value, date){
            // 选择完成后去掉秒
            if(date){
                this.setValue(layui.util.toDateString(date, 'yyyy-MM-dd HH:mm'));
            }
        }
    });
});
</script>

2. 编辑页面数据回显

// 假设从后端获取的数据为 response.data
layui.use(['laydate', 'form'], function(){
    var laydate = layui.laydate;
    var form = layui.form;
    
    // 初始化表单数据
    form.val('formFilter', {
        "datetime": formatDateTime(response.data.datetime) // 格式化日期时间
    });
    
    // 日期时间选择器
    laydate.render({
        elem: '#datetime',
        type: 'datetime',
        format: 'yyyy-MM-dd HH:mm',
        ready: function(date){
            this.setValue(layui.util.toDateString(date, 'yyyy-MM-dd HH:mm'));
        },
        done: function(value, date){
            if(date){
                this.setValue(layui.util.toDateString(date, 'yyyy-MM-dd HH:mm'));
            }
        }
    });
});

// 格式化日期时间函数（去掉秒）
function formatDateTime(datetimeStr) {
    if(!datetimeStr) return '';
    // 假设后端返回的是 "yyyy-MM-dd HH:mm:ss" 格式
    return datetimeStr.substring(0, 16);
}

3. 后端处理

后端需要确保：

1. 接收前端提交的 “yyyy-MM-dd HH:mm” 格式数据时，自动补全秒为 “00”
2. 返回给前端的数据可以保持完整 “yyyy-MM-dd HH:mm:ss” 格式，由前端截取显示

Java Spring Boot 示例

// 接收参数
@PostMapping("/save")
public Result save(@RequestParam String datetime) {
    // 将 "yyyy-MM-dd HH:mm" 补全为 "yyyy-MM-dd HH:mm:00"
    String fullDateTime = datetime + ":00";
    // 转换为 LocalDateTime
    LocalDateTime dateTime = LocalDateTime.parse(fullDateTime, DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
    // ... 其他业务逻辑
}

// 返回数据
@GetMapping("/detail")
public Result detail() {
    // 从数据库获取的完整 datetime
    LocalDateTime dbDateTime = ...;
    // 返回完整格式，前端会处理显示
    return Result.success(dbDateTime.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")));
}

4. 注意事项

1. 确保前后端对日期时间格式的约定一致
2. 如果使用 Layui 表格，可以在 cols 的 templet 中格式化显示：

   {field: 'datetime', title: '日期时间', templet: function(d){
       return d.datetime ? d.datetime.substring(0, 16) : '';
   }}
   

3. 对于表单提交验证，可以添加 Layui 的验证规则确保格式正确

这样实现后，系统将在前端显示和选择时不包含秒，但后端仍保持完整的 datetime 格式存储。