laydate初始化赋值

最新推荐文章于 2025-03-16 17:18:06 发布

猿didi

最新推荐文章于 2025-03-16 17:18:06 发布

阅读量3.2k

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_40263124/article/details/127447824

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文展示了如何使用Layui框架为HTML日期输入框进行初始化赋值，通过JavaScript代码设置`laydate`组件的`value`属性，将日期设置为'2022-10-1'和'2022-10-22'，实现点击触发日期选择器并显示预设日期的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Layui对date类型进行初始化赋值：

效果图：
请添加图片描述

layui相关引入：

<link href="../screen/layui/css/layui.css" rel="stylesheet"/>
<script type="text/javascript" src="../screen/layui/layui.js"></script>

css代码：

<style>
    .layui-inline input {
        float: left;
        width: 100px;
    }

    .layui-inline span {
        float: left;
        margin-top: 10px;
        color: white;
    }
</style>

html代码：

<div class="layui-inline" style="position: absolute;margin-top: 30px;margin-left: 1100px">  
        <input type="text" class="layui-input" id="startDate">
        <span style="float: left">&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</span>
        <input type="text" class="layui-input" id="endDate">
</div>

js代码：

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //同时绑定多个
        lay('#startDate').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click',
                value: '2022-10-1'
            });
        });

        lay('#endDate').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click',
                value: '2022-10-22'
            });
        });
    });
</script>