bootstrap-datepicker的使用

bootstrap-datepicker插件压缩包

引入css

<link rel="stylesheet" href="{% static 'plugin/bootstrap-datepicker/css/bootstrap-datepicker.min.css' %}">

引入js

<script src="{% static 'plugin/bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}"></script>
<script src="{% static 'plugin/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js' %}"></script>




$(function () {
   
    initDatePicker();
})


/*
添加对话框：初始化时间选择
 */
function initDatePicker() {

    $('#id_start_date,#id_end_date').datepicker({
        format: 'yyyy-mm-dd',
        startDate: '0',
        language: "zh-CN",
        autoclose: true
    });
}

html处理

<div class="form-group clearfix">
 <!-- 开始时间 -->
  <div class="col-md-6 pd-0">
      <label for="inputPassword3" class="col-md-4 control-label">开始时间</label>
      <div class="col-md-8">

          <div class="input-group">
              <span class="input-group-addon" id="sizing-addon2">
                  <i class="fa fa-calendar" aria-hidden="true"></i>
              </span>
              {{ form.start_date }}
          </div>
          <span class="error-msg"></span>

      </div>
  </div>

  <!-- 截止时间 -->
  <div class="col-md-6 pd-0">
      <label for="inputPassword3" class="col-md-4 control-label">截止时间</label>
      <div class="col-md-8">

          <div class="input-group">
              <span class="input-group-addon" id="sizing-addon2">
                  <i class="fa fa-calendar" aria-hidden="true"></i>
              </span>
              {{ form.end_date }}
          </div>
          <span class="error-msg"></span>
      </div>
  </div>
</div>