twitter-bootstrap 如何使用 JQuery 3.3.1 和 Bootstrap 3.3.7 设置日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50627275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set date-picker with JQuery 3.3.1 and Bootstrap 3.3.7?
提问by espresso_coffee
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:
我必须为几种不同形式的输入字段设置日期选择器。过去我使用过 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>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?
你可以看到上面的代码片段有效，但我想修改的东西很少。首先，我希望输入字段为readonly. 用户应该能够点击日历图标，然后选择date only。我不需要日期旁边的时间。单击该图标将阻止用户输入他们想要的内容。我想知道是否有办法在 bootstrap 和 jquery 中使用日期选择器来实现这一点？
回答by VincenzoC
You have to move datepickclass from <input>to the <div>with the input-groupclass, to let the user open the picker clicking on the calendar icon.
你必须移动datepick从类<input>的<div>与input-group类，让用户打开日历图标选择器点击。
Then you have to add readonly property to the input and set ignoreReadonlyoption to true.
然后您必须将 readonly 属性添加到输入并将ignoreReadonly选项设置为true.
Use formatoption to customize date format and to hidetimepicker, as the docs says:
使用format选项自定义日期格式并隐藏时间选择器，如文档所述：
See momentjs' docsfor valid formats. Format also dictates what components are shown, e.g.
MM/dd/YYYYwill not display the time picker.
有关有效格式，请参阅momentjs 的文档。格式还规定了显示哪些组件，例如
MM/dd/YYYY不会显示时间选择器。
Here a live sample:
这是一个实时示例：
$(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>