首页 > 代码库 > bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件

2024-10-07 12:32:02   216人阅读

<!DOCTYPE html>
<head>
    <title>时间插件测试</title>
<style type="text/css">


</style>
</head>
<body>
<p>主体部分</p>
<input type="text" class="picker" placeholder="请选择日期" />

<div >
    时间插件是组合用法(注意引用是不同的！)

    1.公用部分
    css: bootstrap.min.css
    js:jquery-1.10.2.min.js

    2特有部分
    datatime组合
    css：bootstrap-datetimepicker.min.css
    js:bootstrap-datetimepicker.js
    bootstrap-datetimepicker.zh-CN.js
    $(".picker").datetimepicker({format: ‘yyyy-mm-dd hh:ii‘//日期格式})

    date组合
    css：bootstrap-datepicker.min.css
    js:bootstrap-datepicker.js
    bootstrap-datepicker.zh-CN.js
    $(".picker").datepicker({format: ‘yyyy-mm-dd‘//日期格式})

    time组合
    css：bootstrap-timepicker.min.css
    js:bootstrap-timepicker.js
    bootstrap-datepicker.zh-CN.js
    $(".picker").timepicker({format: ‘hh:ii:ss‘//日期格式})

    date、time都是由datetime简化而来，因此datetime更通用。

    注意使用date组合时，可能会与原有js、css冲突，可以注释看看
    <!--<link rel="stylesheet" href="http://www.mamicode.com/__PUBLIC__/Assets/css/bootstrap.min.css">-->
    <!--<script src="http://www.mamicode.com/__PUBLIC__/Assets/js/jquery-1.10.2.min.js"></script>-->
</div>

</body>

1.公用部分
<link rel="stylesheet" href="http://www.mamicode.com/__PUBLIC__/Assets/css/bootstrap.min.css">
<script src="http://www.mamicode.com/__PUBLIC__/Assets/js/jquery-1.10.2.min.js"></script>

2特有部分
<!--datatime组合-->
<link rel="stylesheet" href="http://www.mamicode.com/__PUBLIC__/Assets/js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
<script src="http://www.mamicode.com/__PUBLIC__/Assets/js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="http://www.mamicode.com/__PUBLIC__/Assets/js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
            $(function () {
                $(".picker").datetimepicker({
                    language: "zh-CN",
                    autoclose: true,//选中之后自动隐藏日期选择框
                    clearBtn: true,//清除按钮
                    todayBtn: true,//今日按钮
                   format: ‘yyyy-mm-dd hh:ii‘//日期格式
                   // format: ‘yyyy-mm-dd ‘//可行但操作麻烦
                });
            });
</script>

<!--date组合-->
<!--<link rel="stylesheet" href="http://www.mamicode.com/Public/Assets/css/datepicker.css">-->
<!--<script src="http://www.mamicode.com/Public/Assets/js/date-time/bootstrap-datepicker.min.js"></script>-->
<!--<script src="http://www.mamicode.com/Public/Assets/js/date-time/locales/bootstrap-datepicker.zh-CN.js"></script>-->
<script type="text/javascript">
    //                $(function () {
    //                    $(".picker").datepicker({
    //                        language: "zh-CN",//语言
    //                        autoclose: true,//选中之后自动隐藏日期选择框
    //                        clearBtn: true,//清除按钮
    //                        todayBtn: true,//今日按钮
    //                        format: ‘yyyy-mm-dd‘//日期格式
    //                    });
    //                });
</script>

<!--time组合-->
<!--<link rel="stylesheet" href="http://www.mamicode.com/Public/Assets/css/bootstrap-timepicker.css">-->
<!--<script src="http://www.mamicode.com/Public/Assets/js/date-time/bootstrap-timepicker.min.js"></script>-->
<script type="text/javascript">
//    $(function () {
//        $(".picker").timepicker({
//            language: "zh-CN",
//            autoclose: true,//选中之后自动隐藏日期选择框
//            clearBtn: true,//清除按钮
//            todayBtn: true,//今日按钮
//            format: ‘hh:ii:ss‘//日期格式
//        });
//    });
//  //没找到对应的汉化包。
</script>



</html>

bootstrap-datetimepicker bootstrap-datepicker bootstrap-timepicker 时间插件


联系
我们