layui前段框架日期控件使用方法详解


Posted in Javascript onMay 19, 2017

本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>日期</title>
  <link rel="stylesheet" href="layui/css/layui.css">
 </head>
 <body>
  <blockquote class="layui-elem-quote">目前Layui中的日期组件还是layDate 1.1的改良版,它后续将会进行一次重写。</blockquote>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
   <legend>顺便列举几个常用例子</legend>
  </fieldset>
  <div class="layui-form-pane" style="margin-top: 15px;">
   <div class="layui-form-item">
  <label class="layui-form-label">范围选择</label>
  <div class="layui-input-inline">
   <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
  </div>
  <div class="layui-input-inline">
   <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
  </div>
  </div>
  </div>

  <script src="layui/layui.js"></script>
  <script>
layui.use('laydate', function(){

 var laydate = layui.laydate;

 var start = {
 min: laydate.now()
 ,max: '2099-06-16 23:59:59'
 ,istoday: false
 ,choose: function(datas){
  end.min = datas; //开始日选好后,重置结束日的最小日期
  end.start = datas //将结束日的初始值设定为开始日
 }
 };

 var end = {
 min: laydate.now()
 ,max: '2099-06-16 23:59:59'
 ,istoday: false
 ,choose: function(datas){
  start.max = datas; //结束日选好后,重置开始日的最大日期
 }
 };

 document.getElementById('LAY_demorange_s').onclick = function(){
 start.elem = this;
 laydate(start);
 }
 document.getElementById('LAY_demorange_e').onclick = function(){
 end.elem = this
 laydate(end);
 }

});
</script>

 </body>
</html>

效果图:

layui前段框架日期控件使用方法详解

官网日期控件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
textContent在Firefox下与innerText等效的属性
May 12 Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
处理canvas绘制图片模糊问题
May 11 Javascript
详解Node.js开发中的express-session
May 19 #Javascript
前端页面文件拖拽上传模块js代码示例
May 19 #Javascript
jQuery操作之效果详解
May 19 #jQuery
AngularJS中的promise用法分析
May 19 #Javascript
几种响应式文字详解
May 19 #Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 #Javascript
vue.js动态数据绑定学习笔记
May 19 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
你真的了解BOM中的history对象吗
2017/02/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python不规范的日期字符串处理类
2014/06/10 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python自动扫雷实现方法
2015/07/25 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python实现井字棋小游戏
2020/03/04 Python
python实现程序重启和系统重启方式
2020/04/16 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
教师党员整改措施
2014/10/24 职场文书
2016年教代会开幕词
2016/03/04 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
Python语言中的数据类型-序列
2022/02/24 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
详解flex:1什么意思
2022/07/23 HTML / CSS