CODEWITHSUNDEEP
jqueryspringjsp
Java Developer
Java Developer

Reputation: 1901

Spring, Form tag based Datepicker in Jquery?

Actually in my Spring application i'm using spring based form tag in my jsp code.

And add the functionality for this <form:input>,provide DatePicker using Jquery.

And here is my Jsp code..

<%@ 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>

But date picker not working (not visible)...

Is there any problem in this spring based form tag? or

Is there anything wrong in my code?

Upvotes: 3

Views: 17972

Answers (3)

lschin
lschin

Reputation: 6811

Try with the following code

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

Your code is acceptable,

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

because all of the Spring MVC form tag support dynamic attributes, like HTML5 placeholder. Unless you are using older version of Spring.

Upvotes: 0

bipen
bipen

Reputation: 36531

looks like you are not loading the jquery.js.....u need jquery file to run the ui component..

load 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>

Upvotes: 0

Adil
Adil

Reputation: 3268

It's mostly because reference issues. Please check following, preferably using Firebug or developer tools in browser

  1. jQuery UI with compatible version of jQuery is properly referenced
  2. jQuery UI CSS is referenced properly
  3. jQuery UI js is referenced

CDN

<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>

Upvotes: 1

Related Questions