日期时间组件 - layui.laydate

时间：2022-12-26 08:01:22

全部参数

一、核心方法：laydate(options);

options是一个对象，它包含了以下key: '默认值'

{

  elem: '#id', //需显示日期的元素选择器

  event: 'click', //触发事件

  format: 'YYYY-MM-DD hh:mm:ss', //日期格式

  istime: false, //是否开启时间选择

  isclear: true, //是否显示清空

  istoday: true, //是否显示今天

  issure: true, 是否显示确认

  festival: true //是否显示节日

  min: '1900-01-01 00:00:00', //最小日期

  max: '2099-12-31 23:59:59', //最大日期

  start: '2014-6-15 23:00:00',  //开始日期

  fixed: false, //是否固定在可视区域

  zIndex: 99999999, //css z-index

  choose: function(dates){ //选择好日期的回调

  }

}

二、其它方法/属性

laydate.v   //获取laydate版本号

laydate.skin(lib);  //加载皮肤，参数lib为皮肤名

/*

  layer.now支持多类型参数。timestamp可以是前后若干天，也可以是一个时间戳。format为日期格式，为空时则采用默认的“-”分割。

  如laydate.now(-2)将返回前天，laydate.now(3999634079890)将返回2096-09-28

*/

layer.now(timestamp, format);   //该方法提供了丰富的功能，推荐灵活使用。

laydate.reset();  //重设日历控件坐标，一般用于页面dom结构改变时。无参

基本实现效果

例1：

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>layui</title>

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="css/layui.css"  media="all">

</head>

<body>

<blockquote class="layui-elem-quote">目前Layui中的日期组件还是layDate 1.1的改良版，它后续将会进行一次重写。</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

  <legend>顺便列举几个常用例子</legend>

</fieldset>

<div class="layui-inline">

  <input class="layui-input" placeholder="自定义日期格式" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">

</div>

<div class="layui-inline">

  <input class="layui-input" placeholder="开启节日" onclick="layui.laydate({elem: this, festival: true})">

</div>

<div class="layui-inline">

  <input class="layui-input" placeholder="只能选昨天到明天" onclick="layui.laydate({elem: this, min: laydate.now(-1), max: laydate.now(+1)})">

</div>

<div class="layui-form-pane" style="margin-top: 15px;">

  <div class="layui-form-item">

    <label class="layui-form-label">范围选择</label>

    <div class="layui-input-inline">

      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">

    </div>

    <div class="layui-input-inline">

      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">

    </div>

  </div>

</div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script src="layui.js" charset="utf-8"></script>

<script>

layui.use('laydate', function(){

  var laydate = layui.laydate;

  var start = {

    min: laydate.now()

    ,max: '2099-06-16 23:59:59'

    ,istoday: false

    ,choose: function(datas){

      end.min = datas; //开始日选好后，重置结束日的最小日期

      end.start = datas //将结束日的初始值设定为开始日

    }

  };

  var end = {

    min: laydate.now()

    ,max: '2099-06-16 23:59:59'

    ,istoday: false

    ,choose: function(datas){

      start.max = datas; //结束日选好后，重置开始日的最大日期

    }

  };

  document.getElementById('LAY_demorange_s').onclick = function(){

    start.elem = this;

    laydate(start);

  }

  document.getElementById('LAY_demorange_e').onclick = function(){

    end.elem = this

    laydate(end);

  }

});

</script>

</body>

</html>

日期时间组件 - layui.laydate

日期时间组件 - layui.laydate

日期时间组件 - layui.laydate

日期时间组件 - layui.laydate

日期时间组件 - layui.laydate

日期时间组件 - layui.laydate的更多相关文章

  1. 27flutter日期 时间组件flutter&lowbar;cupertino&lowbar;date&lowbar;picker的使用

    pubspec.yaml flutter_cupertino_date_picker: ^ DatePicker.dart import 'package:date_format/date_forma ...

  2. 如何在Rails6内通过Webpacker使用JavaScript&semi; flatpicker日期时间组件选择器

    如何在Rails6内通过Webpacker使用JavaScript; Rails6默认不再使用asset pipeline,改用Webpacker. 文件结构变化: 配置文件: webpacker.y ...

  3. 日期控件&comma;layui

    <link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type=" ...

  4. 关于layui的日期和时间组件laydate闪屏的坑

    https://blog.csdn.net/liangwenli_/article/details/82786713 jsp页面: <input type="text" cl ...

  5. easyui基于 layui&period;laydate日期扩展组件

    本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和M ...

  6. layDate 日期与时间组件 入门

    首先第一步 在官方下载layDate文件.layUI官网:http://layer.layui.com/    https://www.layui.com/laydate/ layDate文件的下载步 ...

  7. layui之日期和时间组件

    参考文档:https://www.layui.com/doc/modules/laydate.html代码片段如下: layui.use('laydate', function(){ var layd ...

  8. laydate时间组件

    laydate时间组件使用笔记 /*! laydate-v5.0.9 日期与时间组件 MIT License http://www.layui.com/laydate/ By 贤心 */ ;!func ...

  9. vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...

随机推荐

  1. 数值分析之QR因子分解篇

    在数值线性代数中,QR因子分解的思想比其他所有算法的思想更为重要[1].                                       --Lloyd N. Trefethen &amp ...

  2. 技巧分享：解决Word 2010当中&OpenCurlyDoubleQuote;分页符”造成的空白行

    技巧分享:解决Word 2010当中“分页符”造成的空白行 P1:关于“分页符” 在Word当中插入“分页符”之后,后面的内容就会“更起一段”.就好像“换行符”(回车)会让后面的内容“另起一行”一样. ...

  3. linux常用命令简单介绍&lpar;netstat&comma;awk&comma;top&comma;tail&comma;head&comma;less&comma;more&comma;cat&comma;nl&rpar;

    1.netstat netstat -tnl | grep 443 (查看443端口是否被占用) root用户,用netstat -pnl | grep 443 (还可显示出占用本机443端口的进程P ...

  4. 大数据揭示的10个常见JAVA编程错误

    初学者最常犯的编程错误是什么呢?有可能他们总是混淆等值(==)与赋值(=),或者 & 和 &&:也有可能是他们在循环中使用错误的分隔符(for (int i = 0, i &l ...

  5. Html基础详解之（jquery）

    jquery选择器: #id 根据给定的ID匹配一个元素,如果选择器中包含特殊字符,可以用两个斜杠转义.(注:查找 ID 为"myDiv"的元素.) <!DOCTYPE ht ...

  6. angularjs中的下拉框默认选中

    1.  ng-init  属性: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  7. opencv学习之路（17）、边缘检测

    一.概述 二.canny边缘检测 #include "opencv2/opencv.hpp" using namespace cv; void main() { //Canny边缘 ...

  8. hive sql 语句执行顺序及执行计划

    hive 语句执行顺序 from... where.... select...group by... having ... order by... 执行计划 Map Operator Tree: Ta ...

  9. Linq模型ObjectContext下查看Sql语句。

    ObjectContext 并没有提供 LINQ to SQL DataContext.Log 这样的功能,要查看实际生成的 T-SQL 语句,要么借助 SQL Server Sql Profiler ...

  10. Elasticsearch基础知识

    ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口Elasticsearch是用Java开发的,并作为Apache ...

相关文章