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多线程的实现方法
May 08 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
JS实现图片切换效果
Nov 17 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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图片加中文水印实现代码分享
2012/10/31 PHP
Smarty保留变量用法分析
2016/05/23 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
pycharm永久激活超详细教程
2020/10/29 Python
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
公司面试感谢信
2014/02/01 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
商务英语求职信范文
2015/03/19 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
MySQL优化之慢日志查询
2022/06/10 MySQL