日期时间控件[通俗易懂]

全栈程序员-站长 • 2022年5月24日上午11:40 • 未分类 • 阅读 32

大家好，又见面了，我是你们的朋友全栈君。

标题

开发软件使用到日期时间控件的地方很多，但是很多时候Html5自带的时间控件无法满足开发的需要，所以使用这种时间控件完全没有问题

引用
很多时候我们开发引用别人的控件时候，发现老是出现错误，是因为我们引用出现错误，我在使用日期时间控件的时候也出现了这样的问题所以文件一点要放正确，多的浪费，少了要命，请把以下标注的文件全部放入到引用的文件夹里面

这里写图片描述

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 独立版</title>
</head>
<body>
<input type="text" id="test1">
<script src="/laydate/laydate.js"></script> <!-- 改成你的路径 -->
        <script> //执行一个laydate实例 laydate.render({ elem: '#test1' //指定元素 }); </script>
</body>
</html>

基本的时间日期选择器

这里写图片描述
代码

//年选择器
laydate.render({
  elem: '#test2'//input标签的 Id
  ,type: 'year'
});
//年月选择器
laydate.render({
  elem: '#test3'
  ,type: 'month'
});
//时间选择器
laydate.render({
  elem: '#test4'
  ,type: 'time'
});
//时间选择器
laydate.render({
  elem: '#test5'
  ,type: 'datetime'
});

日期范围时间选择
这里写图片描述
代码

//日期范围
laydate.render({
  elem: '#test6'
  ,range: true
});
//年范围
laydate.render({
  elem: '#test7'
  ,type: 'year'
  ,range: true
});
//年月范围
laydate.render({
  elem: '#test8'
  ,type: 'month'
  ,range: true
});
//时间范围
laydate.render({
  elem: '#test9'
  ,type: 'time'
  ,range: true
});
//日期时间范围
laydate.render({
  elem: '#test10'
  ,type: 'datetime'
  ,range: true
});

其它功能
这里写图片描述
代码

//初始赋值
laydate.render({
  elem: '#test19'
  ,value: '1989-10-14'
});
//选中后的回调
laydate.render({
  elem: '#test20'
  ,done: function(value, date){
    alert('你选择的日期是：' + value + '\n获得的对象是' + JSON.stringify(date));
  }
});
//日期切换的回调
laydate.render({
  elem: '#test21'
  ,change: function(value, date){
    alert('你选择的日期是：' + value + '\n\n获得的对象是' + JSON.stringify(date));
  }
});
//不出现底部栏
laydate.render({
  elem: '#test22'
  ,showBottom: false
});
//只出现确定按钮
laydate.render({
  elem: '#test23'
  ,btns: ['confirm']
});
//自定义事件
laydate.render({
  elem: '#test24'
  ,trigger: 'mousedown'
});
//点我触发
laydate.render({
  elem: '#test25'
  ,eventElem: '#test25-1'
  ,trigger: 'click'
});
//双击我触发
lay('#test26-1').on('dblclick', function(){
  laydate.render({
    elem: '#test26'
    ,show: true
    ,closeStop: '#test26-1'
  });
});
//日期只读
laydate.render({
  elem: '#test27'
  ,trigger: 'click'
});
//非input元素
laydate.render({
  elem: '#test28'
});

当然也可以直接显示日期时间控件
这里写图片描述

代码

//直接嵌套显示
laydate.render({
  elem: '#test-n1'
  ,position: 'static'
});
laydate.render({
  elem: '#test-n2'
  ,position: 'static'
  ,lang: 'en'
});
laydate.render({
  elem: '#test-n3'
  ,type: 'month'
  ,position: 'static'
});
laydate.render({
  elem: '#test-n4'
  ,type: 'time'
  ,position: 'static'
});