Spring，Jquery中基于Form标签的Datepicker？

Question

实际上在我的Spring应用程序中，我在我的jsp代码中使用基于spring的form标记。

并添加此<form:input>的功能，使用Jquery提供DatePicker。

这是我的Jsp代码..

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<link rel="stylesheet" href="resources/css/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="resources/css/custom.css" type="text/css">
<script type="text/javascript" src="resources/jquery/jquery-ui.min.js"></script>
    <form:form action="form/form1"
        modelAttribute="form1">
               <label class="control_label_c">From : </label>
          <div class="controls_c">
              <form:input type="text" path="fromDate" class="date-picker" />
        </div>
    </form:form>
<script>
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
</script>

但是日期选择器无法正常工作（不可见）......

这个基于弹簧的表格标签有问题吗？或

我的代码有什么问题吗？

Answer 1

这主要是因为参考问题。请检查以下内容，最好使用浏览器中的Firebug或开发人员工具

1. 正确引用了兼容jQuery版本的jQuery UI
2. 正确引用了jQuery UI CSS
3. 引用了jQuery UI js



<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Answer 2

看起来你没有加载jquery.js .....你需要jquery文件来运行ui组件..

加载jquery.js befor jquery-ui.min.js

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript" src="resources/jquery/jquery-ui.min.js"></script>

Answer 3

尝试使用以下代码

<form:input path="fromDate" cssClass="date-picker" />

您的代码可以接受，

<form:input type="text" path="fromDate" class="date-picker" />

因为所有Spring MVC表单标记都支持HTML5 placeholder等动态属性。除非您使用的是旧版本的Spring。