bootstrap时间插件使用方法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>bootstrap时间插件用法</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/datepicker3.css" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
        <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    </head>

    <body>
        <div class="form-group">
            <label>参加工作时间 <em>*</em></label>
            <input type="text" class="form-control" readonly="readonly" data-verify data-noempty="参加工作时间不能为空" name="starttime" id="starttime" placeholder="请选择参加工作时间">
        </div>
    </body>

</html>
<script>
    $(document).ready(function() {
        $('.contact-box').each(function() {
            animationHover(this, 'pulse');
        });
        $('#starttime').datetimepicker({
            language: 'zh-CN',
            startDate: new Date(),
            format: "yyyy-mm-dd hh:ii",
            autoclose: true,
            todayBtn: true,
        }).on('changeDate', function(ev) {
            var d = $('#starttime').val();
            if(d != "") {
                $('#endtime').datetimepicker('setStartDate', $('#starttime').val());
            }
        });
        $('#endtime').datetimepicker({
            language: 'zh-CN',
            startDate: new Date(),
            format: "yyyy-mm-dd hh:ii",
            autoclose: true,
            todayBtn: true,
        }).on('changeDate', function(ev) {
            var d = $('#endtime').val();
            if(d != "") {
                $('#starttime').datetimepicker('setEndDate', d);
            }
        });

    });
</script>
下载demo链接：https://i.cnblogs.com/Files.aspx
bootstrap时间插件使用方法

猜你喜欢
