laydate日期控件

<!-- 
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 + '
获得的对象是' + JSON.stringify(date));
    }
    //面板点击日期切换(并未确定)时回调
    ,change: function(value, date){
        alert('change你选择的日期是:' + value + '

获得的对象是' + JSON.stringify(date));
    }
    //不出现底部栏
    //,showBottom: false

    //自定触发义事件,这里指定当鼠标指针移动到元素上方,并按下鼠标按键时
    ,trigger: 'mousedown'
    //,trigger: 'click'
    //额外设定可触发元素,同点击本身元素同触发条件
    ,eventElem: '#test_but'
});

//非input元素
laydate.render({
    elem: '#test_div'
});
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/dreamhome/p/6993448.html