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 相关文章推荐
jQuery each()小议
Mar 18 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 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中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
jquery 笔记 事件
2011/11/02 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
Python实现二叉堆
2016/02/03 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
Python  Django 母版和继承解析
2019/08/09 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
python修改FTP服务器上的文件名
2019/09/11 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
班组长的岗位职责
2013/12/09 职场文书
文艺晚会策划方案
2014/06/11 职场文书
小学教学工作总结2015
2015/05/13 职场文书
民事起诉状范文
2015/05/19 职场文书
详解nginx location指令
2022/01/18 Servers