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入门学习书籍推荐
Jun 12 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
javascript html5实现表单验证
Mar 01 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
bootstrap multiselect下拉列表功能
Aug 22 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
详解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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
php分页示例代码
2007/03/19 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
JQuery小知识
2010/10/15 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python heapq使用详解及实例代码
2017/01/25 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
详解python运行三种方式
2019/05/13 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
2014年五一劳动节社区活动总结
2014/04/14 职场文书
超市商业计划书
2014/05/04 职场文书
个性发展自我评价2015
2015/03/09 职场文书
党员证明信
2015/06/19 职场文书
python之django路由和视图案例教程
2021/07/26 Python
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫