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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python目录和文件处理总结详解
2019/09/02 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
自荐信格式的六要素
2013/09/21 职场文书
自荐信的两点禁忌
2013/10/30 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
班级读书活动总结
2014/06/30 职场文书
自我推荐信格式模板
2015/03/24 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android
Django框架中表单的用法
2022/06/10 Python