Spring MVC form date (jquery) mapping field

Question

I am trying to map a date retrieved from DB in my jsp using Spring MVC and some jquery. I have this in my jsp:

<form:input path="startDate" id="startDate" type="text" cssClass="input date"/>

In my spring controller I have this code:

model.addAttribute(TVA_FORM, TvaMapping.modelToForm(tvaService.findCurrentTva()));

The modelToForm method code:

SimpleDateFormat sdf = new SimpleDateFormat("dd-MM-yyyy");
TvaForm tvaForm = new TvaForm(tva.getId(), tva.getRate());
tvaForm.setStartDate(sdf.format(tva.getStartDate()));

The form:

public class TvaForm {
    private Integer id;

    @NotNull
    private Float rate;

    @NotNull
    @NotEmpty
    private String startDate;

    // Contructors/ getters / setters
}

And the entity:

public class Tva {

    @Id 
    @GeneratedValue
    @Column(name = "ID")
    private Integer id;

    @Column(name = "RATE", nullable = false)
    private Float rate;

    @Column(name = "START_DATE", nullable = false)
    @Temporal(TemporalType.DATE)
    private Date startDate;
}

Jquery:

$('input.date').datepicker($.datepicker.regional[ "fr" ]).datepicker("option", "dateFormat", "dd-mm-yy");

What am I doing wrong? why startDate is not getting mapped into my jsp field?

Thank you for yoyr help guys!

Answer 1

On your jsp page, make sure the value of modelAttribute of the <form:form> tag is the string value of TVA_FORM you put in model,

<form:form method="POST" modelAttribute="string value of TVA_FORM" action="your action url" methodParam="submit">

Here is How I map a date type and at the same time take the advantage of jquery's datepicker.

In my command class, my date is still the java.util.Date type. There is no need to convert it to String. I use Spring's @DateTimeFormat to handle the transforming from Date to String and back forth.

    @DateTimeFormat(pattern = ArmsConstants.DATE_FORMAT_SHORTDATE)
@NotNull
private Date effectiveDate; 
@DateTimeFormat(pattern = ArmsConstants.DATE_FORMAT_SHORTDATE)

In my jsp page,

<th><form:label for="ori.effectiveDate" path="ori.effectiveDate" cssErrorClass="error">Effective Date *:</form:label></th>
<td><form:input path="ori.effectiveDate" class="datepicker" type="mdate" cssErrorClass="errorInput datepicker"/>

And the jquery is just as simple as

$( ".datepicker" ).datepicker();

Oh, And I am also using the jquery maskedinput plugin to format the picked date on the jsp page, of course the format should be the same as what I used in the @DateTimeFormat

$("[type='mdate']").mask("99/99/9999",{placeholder:" "});