问题描述
我必须为输入字段设置几种不同形式的日期选择器.在过去,我使用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:
这里有一个现场样本:
$(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设置日期选择器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!