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 相关文章推荐
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
jQuery插件开发汇总
May 15 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
React Native实现地址挑选器功能
Oct 24 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
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初学者的8点有效建议
2010/11/20 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
js实现选项卡效果
2020/03/07 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
python3 爬取图片的实例代码
2018/11/06 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
客服文员岗位职责
2013/11/29 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
保护环境建议书100字
2014/05/13 职场文书
单位委托书怎么写
2014/09/21 职场文书
银行授权委托书范本
2014/10/04 职场文书
学生个人总结范文
2015/02/15 职场文书
小平您好观后感
2015/06/09 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers