Bootstrap-datetimepicker日期插件简单使用

最新推荐文章于 2024-09-02 09:17:53 发布

转载最新推荐文章于 2024-09-02 09:17:53 发布 · 126 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/eleven258/p/9686250.html

标签

#javascript #ViewUI

本文详细介绍Bootstrap的DateTimePicker插件使用方法，包括配置参数、事件绑定及日期格式化等，帮助快速掌握日期时间选择器的运用。

写在前面:

　　日期组件有很多,这里简单的记录下bootstrap的一个日期插件datetimepicker，使用方法比较简单，基本上看一些就会了，但是还是记录下。

　　这个就不过多的说了，简单粗暴上代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>datetimpicker测试</title>
    <!--图标样式-->
    <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" />
    <link href="${baseURL}/Bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
    <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
    <script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <style type="text/css">
    </style>

</head>
<body>
    <div style="height:500px;border: 1px solid #f79646">
        <div>
            <form id="header_form" method="" action="" >
                &nbsp;&nbsp;&nbsp;
                <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Date</label>
                <input type="text"  id="input_date" name="recordDate" style="border:0.5px solid #fac090"/>
            </form>
        </div>
    </div>
</body>

<script type="text/javascript">

    $(function(){
        $("#input_date").datetimepicker({
            bootcssVer:3,  //bootstrap-datetimepicker＋bootstrap v3，但这个插件使用的时候，并没有和V3相匹配，仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3，否则datetimepicker不会显示出上、下个月的箭头
            format: 'yyyy-mm-dd',
            minView: 'month',//设置时间选择为年月日 去掉时分秒选择
            todayBtn: true, //如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。
            language: 'zh-CN',
            autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
            keyboardNavigation: true, //是否允许通过方向键改变日期。
            forceParse: true, //当选择器关闭的时候，是否强制解析输入框中的值。
            todayHighlight: 1  //如果为true, 高亮当前日期
        }).on("click", function () {
            //設置可选的最后日期為當前日期
            $("#input_date").datetimepicker("setEndDate", getToday())
        });
    });

    //獲取當前日期
    function getToday(){
        var today = new Date()
        var year = today.getFullYear();
        var month = today.getMonth() + 1;
        var day = today.getDate();
        var todayStr = year+"-"+month+"-"+day;
        return todayStr;
    }
</script>
</html>