bootstrap-datepicker日期选择器的使用

这篇博客介绍了如何使用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();
      }

效果

原文链接https://blog.youkuaiyun.com/ella7/article/details/80932612 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值