Select multiple dates with datepicker

Workflow Automation Expert

I'm happy and successfully using the default datepicker in Editor. However, I now have a need to offer a datepicker that can
1. select multiple dates.
2. preload multiple dates

It looks like the current datepicker is unable to do this out of the box. See https://datatables.net//forums/discussion/comment/229727/#Comment_229727

Any plans to add this feature soon? Anybody got ideas of a hack/workaround - other than creating a custom field type with another library such as Flatpikr? I really would love to stick with the standard Editor datepicker!

allan

Hi,

Unfortunately, as you say the built in date picker does not currently support either ranges or multiple disparate dates. Both would be great things to add, and I do aspire to do so in future, but there are no immediate plans to implement that I'm afraid, sorry.

I haven't seen flatpickr before - it looks excellent. I think if those are the features you need, an integration plugin with that would probably be the best bet at the moment.

Allan

Workflow Automation Expert

Hi Allan,

Would be great if you eventually add ranges or multiple disparate dates to the standard editor.datatables datepicker. I do like the UI/UX.

However, until then I have created a custom fieldtype utilising Flatpickr JS as follows...

    (function ($, DataTable) {
        if (!$.fn.dataTable.Editor) {
            $.fn.dataTable.Editor = function () { return this; };
        }
        if (!$.fn.dataTable.Editor.fieldTypes) {
            $.fn.dataTable.Editor.fieldTypes = {};
        }
        var _fieldTypes = $.fn.dataTable.Editor.fieldTypes;

        _fieldTypes.datepickr = {
            create: function (conf) {
                var that = this;
                conf._input = $('<input class="flatpickr flatpickr-input" id="' + $.fn.dataTable.Editor.safeId(conf.id) + '" type="text" placeholder="01-Jan" />');
                conf._input.flatpickr({
                    dateFormat: "d-M",
                    onChange: function(selectedDates, dateStr, instance) {
                        if (conf._enabled) {
                            if (dateStr && dateStr.length) {
                                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);

The field type is applied as follows..

        { 
            label: "Date:", 
            name: "day.date",
            type: "datepickr", // This is the custom type for Flatpickr
            opts: {
                dateFormat: 'd-m-Y'
            }

allan

Perfect! Thanks for sharing that with us.

Allan