Use datetime picker outside of Editor

burnchar

Is it practical to use the Datatables Editor datetime picker outside of an Editor?
For example, an application of ours uses a date range to select which data to open in DataTables/Editor, and it would be preferable to use the same picker for the fields in question as for datetime fields within an editor form.

allan

Its designed in such a way that it is possible, but it isn't something that is either currently documented, nor has I tested it in such a way. My thoughts behind it were that it could be used for date picking in filters, etc, but I've not yet got around to actually writing such a filter plug-in as a "formal" plug-in.

If you have a look in the Editor source code you'll find this line:

Editor.DateTime = function ( input, opts ) {

Immediately before it is a description of what it does, and the API methods are shown in the prototype extension of that method.

So basically what you would do is:

new $.fn.dataTable.Editor.DateTime( $('#myInput'), {

} );

Where the options object is defined by the Editor.DateTime.defaults object.

Fancy being a beta tester for that use case? .

Allan

burnchar

Fancy being a beta tester for that use case?

In fact, yes, but I can't spend too much time so no promises.
We have a great intern that is working with DataTables so I'll work with him to see if we can make a proof of concept.
One of us will post if we have success or questions.

allan

Here is a mini demo showing basic initialisation - I got it slightly wrong in my post above (which is now corrected - I missed the new operator): http://live.datatables.net/wadunaki/1/edit .

Allan

burnchar

Our intern, Paul Minner, was able to get your DateTime control working outside of Editor in no time. The start date/end date fields below are outside of DataTables -- they are just vanilla HTML input:

Javascript (just one line per field!)

    new $.fn.dataTable.Editor.DateTime($('#historyStartDate'), {});
    new $.fn.dataTable.Editor.DateTime($('#historyEndDate'), {});

Use of "new" seems a little weird here, but appears necessary.

HTML for completeness

<label class="lblSpace" for="historyStartDate" id="historyStartDate_lbl">Start</label>
<input type="text" name="historyStartDate" id="historyStartDate" size="11" placeholder="YYYY-MM-DD" />
<label class="lblSpace" for="historyEndDate" id="historyEndDate_lbl">End</label>
<input type="datetime" name="historyEndDate" id="historyEndDate" size="11" placeholder="YYYY-MM-DD" />

burnchar

I didn't read your latest post until after writing ours, but use of the new operator is the only thing that took any time to figure out. We will probably make it our default date time field in projects that use DTE because it works well, is consistent, and doesn't have bizarre requirements.