<!--
laydate 日期时间控件
下载地址 http://www.layui.com/laydate/
这里用到版本为 layDate-v5.0.2
下载后将 laydate 文件夹放到项目根目录 对于输入框,如果用户乱填 laydate会智能纠错。(可以尝试在上述表单输入任意值,然后点击页面其它处测试一下) 注意事项
1,解压后,将压缩包内laydate整个文件夹放至项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系。
2,使用只需在页面引入laydate.js即可。
3,如果网站的js采用合并或模块加载,需要打开laydate.js,修改path。 thinkPHP调用需要把 laydate 文件夹放到根目录,然后在模板页中按如下方式调用 --> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layDate 独立版</title>
</head>
<body>
<input type="text" id="test_txt" placeholder="yyyy-MM-dd"/>
<input type="button" id="test_but" value="点我也弹日期面板"/>
<div id="test_div">测试DIV</div>
<script type="text/javascript" src="laydate/laydate.js"></script>
<script type="text/javascript">
//执行一个laydate实例
var test_var = laydate.render({
elem: '#test_txt' //指定元素
//使用时选择一种type类型即可
//年选择器
,type: 'year'
//年月选择器
,type: 'month'
//时间选择器
,type: 'time'
//日期时间选择器
,type: 'datetime'
//日期选择器
,type: 'date' //国际版 变成英文
//,lang: 'en' //自定义格式
//,format: 'yyyy年M月d日H时m分s秒' //限定可选日期
//可选最小日期
,min: '2017-08-05'
//可选最大日期
,max: '2017-09-13'
//前后若干天可选,这里以7天为例
,min: -7
,max: 7
//限定可选时间
,min: '2017-08-05 09:30:00'
,max: '2017-09-13 17:30:00' //限定面板下方显示的按钮,这里是 清空,现在,确定三个按钮
//,btns: ['clear', 'now', 'confirm']
//打开日期面板默认选中值
,value: '2017-08-29'
//面板打开后执行其中动作
,ready: function(){
//提示内容
test_var.hint('日期可选值设定在 <br> 2017-08-05 到 2017-09-13');
}
//选中日期确定后的回调
,done: function(value, date){
alert('done你选择的日期是:' + value + '\n获得的对象是' + JSON.stringify(date));
}
//面板点击日期切换(并未确定)时回调
,change: function(value, date){
alert('change你选择的日期是:' + value + '\n\n获得的对象是' + JSON.stringify(date));
}
//不出现底部栏
//,showBottom: false //自定触发义事件,这里指定当鼠标指针移动到元素上方,并按下鼠标按键时
,trigger: 'mousedown'
//,trigger: 'click'
//额外设定可触发元素,同点击本身元素同触发条件
,eventElem: '#test_but'
}); //非input元素
laydate.render({
elem: '#test_div'
});
</script>
</body>
</html>
04-14 10:56