Question

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

rpc.NewClientWithCodec

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

您可以看到上面的代码段有效，但我想修改的内容很少。首先，我希望输入字段为 <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <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">  <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。我不需要时间旁边的日期。单击该图标将阻止用户输入他们想要的内容。我想知道是否有办法在bootstrap和jquery中使用日期选择器实现这一点？

Answer 1

您必须将datepick班级从<input>移至<div>班级input-group，让用户点击日历图标上的选择器。

然后，您必须将readonly属性添加到输入中，并将ignoreReadonly选项设置为true。

使用format选项自定义日期格式并隐藏时间戳，正如文档所说：

有关有效格式，请参阅momentjs' docs。格式还规定了显示哪些组件，例如MM/dd/YYYY不会显示时间选择器。

这是一个实时样本：

$(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设置日期选择器？

1 个答案: