Hello! Something I did in my day job was to create an Html5DateField class by copying the DateField sources and removing all the JavaScript from it and also hardcoding the date format to yyyy-MM-dd. In addition, instead of outputting <input type="text">, it outputs <input type="date", so it uses the browser's native date picker. If you want to have Html5DateField replacing all DateField instances, you can contribute to the ComponentOverride service added in Tapestry 5.4.
I'll ask my bosses whether I can share Html5DateField to the mailing list and also include it in the next Tapestry releases. On Thu, Nov 29, 2018 at 5:34 AM Christopher Dodunski < chrisfromtapes...@christopher.net.nz> wrote: > Hi all, > > I've successfully been using the datefield component within a number of > tapestry pages. But now that I've embedded a datefield within a custom > component that is nested within a zone, the datepicker isn't working as it > should. When the datepicker is used to select a certain date, the zone > refreshes but the date remains null. Naturally I would like the date to > reflect that which was chosen, but also there is no need for the zone to > refresh simply because a date in the datepicker was clicked on. So two > wrongs. > > Incidentally, it is possible to manually type a date into the datefield, > just not use the datepicker. And it is not a browser related problem > (tested on Chrome and Firefox). > > > Below are the relevant snippets of markup received by the browser: > > <div class="filter-date"> > <label for="paneStartDate" class="control-label">Start</label> > <div class="input-group" > > data-format-url="/harbour/dashboard.operationpanel.filterpane.panestartdate:format?t:ac=operationZone" > > data-parse-url="/harbour/dashboard.operationpanel.filterpane.panestartdate:parse?t:ac=operationZone" > data-component-type="core/DateField"> > <input placeholder="dd mmm yyyy hh:mm" value="" id="paneStartDate" > name="paneStartDate" class="form-control" type="text"> > <span class="input-group-btn"> > <button alt="[Show]" class="btn btn-default" type="button"> > <span class="glyphicon glyphicon-calendar"></span> > </button> > </span> > </div> > </div> > > <div class="filter-apply"> > <input value="Apply Filter" class="" type="submit"> > </div> > > > And, for the sake of comparison, a snippet of the HTML generated by a > Tapestry page, where the datefield works correctly: > > <div class="form-group"> > <label for="startTime" class="control-label col-md-4">Start > Time</label> > <div class="input-group" > data-format-url="/harbour/event/create.starttime:format?t:ac=Dashboard/4" > data-parse-url="/harbour/event/create.starttime:parse?t:ac=Dashboard/4" > data-component-type="core/DateField"> > <input placeholder="event start time ("dd mmm yyyy > hh:mm")" data-required-message="You must provide a value for > Start Time." data-optionality="required" data-validation="true" > value="" id="startTime" name="startTime" class="form-control" > type="text"></input> > <span class="input-group-btn"> > <button alt="[Show]" class="btn btn-default" type="button"> > <span class="glyphicon glyphicon-calendar"></span> > </button> > </span> > </div> > </div> > > <input value="Create Event" class="opto-button create-event-btn" > type="submit"></input> > > Appreciate your help, > > Chris. > > > --------------------------------------------------------------------- > To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org > For additional commands, e-mail: users-h...@tapestry.apache.org > > -- Thiago
