Code snippet – Date Picker with jQuery

Here is the snippet for jQuery date picker.

calendar

<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  //code.jquery.com/jquery-1.10.2.js
  //code.jquery.com/ui/1.11.4/jquery-ui.js
  
    $(function(){
        $("#mydate").datepicker();
    });
  
</head>
<body>

Date (Click for calendar): <input type="text" name="mydate" id="mydate"/>
</body>
</html>

The request sent by the client was syntactically incorrect

This seems to be a common error during form submission in Spring WebMVC. Hence finding the root cause behind this may be difficult.

I verified step by step and confirmed that my call reaches my controller. But it breaks with the following error.

400 The request sent by the client was syntactically incorrect

Rightly pointed out at http://stackoverflow.com/questions/20616319/the-request-sent-by-the-client-was-syntactically-incorrect-spring-mvc-jdbc-te this is my date issue. I had a date field in my form. You can check my previous post on how to add jQuery date picker.

Hence, I need to make some modifications.

I added the following initBinder() method in the controller.

@RequestMapping(value="/add_expense", method=RequestMethod.POST)
    public String addExpense(@ModelAttribute ExpenseDetail expenseDetail, Model model) {
        try {
            System.out.println("===> returning add_expense"+expenseDetail.getExpenseCurrency());
            model.addAttribute("expenseList", new ExpenseDAO().getExpenseRecords());
            model.addAttribute("expenseDetail", new ExpenseDetail());
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return "home";
    }
    
    public void initBinder(WebDataBinder binder){
        SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");
        sdf.setLenient(true);
        binder.registerCustomEditor(Date.class, new CustomDateEditor(sdf, true));
    }

28-1406550815-malarmalaikal

Enjoy!

Spring mvc and jQuery DatePicker

We have added a simple CSS using the ResourceHandlers.  Now, it is the time to test jQuery on a Spring MVC. First Step is to display the calendar object on the jsp.

Spring mvc and jQuery DatePicker

Insert the scripts and CSS to head part of jsp

http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.11.0/jquery-ui.js
<link rel=”stylesheet”
href=”http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css”&gt;

Add the following javascript. Replace expenseDate with your field id

$(document).ready(function() {
$(function() {
$(“#expenseDate”).datepicker();
});
});

Thats all. The calendar object should rendered on the browser window.