bootstrap-datepicker日期选择器的使用

在项目开发中用到了datepicker日期选择器，自己在学习用法实际开发中遇到了很多问题，总结如下：

1.css和js文件的导入：

<!-- 日期控件所用css -->
<link href="static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

<!-- 使用日期控件的js -->
<script type="text/javascript" src="static/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/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>

以上css和js文件均可在GitHub上获取下载。

2.HTML页面主要代码：

因为是整个项目中的部分，只截取部分html代码：

<form role="form">
           	<div class="form-group">
                <label for="dtp_input1" class="col-md-1 control-label">开始时间</label>
                <div id="startdiv" class="input-group date form_date col-md-3" data-date="2017-11-01" data-date-format="yyyy-mm-dd" data-link-field="dtp_input1" data-link-format="yyyy-mm-dd">
                    <input input="start" class="form-control" size="16" type="text" placeholder="请选择开始时间" 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 for="dtp_input2" class="col-md-1 control-label">结束时间</label>
                <div id="endDiv" class="input-group date form_date col-md-3" data-date="2018-11-01" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input id="end" class="form-control" size="16" type="text" placeholder="请选择结束时间" 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_input2" value="" /><br/>
            </div>
             <div class="form-group">

                        	<button class="btn btn-default" type="submit">预测</button>
                        
              </div>
            </form>

3.js格式化：

日期显示设置：

   <script type="text/javascript">
   $('.form_date').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,   //今日日期按钮
		autoclose: 1,   //自动关闭
		todayHighlight: 1,   //高亮今日日期
		startView: 2,       //从日期视图开始
		minView: 2,
		forceParse: 0

		
    });

开始结束时间控制：

  $('#startdiv').unbind("change");
  $('#startdiv').change(function(){
    $('#endDiv').datetimepicker('setStartDate', $("#start").val());
  });
  $('#endDiv').unbind("change");
  $('#endDiv').change(function(){
    $('#startdiv').datetimepicker('setEndDate', $("#end").val());
  });

清空：

function clearForm(){
 69     $('#start').val('');
 70     $('#end').val('');
 71     //用于解决清空后，前后日期还会关联的问题
 72     $('.input-group-addon:has(span.glyphicon-remove)').click();
 73 }

4.演示效果：