脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → laydate.js日期插件

laydate.js日期时间选择插件

 更新时间：2017年01月04日 11:23:46   作者：东成熙就  
这篇文章主要为大家详细介绍了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/

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js实现坦克移动小游戏

    js实现坦克移动小游戏

    这篇文章主要为大家详细介绍了js实现坦克移动小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • uniapp实现横向滚动选择日期

    uniapp实现横向滚动选择日期

    这篇文章主要为大家详细介绍了uniapp实现横向滚动选择日期，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-10-10
  • js自调用匿名函数的三种写法(推荐)

    js自调用匿名函数的三种写法(推荐)

    下面小编就为大家带来一篇js自调用匿名函数的三种写法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript检查弹出窗口是否被阻拦的方法技巧

    JavaScript检查弹出窗口是否被阻拦的方法技巧

    这篇文章主要介绍了JavaScript检查弹出窗口是否被阻拦的方法技巧,本文用于检测window.open弹出的窗口是否被阻拦,需要的朋友可以参考下
    2015-03-03
  • wap手机图片滑动切换特效无css3元素js脚本编写

    wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行，本例无css3元素js脚本编写,需要的朋友可以参考下
    2014-07-07
  • MutationObserver监视对DOM 树所做更改的功能妙用

    MutationObserver监视对DOM 树所做更改的功能妙用

    这篇文章主要为大家介绍了MutationObserver监视对DOM 树所做更改的功能妙用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • JavaScript 异步函数 Promisification 处理详情

    JavaScript 异步函数 Promisification 处理详情

    这篇文章主要介绍了JavaScript异步函数Promisification处理详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-08-08
  • javascript实现简单的分页特效

    javascript实现简单的分页特效

    下面给大家汇总的几个javascript实现的分页代码，当然必须要结合后台代码实现。大家可以自行分析一下代码，希望能够给大家带来一定的帮助
    2015-08-08
  • 微信小程序完美解决scroll-view高度自适应问题的方法

    微信小程序完美解决scroll-view高度自适应问题的方法

    这篇文章主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • js仿拉勾网首页穿墙广告效果

    js仿拉勾网首页穿墙广告效果

    本文主要介绍js仿拉勾网首页穿墙广告效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论