bootstrap 的 datetimepicker，同时有日期和时间，且开始时间要早于结束时间-白红宇

bootstrap 的 datetimepicker，同时有日期和时间，且开始时间要早于结束时间

阅读量：5257 次

发布时间：2019-06-14

本文共 1754 字，大约阅读时间需要 5 分钟。

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

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

然后写html里，开始时间和结束时间的选择

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);        }    });