'How to use jQuery datepicker with Spring

I am trying to use a datepicker calender with Spring MVC submission form.I am able to use the date calender in the form,but when i submitting the page i want to see the values in the controller rest of the values are coming to the servlet but the date is not coming .i a posting the code below This is the form in the view page

 <div align="center">
    <form:form action="forms/registerResult" method="post"
        commandName="userForm">
        <table border="0">
            <tr>
                <td colspan="2" align="center"><h2>Spring MVC Form Demo -
                        Registration</h2></td>
            </tr>
            <tr>
                <td>User Name:</td>
                <td><form:input path="username" /></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><form:password path="password" /></td>
            </tr>
            <tr>
                <td>E-mail:</td>
                <td><form:input path="email" /></td>
            </tr>
            <tr>
                <td>Birthday (mm/dd/yyyy):</td>
                <td><form:input path="birthDate" /></td>
            </tr>
            <tr>
                <td>Profession:</td>
                <td><form:select path="profession" items="${professionList}" /></td>
            </tr>
            <tr>
                <td>Date:</td>
                <td><form:input path="date" id="datepicker" /></td>
                <script>
                    $(function() {
                        $("#datepicker").datepicker();
                    });
                </script>

            </tr>
            <tr>
                <td>Skills:</td>
                <td><form:select path="javaSkills" items="${javaSkillsList}"
                        multiple="true" /></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="submit"
                    value="Register" /></td>
            </tr>
            <tr>
                <td>Sex :</td>
                <td><form:radiobutton path="sex" value="M" />Male <form:radiobutton
                        path="sex" value="F" />Female</td>

            </tr>
        </table>
    </form:form>
</div>

this is my servlet 

 public class AppContoller {

@RequestMapping(value="/register",method=RequestMethod.GET)
public String viewRegistration(Map<String,Object>model){
    User userForm=new User();

    model.put("userForm", userForm);

    List<String> professionList=new ArrayList<String>();
    professionList.add("Developer");
    professionList.add("Designer");
    professionList.add("IT Manager");
    model.put("professionList",professionList);

    List<String> javaSkillsList=new ArrayList<String>();
    javaSkillsList.add("JAVA");
    javaSkillsList.add("C#");
    javaSkillsList.add("C++");
    model.put("javaSkillsList",javaSkillsList);



    return "Registration";
}

@RequestMapping(value="/registerResult",method=RequestMethod.POST)
public String processRegistration(@ModelAttribute("userForm")User user,Map<String,Object> model){

    System.out.println("username:"+user.getUsername());
    System.out.println("password:"+user.getPassword());
    System.out.println("email:"+user.getEmail());
    System.out.println("birth date:"+user.getBirthDate());
    System.out.println("profession:"+user.getProfession());
    System.out.println("skills:"+user.getJavaSkills());
    System.out.println("date:"+user.getDate());
    return "RegistrationSuccess";


}

System.out.println("date:"+user.getDate()); is not coming to the console..please anybody help

jqueryspringspring-mvc


Solution 1:[1]

When you say Spring, I guess you are mainly talking about the Spring MVC part. That's mainly a backend stuff, jquery plugin is frontend, so it seems they don't even need to integrate with each other.

Spring controllers can simply return url for your html, and you can embed whatever view plugin there.

If you want the html dynamically generated, then you need to use some technology like JSP or Thymeleaf, both enable you to embed Jquery code easily.

Solution 2:[2]

Is the jquery.js file able to be loaded? check that using console of chrome. You might regist resource path as like this

<resources mapping="/js/**" location="/js/" />

Solution 3:[3]

check following things:

  1. Return type of the user.getDate() function, it might create problem if it is other than string.

  2. if all the required references are included.

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

below article explain exact the same example with all the details including all code snippet.

jquery date picker in spring mvc

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 botao
Solution 2 Elvis Kim
Solution 3 Sagar

Related Questions