Layui时间插件laydate只选择时分

需要一个只选择时分的控件，首先想到的是laydate，然后看一下控件的类型。//min'string',//设置最小值。/*设置只展示时分，隐藏秒那一列*//*设置只展示时分，隐藏秒那一列*///给默认值，模拟后台返回的数据。/*layer弹出一个示例*///元素操作等等...//vue挂载的元素。...

夏已微凉、

3588人浏览 · 2022-07-23 14:11:31

夏已微凉、 · 2022-07-23 14:11:31 发布

一、说明
二、分析
三、效果
四、代码

一、说明

需要一个只选择时分的控件，首先想到的是laydate，然后看一下控件的类型

type 可选值	名称	用途
year	年选择器	只提供年列表选择
month	年月选择器	只提供年、月选择
date	日期选择器	可选择：年、月、日。type默认值，一般可不填
time	时间选择器	只提供时、分、秒选择
datetime	日期时间选择器	可选择：年、月、日、时、分、秒

二、分析

在这里先感谢 景哥 提供的css样式，大佬 666
可以得出，没有我们需要的类型，那我们就使用time类型，再用css隐藏秒那一列，代码如下：

<style>
    /* 设置只展示时分，隐藏秒那一列 */
    .laydate-time-list {
        padding-bottom: 0;
        overflow: hidden;
    }

    .laydate-time-list > li {
        width: 50% !important;
    }

    .laydate-time-list > li:last-child {
        display: none;
    }

    .laydate-time-list ol li {
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
</style>

    // 时间插件
    laydate.render({
        elem: '#time',
        trigger: 'click',
        type: 'time', //设置日期类型
        format: 'HH:mm', //设置日期格式
        // min: 'string', //设置最小值
        done: function (value, date) {

        }
    });

三、效果

默认效果：
展开效果：

四、代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Layui时间插件laydate只选择时分</title>
</head>
<!-- 引用线上的layui.css -->
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" v="2.5.6" e="layui"/>
<style>
    /* 设置只展示时分，隐藏秒那一列 */
    .laydate-time-list {
        padding-bottom: 0;
        overflow: hidden;
    }

    .laydate-time-list > li {
        width: 50% !important;
    }

    .laydate-time-list > li:last-child {
        display: none;
    }

    .laydate-time-list ol li {
        width: 100% !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
</style>
<body>
<div class="layui-form" style="padding: 30px" id="vue-mount-element">
    <div class="layui-input-inline">
        <input type="text" name="time" :value="info.time" class="layui-input"
               id="time" placeholder="分:秒" autocomplete="off">
    </div>
</div>
</body>
<!-- 引用线上的layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js" v="2.5.6" e="layui.all"></script>
<!-- 引用线上的vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let info = {time: '01:01'}; //给默认值，模拟后台返回的数据

    let vueObject = new Vue({
        el: '#vue-mount-element', //vue挂载的元素
        data() {
            return {
                info: info,
            };
        }
    })

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'form'], function () {
        var $ = layui.$
            , laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , form = layui.form //表单
            , element = layui.element; //元素操作 等等...

        /*layer弹出一个示例*/
        // layer.msg('Hello World');

        // 时间插件
        laydate.render({
            elem: '#time',
            trigger: 'click',
            type: 'time', //设置日期类型
            format: 'HH:mm', //设置日期格式
            // min: 'string', //设置最小值
            done: function (value, date) {

            }
        });
    });
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^