Question

我正在使用bootstrap 4，jQuery 3.3.1和datepicker（http://www.eyecon.ro/bootstrap-datepicker/）

我有三个问题：

“日历”图标不是输入框的大小
提交时未选择日期，bootstrap验证消息无效。
自动关闭无效。

$(document).ready(function()
{
    $('#depositeDate').datepicker({
    "setDate": new Date(),
    "autoclose": true
    });
})


<div class="form-group row">
                    <label for="depositeDate" class="col-sm-4 col-form-label col-form-label-lg">Deposit Date</label>
                      <div class="col-sm-2 input-group date">
                       <input type="text" class=" text-input form-control"  id ="depositeDate" placeholder="MM/DD/YYYY">
                            <div class="input-group-addon">                                                                 
                                <i class="fas fa-calendar-alt fa-3x" style="color:RED"></i>                             </div>                          
                        <div class="invalid-feedback">
                          Please enter a valid Order Number.
                        </div>
                      </div>                        
                </div>

Answer 1

“日历”图标不是输入框的大小

input group addon的标记在Bootstrap 4.0 stable

中更改

Date date1 = calendar.getTime();
//current date to check that our week lies in same month or not
SimpleDateFormat checkformate = new SimpleDateFormat("MM/yyyy");
String currentCheckdate= checkformate.format(date1);

int weekn = calendar.get(Calendar.WEEK_OF_MONTH);
int month = calendar.get(Calendar.MONTH);
int year  = calendar.get(Calendar.YEAR);
//resat calender without date
calendar.clear();
calendar.setFirstDayOfWeek(Calendar.MONDAY);
calendar.set(Calendar.WEEK_OF_MONTH,weekn);
calendar.set(Calendar.MONTH,month);
calendar.set(Calendar.YEAR,year);

SimpleDateFormat simpleDateFormat = new SimpleDateFormat("dd/MM/yyyy");

Date datef = calendar.getTime();
//move date to 6 days + to get last date of week
Long timeSixDayPlus = calendar.getTimeInMillis()+518400000L;
Date dateL = new Date(timeSixDayPlus);
String firtdate = simpleDateFormat.format(datef);
String lastdate = simpleDateFormat.format(dateL);
String firtdateCheck = checkformate.format(datef);
String lastdateCheck = checkformate.format(dateL);

//if our week lies in two different months then we show only current month week part only
if (!firtdateCheck.toString().equalsIgnoreCase(currentCheckdate)) {
    firtdate = "1" + "/" + calendar.get(Calendar.MONTH) + "/" + calendar.get(Calendar.YEAR);
}
if (!lastdateCheck.toString().equalsIgnoreCase(currentCheckdate)) {
    int ma = calendar.getActualMaximum(Calendar.DAY_OF_MONTH);
    lastdate = String.valueOf(ma) + "/" + calendar.get(Calendar.MONTH) + "/" + calendar.get(Calendar.YEAR);
}
Log.e("current","=>>"+firtdate+" to "+lastdate);

您的代码应为

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

3.Auto close无效。

我没有看到像<div class="input-group date" > <input type="text" class="form-control" id ="depositeDate" placeholder="MM/DD/YYYY"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2"><span class="fa fa-calendar"></span></span> </div> </div>这样的设置，我们应该明确要求关闭日期选择器。

"autoclose": true

Answer 2

<div class="form-group row justify-content-center align-items-center">
                    <label for="depositeDate" class="col-sm-3 col-form-label">Deposit Date</label>
                      <div class="col-sm-3 input-group date" >
                       <input type="text" class="text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
                        <div class="input-group-addon" style="cursor: pointer;" onclick="$('#depositeDate').focus();">
                            <i class="fas fa-calendar-alt fa-2x"></i>
                        </div>                                                                                
                      </div>                        
                </div>

Answer 3

此代码将执行：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">




<br>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>

      <div class="form-group">
        <label for="Order number">Order number</label>
        <input type="text" id="Order number" >


      </div>


      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <label for="male">Deposit Date</label>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>

    </div>
  </div>
</div>
<script>$(function() {
  $('#datetimepicker1').datetimepicker();
});</script>

查看小提琴：https://jsfiddle.net/rqy7L2do/

Bootstrap 4 DatePicke问题

3 个答案: