How to use Datatables jQuery UI datetime picker outside of the table.

Harbor House Publishers

Good Afternoon Allen, Everyone,

First, I just want to say I absolutely LOVE DataTables. The software is superb and the documentation, examples, community and forums are second to none! I have finally run into an issue that I can't figure out with your samples and docs, however.

I am building a CRM for our office using DataTables as it's backbone. This is on a LAMP server with MySQL.

My issue is this. I want to use the same date/time picker that is used by DataTables in the Entry Date column bubble edit (scroll all the way to the right) outside of the table. And click on any cell in the Entry Date column.

Specifically, I want to be able to use that same picker to populate the Date, Start Date, and End Date fields you will see if you Click the "Filter Button" at the top, but instead I just get the standard jQuery UI datepicker.

I'm adding these to the text inputs with the following in the Table instantiation:

"fnInitComplete": function(oSettings, json) {
// Add datepickers to the date filter fields.
    $( "#quick_filter_date" ).datepicker({
        dateFormat: "mm-dd-yy"
    });
    $( "#quick_filter_start_date" ).datepicker({
        dateFormat: "mm-dd-yy"
    });
   $( "#quick_filter_end_date" ).datepicker({
        dateFormat: "mm-dd-yy"
   });
}

Is there a way to call the same pickers used in the bubble edit for the Entry Date field, but used outside of the table? I'd like my datepickers to match.

Now, I could just go get the datetime plugin separately, and then style it the same, but I feel like I'd be loading the jQuery UI datepicker plugin twice if I do it that way.

I'm sure this is something obvious I'm just missing, but changing .datepicker above to .datetimepicker throws an error and I'm reasonably sure calling these in the fnInitComplete function should ensure they are called after the Datatables bundled itself is called. (In addition to this code being called in the foot when the Datatables stack is all called in the head)

Thank you for your time!

rduncecb

Editor can be used without a DataTable. You could possibly use the Editor standalone functionality to implement the filter portion of your page. That way it should give you access to the datetime field type.
See here - https://editor.datatables.net/manual/standalone

allan

Hi,

Thanks for your kind words - great to hear that you are enjoying using DataTables so far!

I'm afraid that there is currently no option to use the date picker from Editor outside of Editor itself, as it is built into the Editor software and not exposed via an API. You aren't the first to ask about this, and it is something that I would like to do in future as it can be useful (indeed, I have plans in that direction for additional plug-ins ).

@rduncecb's suggestion of using a standalone Editor is a clever one, I hadn't thought of that myself! That might work well - you could use another Editor instance with your three external date time fields and activate editing on them when clicking on them. You might need to style them a little to make them look clickable.

Another option is to use Pikaday which is similar in styling to the one built into Editor (it was the inspiration for some of the styling - I love the plain and simple look).

Allan

Harbor House Publishers

Thanks to rduncecb and allan for your help! I have now implemented a purely client side solution based on rduncecb's answer. Note, this example is based on NO backend datasource and forces the editor closed (and returns false) from the preSubmit method of the inline usage. In this way however, I am able to essentially use the Datatables datetime picker to populate fields outside of the main table.

HTML - Pretty standard. Mostly borrowed from the standalone inline editor example.

<div class="form_group date_group">
    <label data-editor-label="quick_filter_date">Date</label>
    <dd data-editor-field="quick_filter_date" id="quick_filter_date"></dd>
</div>

JS - I have no need to write any of these values to any data source, whether that be front end, AJAX, JSON or otherwise, they will only be used for the purpose of client side filtering. This codes only purpose is to be able to use the Datatables Editor datetime picker to populate a field on the client side.

var startOfDay = moment().startOf("day").format('MM-DD-YYYY h:mm A');
var lastDateTime = moment().startOf("day").format('MM-DD-YYYY h:mm A');

$( document ).ready(function() {

    // Set the initial HTML to today, but at 0:00 hours.
    // This was a requirement for me.
    // If left out, it did work by bringing up the current date/time.
    // For some reason, when used as a standalone,
    // returning this same value to the "def"
    // option in the filtereditor instantiation below didn't work.
    // But overriding it with HTML in the actual dd tag did work.
    $("#quick_filter_date").html( startOfDay );

    // Date Filter Editor. Pretty standard standalone,
    // however you will note there is no associated table or ajax.
    filtereditor = new $.fn.dataTable.Editor( {
        fields: [
            {
                label: "quick_filter_date",
                name: "quick_filter_date",
                type:      'datetime',
                // Def doesn't seem to matter, but I left it in.
                def:       function () { return new Date(); },
                format:    'MM-DD-YYYY h:mm A',
                opts:  {
                    minDate: new Date('2000-01-01'),
                    maxDate: new Date('2030-12-31')
                }
            }
        ]
    });

    // Trigger the editor to open on click of the above DD tag.
    $('#quick_filter_date').on( 'click', function (e) {
        filtereditor
            // Prevent edit from writing any values,
            // since I don't have any back end,
            // Or even any AJAX, it will error if I don't.
            .edit( null, false )
            .inline( this );
    } );

    // I do all my client side stuff from the preSubmit method.
    filtereditor.on( 'preSubmit', function ( e ) {

        // Only fire if the datetime changed.
        // Getting this right from the editor field seems hacky,
        // but I couldn't figure out how to pull
        // the datetime from the editor itself.
        var pickedDateTime = $('#DTE_Field_quick_filter_date').val();
        
        if( (pickedDateTime != "") && (pickedDateTime != lastDateTime)) {
            filtereditor.close();
            $('#quick_filter_date').html(pickedDateTime);
            lastDateTime = pickedDateTime;
        }
        // Return false no matter what,
        // or the editor will try to write the values to
        // a data source that does not exist.
        return false;   
    } );
}

So there you have it, this example could probably be improved upon, but this should get anybody with a similar question started using the Datatables built in datetime picker from a separate standalone instance of Editor. Thank you again for the suggestion.

allan

Awesome. Thanks for posting back with your solution!

Regards,
Allan

rduncecb

Glad I could help
In reference to your comment about getting the field from the editor, you should be able to use one of the options below to stay within the Editor API:

var pickedDateTime = this.get('quick_filter_date');

API - https://editor.datatables.net/reference/api/get()
or

var pickedDateTime = filtereditor.field('quick_filter_date').get();

API - https://editor.datatables.net/reference/api/field().get()