laydate.js日期时间选择插件


Posted in Javascript onJanuary 04, 2017

日期时间选择插件laydate.js:

效果图:

laydate.js日期时间选择插件

1. 引入JS。 官网:http://laydate.layui.com

<script type="text/javascript" src="js/laydate.js"></script> 

2. 根据需要做相应的配置。详情参看官网。

<script> 
 laydate({ 
  elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class' 
  event: 'focus', //响应事件。如果没有传入event,则按照默认的click 
  format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义,该例子表示只显示年月 
  festival: true, //显示节日 
  istime: true, //显示时间选项 
  choose: function(datas){ //选择日期完毕的回调 
   alert('得到:'+datas); 
  } 
 }); 
</script>

实例源码:

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <!-- 
 <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
 <link href="favicon.ico" rel="Bookmark" type="image/x-icon" /> 
 --> 
 <meta name="Generator" content="EditPlus®"> 
 <meta name="Author" content=""> 
 <meta name="Keywords" content=""> 
 <meta name="Description" content=""> 
 <title>layDate日期时间选择插件</title> 
 <link href="" rel="stylesheet" /> 
 <script type="text/javascript" src="js/laydate.js"></script> 
</head> 
<body> 
 <form method="post" action=""> 
 Way1, 
  请选择日期:<input type="text" name="date" onclick="laydate()" /> 
  <hr /> 
 Way2, 
  <input type="text" name="date" id='seldate' class="laydate-icon" /><hr /> 
  <script> 
   laydate({ 
    elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class' 
    event: 'focus', //响应事件。如果没有传入event,则按照默认的click 
    format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义,该例子表示只显示年月 
    festival: true, //显示节日 
    istime: true, //显示时间选项 
    choose: function(datas){ //选择日期完毕的回调 
     alert('得到:'+datas); 
    } 
   }); 
  </script> 
 Way3, 
  <input id="seldate1"> 
  <span class="laydate-icon" onclick="laydate({elem:'#seldate1'});"></span> 
 </form> 
</body> 
</html>

Find more here:http://laydate.layui.com/

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

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 #Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 #Javascript
bootstrap laydate日期组件使用详解
Jan 04 #Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 #Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 #Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 #Javascript
通过sails和阿里大于实现短信验证
Jan 04 #Javascript
You might like
PHP 开发工具
2006/12/06 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
js实现登录与注册界面
2017/11/01 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
电气专业推荐信范文
2013/11/18 职场文书
年终总结会主持词
2014/03/25 职场文书
保护黄河倡议书
2014/05/16 职场文书
激励口号大全
2014/06/17 职场文书
校长创先争优承诺书
2014/08/30 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
销售员自我评价
2015/03/11 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书