Flatpickr instead of datepicker

khrm

How can I use flatpickr for the input-field instead of the editor-given datepicker?
Flatpickr has a more intuitive ui / ux especially for chosing hour/minutes.

Datatables Datepicker:

Flatpickr:

colin

Editor has the ability to create custom field types, so provided Flatpickr has an API you can access, that should be possible. This example should help, or possibly this one from this thread,

Colin

khrm

Thank you! I just wrote some code. Can be maybe interesting for others.
It is used by setting the editor field type to

{
    type: "flatpickr"
}

// flatpickr field type plug-in code
(function ($, DataTable) {
 
 if ( ! DataTable.ext.editorFields ) {
     DataTable.ext.editorFields = {};
 }
  
 var Editor = DataTable.Editor;
 var _fieldTypes = DataTable.ext.editorFields;
  
 _fieldTypes.flatpickr = {
     create: function ( conf ) {
         var that = this;
  
         conf._enabled = true;
  
         // Create the elements to use for the input
         conf._input = $('<input class="flatpickr flatpickr-input" id="'+Editor.safeId( conf.id )+'" type="text" placeholder="YYYY-MM-DD HH:mm">');
          
         conf._input.flatpickr({
            //  altInput: true, 
            //  altFormat: "YYYY-MM-DDTHH:mm:ss.SSSZ", //doesn't work, inputfield gone
             dateFormat: "Y-m-d H:i",
             enableTime: true,
             weekNumbers: true,
             locale: "de",
             allowInput: true,
             onChange: function(selectedDates, dateStr, instance) {  
                if ( conf._enabled ) {
                    if(dateStr && dateStr.length){
                        // Set Editor instance field
                        that.set( conf.name, moment(dateStr).toISOString() );
                    }else{
                        that.set( conf.name, "")
                    }
                }
                $(conf._input)[0]._flatpickr.close();
            },
         })

         return conf._input;
     },
  
     get: function ( conf ) {
         return $(conf._input).val();
     },
  
     set: function ( conf, val ) {
        $(conf._input)[0]._flatpickr.setDate(val);
     },

     enable: function ( conf ) {
         conf._enabled = true;
         $(conf._input).removeClass( 'disabled' );
     },
  
     disable: function ( conf ) {
         conf._enabled = false;
         $(conf._input).addClass( 'disabled' );
     },

     destroy: function ( conf ) {
        $(conf._input)[0]._flatpickr.destroy();
     }
 };
  
 })(jQuery, jQuery.fn.dataTable);

colin

Nice, thanks for sharing!

Colin