Bootstrap3 Bootstrap4 datetimepicker控件之smalot的使用
l2qq · 2020-12-05 11:55
字数 12846 评论 0 收藏 0 点赞 0

Bootstrap3 日期+时间选择控件

1.支持日期选择，格式设定

2.支持时间选择

3.支持时间段选择控制

4.支持中文

官网地址：http://eonasdan.github.io/bootstrap-datetimepicker/

git地址：https://github.com/Eonasdan/bootstrap-datetimepicker

moment语言包：https://github.com/moment/moment

datetimepicker使用配置说明：http://eonasdan.github.io/bootstrap-datetimepicker/Options/

moment时间格式化使用说明：http://momentjs.com/docs/

使用方法，引用的文件：

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen"
          href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="./css/prettify-1.0.css" rel="stylesheet">-->
    <!--<link href="./css/base.css" rel="stylesheet">-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet">

    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
               </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>
</body>
<html>


datetimepicker 汉化：

$('.datetimepicker').datetimepicker({
   locale: moment.locale('zh-cn')
});
$(".datetimepicker").on("dp.change", function (e) {
   $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});

datetimepicker 事件触发：

$(".datetimepicker").on("dp.change", function (e) {
   console.info("改变");
});

但是dp.change事件会触发两次，第一次点击和选中日期或者时间的时候触发。所以建议改成用dp.hide

$(".datetimepicker").on("dp.hide", function (e) {
   console.info("改变");
});


最新评论 0