How to use Ext's DateField instead of Struts 2 tag DateTimePicker?

[george.wei]

Hi all,

Originally I use Struts 2's DateTimPicker tag to display date in my JSP page:


<s:form id="productForm" action="saveProduct" method="post" validate="true">
<s:datetimepicker key="date" required="false" displayFormat="yyyy-MM-dd" cssClass="text medium"/>
<!-- Other contents are omitted -->
</s:form>


For some reasons I want to use Ext's DateField instead of Struts 2's DateTimePicker tag. I've searched these forums, but I could't find a demo. Can somebody help me?

Regards,
George

[george.wei]

My solution:

1.Replace the code in the previous post with the following:



<s:form id="productForm" action="saveProduct" method="post" validate="true" onsummit="submitData()">
<s:hidden name="date" />
<li id="wwgrp_productForm_date" class="wwgrp">
<label for="date" cssClass="text medium">
<fmt:message key="date"/>
</label><br>
<div id="wwctrl_productForm_date" class="wwctrl"></div>
</li>
<!-- Other contents are omitted -->
</s:form>


I use a hidden tag to map the date property of the Struts action, and function submitData() is called when the form is submitted

2.Create DateField instance and render it on page loaded:

<script type="text/javascript">
function parseDate(s) {
var idxDot=s.lastIndexOf(".");
var idxSpace=s.indexOf(" ");
return Date.parseDate(idxDot>=0?s.substr(0,idxDot):s, idxSpace>=0?'y-m-d H:i:s':'y-m-d');
}
Ext.onReady(function() {
var d=new Ext.form.DateField({
id : 'df_date',
name : 'df_date',
value: parseDate($('productForm_date').value)
});
d.render('wwctrl_productForm_date');
});
</script>


Notice that 'productForm_date' is the id of the hidden element rendered from the Struts 2's hidden tag

3.Put value back to the hidden element when user submits the form:


<script type="text/javascript">
function formatDate(d) {
return d.format('y-m-d H:i:s:000');
}
function submitData() {
$('productForm_date').value=formatDate(Ext.ComponentMgr.get('df_date').getValue());
return true;
}
</script>