bootstrap 的 datetimepicker，同時有日期和時間，且開始時間要早於結束時間

本文轉載自查看原文 2018-10-17 18:31 1297 html/js

首先，引入jquery, bootstrap 和 bootstrap-datetimepicker

datetimepicker的下載地址： http://www.bootcss.com/p/bootstrap-datetimepicker, bootstrap 和jquery直接搜官網即可，然后把文件放在static路徑下

<link href="static/bootstrapv3/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">

<script type="text/javascript" src="static/bootstrapv3/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/bootstrapv3/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

然后寫html里，開始時間和結束時間的選擇

<div class="form-group">
        <label class="col-md-2 control-label">開始時間</label>
        <div class="input-group date form_datetime col-md-5" id="start_datetime" data-date="2018-10-16T05:25:07Z" data-date-format="yyyy-mm-dd HH:ii" data-link-field="dtp_input1">
            <input class="form-control" size="6" type="text" id="start_datetime_input" name="start_datetime" value="" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
        </div>
        <input type="hidden" id="dtp_input1" value=""/><br/>
    </div>

<div class="form-group">
        <label class="col-md-2 control-label">結束時間</label>
        <div class="input-group date form_datetime col-md-5" id="end_datetime" data-date="2018-10-16T05:25:07Z" data-date-format="yyyy-mm-dd HH:ii" data-link-field="dtp_input1">
            <input class="form-control" size="6" type="text" id="end_datetime_input" name="end_datetime" value="" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
        </div>
        <input type="hidden" id="dtp_input1" value=""/><br/>
        <span id='end_validator' style="color: red">hello</span>
</div>

javascript代碼，主要是使用datetimepicker的 setStartDate和setEndDate兩個函數來設置顯示。

$('.form_datetime').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });

    const dateOptions = {
        language: 'zh-CN',
        format: 'yyyy-mm-dd HH:ii',
        minuteStep: 1,
        autoclose: true
    };

    $('#start_datetime').datetimepicker(dateOptions).on('show', function () {
        const endTime = $('#end_datetime_input').val();
        console.log('endTime')
        console.log(endTime)
        if (endTime !== '') {
            $(this).datetimepicker('setEndDate', endTime);
        } else {
            $(this).datetimepicker('setEndDate', null);
        }
    });

    $('#end_datetime').datetimepicker(dateOptions).on('show', function () {
        const startTime = $('#start_datetime_input').val();
        if (startTime !== '') {
            $(this).datetimepicker('setStartDate', startTime);
        } else {
            $(this).datetimepicker('setStartDate', null);
        }
    });