如何使用JQuery 3.3.1和Bootstrap 3.3.7设置日期选择器? [英] How to set date-picker with JQuery 3.3.1 and Bootstrap 3.3.7?

问题描述

我必须为输入字段设置几种不同形式的日期选择器.在过去，我使用jQuery date-picker，但对于该项目，我使用Bootstrap 3，因此还有另一种可用的方法.这是我到目前为止的示例:

I have to set date picker for input fields in few different forms. In the past I have used jQuery date-picker but for this project I use Bootstrap 3 so there is another method that is available. Here is example that I have so far:

$(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中使用日期选择器来实现此目的?

You can see that snippet above works but there is few things that I would like to modify. First I would like input field to be readonly. User should be able to click on calendar icon and then chose date only. I do not need time next to the date. Clicking on the icon will prevent user to enter what ever they want. I'm wondering if there is a way to achieve this with date-picker in bootstrap and jquery?

推荐答案

您必须使用input-group类将datepick类从<input>移到<div>，以允许用户单击打开选择器日历图标.

You have to move datepick class from <input> to the <div> with the input-group class, to let the user open the picker clicking on the calendar icon.

然后，您必须在输入中添加只读属性，并设置 ignoreReadonly 选项true.

Then you have to add readonly property to the input and set ignoreReadonly option to true.

使用 format 选项来自定义日期格式并 hide 时间选择器，如文档所述:

Use format option to customize date format and to hide timepicker, as the docs says:

有关有效格式，请参见 momentjs的文档.格式还规定了要显示的组件，例如MM/dd/YYYY将不显示时间选择器.

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>

这篇关于如何使用JQuery 3.3.1和Bootstrap 3.3.7设置日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！