时间和日期选择器

最新推荐文章于 2024-05-13 20:03:17 发布

小草dym

最新推荐文章于 2024-05-13 20:03:17 发布

阅读量184

点赞数

分类专栏： layui

本文链接：https://blog.csdn.net/qq_39368007/article/details/105600378

版权

layui 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

时间和日期选择器

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>时间和日期选择器</title>
    <link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body style="padding: 20px">
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">中文版</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">国际版</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test2" placeholder="yyyy年MM月dd日HH时mm分ss秒">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">初始值</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test3"
                       placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">其它</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test4"
                       placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
</div>
<script src="resources/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['element', 'jquery', 'laydate'], function () {
        var $ = layui.jquery;
        var element = layui.element;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#test1' //指定元素
            , type: 'date'
            , range: "~"
        });

        laydate.render({
            elem: '#test2' //指定元素
            , type: 'datetime'
            , format: 'yyyy年MM月dd日 HH时mm分ss秒'
        });

        laydate.render({
            elem: '#test3' //指定元素
            //,value:'2019-11-11'  指定具体的时间
            , value: new Date()   //指定当前系统时间
            /* ,min:'2019-01-01'
            ,max:'2025-12-31' */
            /*  ,min: -7
             ,max: 7 */
            , type: 'time'
            , min: '09:30:00'
            , max: '17:30:00'
            , trigger: 'click'
        });

        laydate.render({
            elem: '#test4' //指定元素
            , show: true
            , btns: ['confirm']
            , lang: 'cn'
            , calendar: true,
            mark: {
                '0-0-15': '工资',
                '0-9-1': '开学'
            }
        });

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

小草dym

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时间和日期选择器

时间和日期选择器<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:...
复制链接

扫一扫

专栏目录