如何为引导日期选择器调用javascript函数

How to call javascript function for bootstrap datepicker?

本文关键字：选择器 调用 javascript 函数 日期      更新时间：2023-09-26

我正在尝试使用引导框架向我的表单添加一个日期选择器。我对前端开发非常感兴趣，并且很难理解代码的去向以及为什么我使用的示例不起作用。这是我的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
  })
;

这可能会对您有所帮助

要使引导日期选择器正常运行，您的网站应包含以下 3 个文件：

  • twitter-bootstrap CSS 文件
  • bootstrap-datepicker CSS 文件
  • bootstrap-datepicker js 文件

这是迷你演示项目供您试用。CSS 部分仅包含bootstrap-datepicker项目的部分。为了使图标正常工作，还应加载另一个文件。它被称为字形，应该位于css/fonts目录中。阅读更多关于如何使用glyphicons的信息。

bootstrap-datepicker包含2个不同的CSS文件。一个用于现代浏览器，另一个用于带有前缀的旧浏览器。

浏览器是否正在加载您的js和css文件？https://ui.oreillyauto.com/域上托管的所有文件对我来说都返回404错误。

我没有看到您的代码存在任何其他问题。

相关文章：