使用layui日期控件laydate对开始和结束时间进行联动控制的方法


Posted in Javascript onSeptember 06, 2019

1.在页面先引入laydate.js文件

2.html页面控件如下:

<input name="begin_time" style="margin-top:8px;width:130px;" id="begin_time" value="${beginTime}" class="Wdate" type="text"/>
<input name="deadline_time" style="margin-top:8px;width:130px;" id="deadline_time" value="${deadlineTime}" class="Wdate" type="text"/>

3.html页面js代码如下:

//年月选择器
laydate.render({
 elem: '#begin_time'
 ,type: 'month'
 ,min: '${minBeginTime}-29'
 ,max: '${maxBeginTime}-29'
 ,done: function(value){
  $("#deadline_time").remove();
  $("#myd").append('<input name="deadline_time" style="margin-top:8px;width:130px;" id="deadline_time" class="Wdate" type="text"/>');
  $("#deadline_time").val(value);
  $.ajax({
    url:'reportYearMonth/getMaxMinEndTime.json',
    data:{minTime:value},
    type:'post',
    dataType:'json',
    success:function(data){
      laydate.render({
       elem: '#deadline_time'
       ,type: 'month'
       ,min:data.minEndTime+'-29'
       ,max:data.maxEndTime+'-29'
      });
    }
  });
 }
});

以上这篇使用layui日期控件laydate对开始和结束时间进行联动控制的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
js loading加载效果实现代码
Nov 24 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
js的回调函数详解
Jan 05 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
解决layer.open后laydate失效的问题
Sep 06 #Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 #Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 #Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 #Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 #Javascript
vue按需加载实例详解
Sep 06 #Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
经典演讲稿开场白
2014/08/25 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
Python实现机器学习算法的分类
2021/06/03 Python
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
nginx内存池源码解析
2021/11/20 Servers
一行Python命令实现批量加水印
2022/04/07 Python
Python函数对象与闭包函数
2022/04/13 Python