Is there a jelly tag for date/time input fields?

[hasnalakhrissi]

Is there a jelly tag for date/time input fields?

[eridonado · Accepted solution]

You can also use this tag:

<g:ui_date_time id= "${jvar_name}" value= "${jvar_name}" />

[xiaix]

Question though... I need 2 of these fields on my UI Page (timeFrom, timeTo).

If I do this:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
       <table>
               <tr>
                       <td style="width:300px;">
                               <g:ui_date_time id="timeFrom" />
                       </td>
                       <td style="width:300px;">
                               <g:ui_date_time id="timeTo" />
                       </td>
               </tr>
               <tr>
                       <td>
                               <button onclick="fetchData()">Submit</button>
                       </td>
               </tr>
       </table>
</j:jelly>

Then Jelly auto turns both fields to this:

<input name="date_time" id="date_time" type="text" class="form-control">
<input name="date_time" id="date_time" type="text" class="form-control">

Do I not have control over the "id" so that I can reference them separately?

[xiaix]

Thought this would work:

JELLY:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
       <div id="mainDiv">Please wait while Screenings are being loaded...</div>
       <script>
               addLateLoadEvent(function(){
                       fixTimeDateFieldIds();
               });
       </script>
       <table id="mt">
               <tr>
                       <td style="width:300px;">
                               <g:ui_date_time xid="timeFrom" />
                       </td>
                       <td style="width:300px;">
                               <g:ui_date_time xid="timeTo" />
                       </td>
               </tr>
               <tr>
                       <td>
                               <button onclick="fetchData()">Submit</button>
                       </td>
               </tr>
       </table>

CLIENT SCRIPT:

function fixTimeDateFieldIds()
{
       var mt = document.getElementById('mt'); 
       var tFrom = mt.getElementsByTagName('input')[0];
       var tTo = mt.getElementsByTagName('input')[1];

       tFrom.id = "timeFrom";
       tFrom.name = "timeFrom";
       tTo.id = "timeTo";
       tTo.name = "timeTo";
}


function fetchData()
{
       var tFrom = document.getElementById('timeFrom');
       var tTo = document.getElementById('timeTo');       
       console.debug("tFrom: " + tFrom.value);
       console.debug("tTo: " + tTo.value);
}

But when I go to use one of the fields, I get this:

And when I put a breakpoint on it, I see this:

So it looks like, even if I manually set the input elements name and id to what I want, the dateFieldId is hard-set to "date_time".

This sucks.

[xiaix]

Nevermind, I see that I also need to scan and change the <a> tags "anchordate_timex".  

function fixTimeDateFieldIds()
{
       var mt = document.getElementById('mt'); 
       var tFrom = mt.getElementsByTagName('input')[0];
       var tTo = mt.getElementsByTagName('input')[1];

       var a_tFrom = mt.getElementsByTagName('a')[0];
       var a_tTo = mt.getElementsByTagName('a')[1];

       if (a_tFrom.id == "anchordate_timex")
       {
               a_tFrom.id = "anchordate_timex_timeFrom";
               a_tFrom.name = "anchordate_timex_timeFrom";         
               a_tFrom.setAttribute('onclick', "new GwtDateTimePicker('timeFrom', 'MM-dd-yyyy hh:mm:ss:a', true);");
       }
       if (a_tTo.id == "anchordate_timex")
       {
               a_tTo.id = "anchordate_timex_timeTo";
               a_tTo.name = "anchordate_timex_timeTo";         
               a_tTo.setAttribute('onclick', "new GwtDateTimePicker('timeTo', 'MM-dd-yyyy hh:mm:ss:a', true);");
       }

       if (tFrom.id == "date_time")
       {
               tFrom.id = "timeFrom";
               tFrom.name = "timeFrom";
       }
       if (tTo.id == "date_time")
       {
               tTo.id = "timeTo";
               tTo.name = "timeTo";
       }
}

Works like a charm.