如何动态创建引导日期选择器?
[英] How to dynamically create bootstrap datepicker?
本文介绍了如何动态创建引导日期选择器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要使用 jQuery 动态创建一个日期选择器.在我的表单中，我将有按钮来创建日期选择器.
以下是我目前尝试过的代码:
<div class="form-group"><label for="examDate" class="col-sm-2 caption"><fmt:message key="exam.date"/>:<strong style="font-size:14px;"class="星号">*</strong><div class="col-sm-4"><div class="input-group date"><input type="datetime" class="form-control ExamDate" id="examDate" name="examDate" value="" readonly ><div class="input-group-addon" class="examDateCalendarIcon"><i class="fa fa-calendar"></i>
<div class="help-block with-errors"></div>
<div class="form-group ExamDateTemplate" style="display: none;"><label for="examDate" class="col-sm-2 caption"></label><div class="col-sm-4"><div class="input-group date"><input type="datetime" class="form-control ExamDate" name="examDate" value="" readonly ><div class="input-group-addon" class="examDateCalendarIcon"><i class="fa fa-calendar"></i>
<div class="input-group-addon"><i class="fa fa-minus-circle"></i>
<div class="form-group"><label for="examDate" class="col-sm-2 caption"><div class="col-sm-4"><button id="addExamDateBtn" type="button" class="btn btn-sm btn-primary"><span class="fa fa-plus"> </span><fmt:message key="add"/>
JavaScript 代码如下:
$("#addExamDateBtn").click(function(){var ExamDateClonedObj = $(".examDateTemplate").clone();$(examDateClonedObj).removeClass("examDateTemplate");$(examDateClonedObj).appendTo("#examDatesContainer");$(examDateClonedObj).show();$('.datepicker').datetimepicker('update');});$('.examDate').datetimepicker({格式:'DD/MM/YYYY',忽略只读:真，showTodayButton: 真});
基本上我最初只显示一个日期选择器.然后我有一个按钮来添加更多的日期选择器.日期选择器的模板是隐藏的，点击添加更多"按钮，我只需克隆它并将其添加到 DOM.
解决方案
使用下面的代码
$('body').on('focus',".examDate", function(){$(this).datetimepicker({格式:'DD/MM/YYYY',忽略只读:真，showTodayButton: 真});});
这样动态创建的元素也可以初始化日期时间选择器.
发布了一个工作示例:Jsfiddle
I need to create a date picker dynamically using jQuery. In my form I will have button to create date picker.
Below is the code I tried so far:
<div id="examDatesContainer">
<div class="form-group">
<label for="examDate" class="col-sm-2 caption">
<fmt:message key="exam.date"/>:<strong style="font-size:14px;" class="asterisk">*</strong>
</label>
<div class="col-sm-4">
<div class="input-group date">
<input type="datetime" class="form-control examDate" id="examDate" name="examDate" value="" readonly >
<div class="input-group-addon" class="examDateCalendarIcon">
<i class="fa fa-calendar"></i>
</div>
</div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group examDateTemplate" style="display: none;">
<label for="examDate" class="col-sm-2 caption"></label>
<div class="col-sm-4">
<div class="input-group date">
<input type="datetime" class="form-control examDate" name="examDate" value="" readonly >
<div class="input-group-addon" class="examDateCalendarIcon">
<i class="fa fa-calendar"></i>
</div>
<div class="input-group-addon">
<i class="fa fa-minus-circle"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="examDate" class="col-sm-2 caption">
</label>
<div class="col-sm-4">
<button id="addExamDateBtn" type="button" class="btn btn-sm btn-primary">
<span class="fa fa-plus"> </span>
<fmt:message key="add"/>
</button>
</div>
</div>
and the JavaScript code is as below:
$("#addExamDateBtn").click(function(){
var examDateClonedObj = $(".examDateTemplate").clone();
$(examDateClonedObj).removeClass("examDateTemplate");
$(examDateClonedObj).appendTo("#examDatesContainer");
$(examDateClonedObj).show();
$('.datepicker').datetimepicker('update');
});
$('.examDate').datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
showTodayButton: true
});
Basically I show a single datepicker initially. Then I have a button to add more date pickers. Template for datepicker is hidden, on click of "add more" button I just clone it and add it to the DOM.
解决方案
Use this code below
$('body').on('focus',".examDate", function(){
$(this).datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
showTodayButton: true
});
});
This way the dynamically created elements can also initialize the datetimepicker.
A working example is posted : Jsfiddle
这篇关于如何动态创建引导日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
