我正在尝试使用 Bootstrap 框架将日期选择器添加到我的表单中。我对前端开发非常陌生，很难理解代码的去向以及为什么我使用的示例不起作用。这是我的整个 jsp 页面:
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html lang="en">
<link rel="stylesheet" href="css/datepicker.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="https://ui.oreillyauto.com/ui/css/oreillybs-2.04r2.min.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="https://ui.oreillyauto.com/ui/js/jquery/jquery-1.7.2.min.js"> </script>
<script src="https://ui.oreillyauto.com/ui/js/jquery/plugins/oreillybs-2.04r1.js"></script>
<div class="page-header">
<h1>
<spring:message code="title.training"/>
</h1>
</div>
<div class="row-fluid">
<div class="span12">
<form:form method="post" modelAttribute="assignTraining" action="/javawebtraining/userTraining/save" class="form-horizontal">
<fieldset>
<legend><spring:message code="directions.assigntrain"/></legend>
<div class="control-group">
<label class="control-label" for="tmNumber"><spring:message code="label.tmnum"/></label>
<div class="controls">
<form:input path="tmNumber" class="input-xlarge" maxLength="10" />
<form:errors path="tmNumber" cssClass="form-errors" />
</div>
</div>
<input name="date" class="src_date" type="textarea" placeholder="DD-MM-YYYY" id="date" required>
<script type="text/javascript">
jQuery(function($){
$("#date").datepicker({format: 'dd-mm-yyyy'});
});
</script>
<div class="control-group">
<label class="control-label" for="moduleIds"><spring:message code="label.modules"/></label>
<div class="controls">
<c:forEach items="${modules}" var="module">
<label class="checkbox"><form:checkbox path="moduleIds" value="${module.id}" /> ${module.title}</label>
</c:forEach>
<form:errors path="moduleIds" cssClass="form-errors" />
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary"><spring:message code="button.submit"/></button>
<a href="/javawebtraining/module/admin" class="btn"><spring:message code="button.cancel"/></a>
</div>
</fieldset>
</form:form>
</div>
如你所见，我不知道自己在做什么。我刚刚开始添加来源和链接，因为我认为这不会有什么坏处。现在，日期选择器文本框以及图标都会显示，但日历不会弹出。我猜这是我的 javascript 函数，那么我如何正确调用我的函数以便这个日期选择器正常工作？对实际情况的任何简单解释也将是一个优点。谢谢
最佳答案
在你的js文件中添加以下内容
$(document).ready(function() {
$('.src_date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true
})
;
这可能对你有帮助
关于javascript - 如何调用bootstrap datepicker的javascript函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28222430/