Breaking News: Grepper is joining You.com. Read the official announcement!

flatpickr-instead-of-datepicker-datatables

Crazy Cow answered on May 11, 2022 Popularity 1/10 Helpfulness 1/10

answer flatpickr-instead-of-datepicker-datatables

flatpickr-instead-of-datepicker-datatables

Comment

{
    type: "flatpickr"
}
1
2// 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);
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 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);

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: datatables.net

Tags: whatever

Link to this answer
Share Copy Link

Contributed on May 11 2022

Crazy Cow

0 Answers Avg Quality 2/10

flatpickr-instead-of-datepicker-datatables

Contents

More Related Answers

flatpickr-instead-of-datepicker-datatables

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.