bootstrap-datepicker日期选择器的使用

最新推荐文章于 2025-06-03 09:04:09 发布

Dove言和

最新推荐文章于 2025-06-03 09:04:09 发布

阅读量556

点赞数

分类专栏：前端进阶之路_开启前端web逆袭之路文章标签： bootstrap-datepicker

前端进阶之路_开启前端web逆袭之路专栏收录该内容

35 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客介绍了如何使用bootstrap-datepicker，包括导入文件、HTML代码实现、日期显示设置、开始和结束时间控制以及清除功能，提供了详细的操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

以上文件都可以百度或GitHub上获取下载

2.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.日期显示设置：

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

4.开始时间和结束时间控制

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

5.清空

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

效果