如何使用 JQuery 3.3.1 和 Bootstrap 3.3.7 设置日期选择器？

Question

我必须为几种不同形式的输入字段设置日期选择器。过去我使用 jQuery 日期选择器，但对于这个项目我使用 Bootstrap 3 所以还有另一种方法可用。这是我到目前为止的例子：

$(document).ready(function() {
  $('.datepick').datetimepicker();
});

<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<script language="javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<div class="form-group required">
  <div class="input-group">
    <input type="text" class="form-control datepick" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required>
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

您可以看到上面的代码片段有效，但我想修改的地方很少。首先，我希望输入字段为 readonly。用户应该能够点击日历图标，然后选择 date only。我不需要日期旁边的时间。单击该图标将阻止用户输入他们想要的任何内容。我想知道是否有办法通过 bootstrap 和 jquery 中的日期选择器实现此目的？

Answer 1

您必须将 datepick class 从 <input> 移动到 <div> 和 input-group class，才能让用户打开点击日历图标的选择器。

然后你必须在输入中添加只读属性并将ignoreReadonly选项设置为true。

使用 format 选项自定义日期格式并隐藏时间选择器，如文档所述：

See momentjs' docs for valid formats. Format also dictates what components are shown, e.g. MM/dd/YYYY will not display the time picker.

这是一个活生生的例子：

$(document).ready(function() {
  $('.datepick').datetimepicker({
    format: 'L',
    ignoreReadonly: true
  });
});

<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<script language="javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<div class="form-group required">
  <div class="input-group datepick">
    <input type="text" class="form-control" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required readonly>
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

Answer 2

将以下属性添加到您的输入元素

readonly data-date-ignore-readonly="true" data-date-format="MM/DD/yyyy"

$(document).ready(function() {
  $('.datepick').datetimepicker();
});

<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<script language="javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<div class="form-group required">
  <div class="input-group">
    <input readonly data-date-ignore-readonly="true" data-date-format="MM/DD/yyyy" type="text" class="form-control datepick" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required>
    <div class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

如何使用 JQuery 3.3.1 和 Bootstrap 3.3.7 设置日期选择器？

How to set date-picker with JQuery 3.3.1 and Bootstrap 3.3.7?

jquery

datepicker

twitter-bootstrap

twitter-bootstrap-3

eonasdan-datetimepicker