복붙노트

[SPRING] 봄, Jquery의 폼 태그 기반 Datepicker?

SPRING

봄, Jquery의 폼 태그 기반 Datepicker?

실제로 내 봄 응용 프로그램에서 내 JSP 코드에서 스프링 기반 양식 태그를 사용하고 있습니다.

그리고이

에 대한 기능을 추가하고, 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>

하지만 날짜 선택 도구가 작동하지 않습니다 (보이지 않음) ...

이 스프링 기반 양식 태그에 문제가 있습니까? 또는

내 코드에 문제가 있습니까?

해결법

  1. ==============================

    1.주로 참조 문제 때문입니다. 브라우저에서 Firebug 또는 개발자 도구를 사용하여 다음 사항을 확인하십시오.

    주로 참조 문제 때문입니다. 브라우저에서 Firebug 또는 개발자 도구를 사용하여 다음 사항을 확인하십시오.

    <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>
    
  2. ==============================

    2.jquery.js를로드하지 않는 것처럼 보입니다. ..... ui 구성 요소를 실행하려면 jquery 파일이 필요합니다.

    jquery.js를로드하지 않는 것처럼 보입니다. ..... ui 구성 요소를 실행하려면 jquery 파일이 필요합니다.

    jquery-ui.min.js 앞에 jquery.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>
    
  3. ==============================

    3.다음 코드로 시도해보십시오.

    다음 코드로 시도해보십시오.

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

    귀하의 코드는 수용 가능합니다.

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

    왜냐하면 모든 Spring MVC form 태그는 HTML5 자리 표시 자 같은 동적 속성을 지원하기 때문입니다. 이전 버전의 Spring을 사용하지 않는 한.

  4. from https://stackoverflow.com/questions/15826223/spring-form-tag-based-datepicker-in-jquery by cc-by-sa and MIT license