Question

We are trying to create an sj:datepicker Calendar Control in an Editable sj:grid. The available edit types are only few (text, textarea, select).

We have seen examples in the jqGrid on how to bring a Datepicker within the grid rows, but couldn’t find any similar option/implementation with the sjg:grid (Struts2-jQuery framework).

Has anyone implemented it ?

Here is all the links & documentation we could find for jQGrid:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config
jqgrid Save Cell Edit When DatePicker Is Closed
Jquery UI DatePicker In a JQGrid

implement jqgrid cell edit datepicker

jqgrid Save Cell Edit When DatePicker Is Closed
http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acommon_rules

jqgrid – use datepicker with dynamic colModel

How do I add datepicker in the add row dialog in jqGrid?

jqgrid Save Cell Edit When DatePicker Is Closed

Answer 1

As of now, i am not seeing a way to get the jquery.ui.datepicker.js file included automatically via the sj:head tag.

Step 1: Manually download & include the jquery.ui.datepicker.js file in your JSP
Step 2: Add this jScript function to your JSP page

<script>
    datePick=function(element) { 
    $(element).datepicker(
            {
                dateFormat: 'dd-M-yy',
                buttonImage: "calendar.gif",
                buttonImageOnly: true
            }
            );
    };
</script>

Step 3: Add the Grid Column for date. The editoptions is used to bring the calendar

<sjg:gridColumn name="dateOfBirth" index="dateOfBirth" title="Date of Birth"
    formatter="String" editable="true" editoptions="{size: 12, maxlength: 10, dataInit:datePick,attr:{title:'Select the date'} }"  ></sjg:gridColumn>

Unanswered Question:
Is there a way to automatically include the jquery.ui.datepicker.js file using the struts2-jquery tags ? The <sj:head jqueryui="true" ></sj:head> is only including the following files.

 <script type="text/javascript" src="/grid/struts/js/base/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="/grid/struts/js/base/jquery.ui.core.min.js?s2j=3.3.3"></script>
  <script type="text/javascript" src="/grid/struts/js/plugins/jquery.subscribe.min.js"></script>
  <script type="text/javascript" src="/grid/struts/js/struts2/jquery.struts2-3.3.3.min.js"></script>

eventhough the jqueryui has been set to true, i couldn’t see the datepicker js file included automatically.