日期时间控件[通俗易懂]
日期 时间 通俗易懂 控件
2023-06-13 09:11:44 时间
大家好,又见面了,我是你们的朋友全栈君。
标题
开发软件使用到日期时间控件的地方很多,但是很多时候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'
});
控件下载 https://download.csdn.net/download/liyonghewangtao/10647254
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/142169.html原文链接:https://javaforall.cn
相关文章
- sql 时间日期格式转换[通俗易懂]
- oracle的todate函数的日期格式_oracle limit的用法
- MySQL获取当前时间与日期间隔[通俗易懂]
- js将字符串时间转换为date对象_js转换日期格式
- js将时间戳转化为年月日时分秒_时间戳转换成日期
- 解决PHP时间戳中月份、日期前带不带0的问题
- 【蓝桥OJ——C语言】顺子日期、特殊时间、乘积尾零
- Mongodb 如何将时间戳转换为年月日日期
- JS获取当前日期时间并定时刷新详解编程语言
- 函数MySQL中的日期函数:精准的时间控制(mysql中的date)
- Oracle日期类型:一种更佳的时间管理方式(oracle日期型)
- 处理掌握Oracle中日期数据处理技巧(oracle日期数据)
- Oracle抓取当前日期的实践方法(oracle取当前日期)
- Oracle中实现日期转换为字符串(oracle日期转换字符串)
- MySQL实现日期查询的简易方法(mysql查询date)
- MySQL中用正则表达式判断日期格式(mysql判断日期格式)
- MySQL教程:时间戳转日期(mysql将时间戳转换成日期)
- MySQL中处理日期和时间的方法(mysql日期时间)
- 类型Oracle中如何创建日期类型数据库表(oracle中创建日期)
- 日期函数扩展类Ver0.1.1
- phpMysql日期和时间函数集合
- DB2日期和时间的函数应用说明
- mysql中取系统当前时间,当前日期方便查询判定的代码
- js中的时间转换—毫秒转换成日期时间的示例代码
- c#的时间日期操作示例分享(c#获取当前日期)
- ORACLE毫秒与日期的相互转换示例