快速上手日期插件laydate

最新推荐文章于 2024-08-22 17:29:05 发布

dengcai7005

最新推荐文章于 2024-08-22 17:29:05 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/myIvan/p/9532337.html

版权

本文详细介绍了laydate日期插件的使用方法，包括独立版和layui模块版的引入方式，参数说明，如elem、type、range等，以及事件触发如ready、change、done。通过实例展示了如何设置日期范围、自定义事件、定位方式等，最后提供了开始日期和结束日期相互约束的完整案例。

摘要由CSDN通过智能技术生成

1、laydate

　　这款插件有独立版的，也有作为layui模块的，两种使用方式差不多，就引入有区别而已

<!--这是作为模块使用-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate快速使用</title>
  <link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
 
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
  <input type="text" class="layui-input" id="test1">
</div>
 
<script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});
</script>
</body>
</html>

<!--独立使用-->

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>使用 layDate 独立版</title>
</head>
<body>
　　<input type="text" id="test1">

　　<script src="laydate.js"></script>
　　<script>
　　　　//执行一个laydate实例
　　　　laydate.render({
　　　　　　elem: '#test1' //指定元素
　　　　});
　　</script>
</body>
</html>

2、参数说明：

elem：绑定的元素

type：控件选择类型，有year(年）、month（年月）、date(默认值，年月日)、time(时分秒)、datetime(年月日时分秒)

range：true或者范围连接符开启范围选择，也可自定义范围连接符为‘~’或者其他

format ：定义格式yyyy(年，四位数，不足补0)、y（年，任意位数）、MM（月，两位）、M（1位数）、dd、d、HH、H、mm、m、ss、s

value：初始值，必须遵循format定义的格式，如：'2018-08-24'

isInitValue ：初始值填充（配合value使用，默认值为：true）

min/max ：最小/大范围内的日期时间值（

　　如果值是字符串，必须严格遵循日期格式，如果是整数，小于86400000，则表示几天前或几天后；大于86400000，则会将时间戳转化为日期格式。如：最大日期：公元2018年1月1日

）

/日期有效范围只限定在：2017年
laydate.render({ 
  elem: '#test'
  ,min: '2017-1-1'
  ,max: '2017-12-31'
});
 
//日期有效范围限定在：过去一周到未来一周
laydate.render({ 
  elem: '#test'
  ,min: -7 //7天前
  ,max: 7 //7天后
});
 
//日期时间有效范围的设定: 
laydate.render({ 
  elem: '#test'
  ,type: 'datetime'
  ,min: '2017-8-11 12:30:00'
  ,max: '2017-8-18 12:30:00'
});
 
//时间有效范围设定在: 上午九点半到下午五点半
laydate.render({ 
  elem: '#test'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
});

trigger ：自定义弹出控件的事件，默认值：focus，如果绑定的元素非输入框，则默认事件为：click

show：直接显示，默认为false。如果是外部事件调用，需要设定 closeStop: '触发的元素'

position ：abolute（绝对定位，始终吸附在绑定元素周围。默认值），fixed（固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。），static（静态定位，控件将直接嵌套在指定容器中。）

zIndex ：层叠顺序，一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。

showBottom ：是否显示底部栏，默认为:true

btns ：工具按钮,默认值：['clear', 'now', 'confirm']

lang ：语言cn、en

theme：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

calendar ：是否显示公历节日，默认false

mark : 标注重要日子

mark: {
'0-10-14': '生日'
,'0-12-31': '跨年' //每年12月31日
,'0-0-10': '工资' //每个月10号
,'2017-8-15': '' //具体日期
,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章
,'2017-8-21': '发布'
}

3、几个触发事件

控件初始打开的回调：

laydate.render({
  elem: '#test'
  ,ready: function(date){
    console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
  }
});

日期时间被切换后的回调

laydate.render({
  elem: '#test'
  ,change: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  }
});

控件选择完毕后的回调

laydate.render({
  elem: '#test'
  ,done: function(value, date, endDate){
    console.log(value); //得到日期生成的值，如：2017-08-18
    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
  }
});

弹出控件提示

laydate.path = '/static/xxx/'; //laydate.js 所在目录
 
//配置好路径后，再调用
laydate.render(options);

4、完整案例（开始日期和结束日期相互约束）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>laydate</title>
    <!-- 引入css js -->
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
</head>
<body>      

    <input name="start" id="search-date-start" type="text" readonly  class="int2">至
    <input name="end" id="search-date-end" type="text" readonly  class="int2">
    <script>
        layui.use('laydate', function () {
            var laydate=layui.laydate;
            var today = new Date();
            var todayDate = today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate();//今天
            var startDate = laydate.render({
                elem: '#search-date-start',
                max: todayDate,
                done: function(value, date){
                    endDate.config.min ={
                        year:date.year,
                        month:date.month-1, //关键
                        date: date.date,
                    };
                }
            });
            var endDate = laydate.render({
                elem: '#search-date-end',
                max: todayDate,
                done: function(value, date){
                        startDate.config.max ={
                        year:date.year,
                        month:date.month-1, //关键
                        date: date.date,
                    };
                }
            });
        });
    </script>
</body>
</html>