开始时间-结束时间控件bootstrap-datetimepicker

本人用的是bootstrap-datetimepicker插件

一.引入相关资源

  <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="./css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./js/bootstrap-datetimepicker.min.js"></script>

二.html代码

        <input size="16" type="text" id="datetimeStart" style="width: 100px;" readonly class="form_datetime">
        --
        <input size="16" type="text" id="datetimeEnd" style="width: 100px" readonly class="form_datetime">

三.js代码

    $("#datetimeStart").datetimepicker({
        format: 'yyyy-mm-dd',
        minView:2,
        language: 'zh-CN',
        autoclose:true,
        // startDate:new Date()
    }).on("click",function(){
        $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
    });
    $("#datetimeEnd").datetimepicker({
        format: 'yyyy-mm-dd',
        minView:2,
        language: 'zh-CN',
        autoclose:true,
        // startDate:new Date()
    }).on("click",function(){
        $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
    });

bootstrap-datetimepicker文档：https://www.bootcss.com/p/bootstrap-datetimepicker/