文档章节

laydate时间控件:开始时间,结束时间最大最小值

o
 osc_wws45aot
发布于 2019/08/20 10:00
字数 544
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

时间控件地址及插件下载链接:https://www.layui.com/doc/modules/laydate.html

填充时间已两个功能为例;

1.添加功能 :时间

规则:选择开始时间后,点击结束时间必须大于开始时间;

   如果先选择结束时间,开始时间必须小于结束时间;

代码如下:

<html>
<body>
<input type="text" class="cousre-time" id="startTime" placeholder="开始时间"
                            name="startTime" />
                        <span>-</span>
                        <input type="text" class="cousre-time" id="endTime" placeholder="结束时间"
                            name="endTime" />
</body>
<script>
    layui.use('laydate', function() {
                var laydate = layui.laydate;

                //开始时间
                var start = laydate.render({
                    elem : '#startTime',
                    type : 'datetime', //可选择:年月日时分秒
                    theme : 'molv',
                    trigger : 'click', //采用click弹出
                    done : function(value, date, endDate) {
                        end.config.min = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //开始日选好后,重置结束日的最小日期
                        end.config.value = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //将结束日的初始值设定为开始日
                    }
                });
                //结束时间
                var end = laydate.render({
                    elem : '#endTime',
                    type : 'datetime', //可选择:年月日时分秒
                    theme : 'molv',
                    trigger : 'click', //采用click弹出
                    done : function(value, date, endDate) {
                        start.config.max = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //结束日选好后,重置开始日的最大日期
                    }
                });
            });
</script>
</html>

2.编辑功能:时间

规则 :默认有个初始值;

   选择开始时间后,点击结束时间必须大于开始时间;

   如果先选择结束时间,开始时间必须小于结束时间;

 

 代码如下:

<script type="text/javascript">
//${project.startTime.time} 是因为 在jsp下写的;可替换成html;或者直接在laydate.render里添加也行
var startTimeString = formatDate(new Date([[${project.startTime.time}]]));
         var endTimeString = formatDate(new Date([[${project.endTime.time}]]));
layui.use('laydate', function() {
                var laydate = layui.laydate;

                //开始时间
                var start = laydate.render({
                    elem : '#startTime',
                    type : 'datetime', //可选择:年月日时分秒
                    theme : 'molv',
                    value : startTimeString,
                    trigger : 'click', //采用click弹出
                    max : endTimeString,
                    done : function(date) {
                        end.config.min = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //开始日选好后,重置结束日的最小日期
                    }
                });
                //结束时间
                var end = laydate.render({
                    elem : '#endTime',
                    type : 'datetime', //可选择:年月日时分秒
                    theme : 'molv',
                    value : endTimeString,
                    trigger : 'click', //采用click弹出
                    min : endTimeString,
                    done : function(value, date, endDate) {
                        start.config.max = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //结束日选好后,重置开始日的最大日期
                    }
                });
            });
</script>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

学习编写编译器[关闭] - Learning to write a compiler [closed]

问题: Preferred languages : C/C++, Java, and Ruby. 首选语言 :C / C ++,Java和Ruby。 I am looking for some helpful books/tutorials on how to write your own compiler simply for......

技术盛宴
33分钟前
12
0
OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
今天
37
1
MySQL 常用操作

1 创建/打开/删除数据库 create database db;create database db character set utf8mb4;use db;drop database db;alter database db character set utf8mb4; 2 修复表 mysqlcheck --a......

氷泠
今天
13
0
Node.js中的module.exports与export - module.exports vs exports in Node.js

问题: I've found the following contract in a Node.js module: 我在Node.js模块中找到了以下合同: module.exports = exports = nano = function database_module(cfg) {...} I wonder ......

javail
今天
13
0
如何防止单击按钮时对话框关闭 - How to prevent a dialog from closing when a button is clicked

问题: I have a dialog with EditText for input. 我有一个使用EditText输入的对话框。 When I click the "yes" button on dialog, it will validate the input and then close the dialog.......

富含淀粉
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部