如何为启动日期选择器调用JavaScript函数？

Question

我正在尝试使用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函数，那么如何正确调用我的函数，以便此datepicker正常工作？ 任何关于实际情况的简单解释也将是一个加号。 谢谢

Answer 1

为了使bootstrap-datepicker正确运行，您的网站应包含以下3个文件：

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

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

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

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

我的代码没有其他问题。

Answer 2

在您的js文件中添加以下内容

$(document).ready(function() {

$('.src_date').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true
  })
;

这可能对您有帮助

如何为启动日期选择器调用JavaScript函数？

问题描述

2 个解决方案

解决方案1
0 2015-01-29 22:11:14

解决方案2
0 2015-01-29 22:27:01

如何为启动日期选择器调用JavaScript函数？

问题描述

2 个解决方案

解决方案1 0 2015-01-29 22:11:14

解决方案2 0 2015-01-29 22:27:01

解决方案1
0 2015-01-29 22:11:14

解决方案2
0 2015-01-29 22:27:01