October: Consider using a different datepicker library

[multiwebinc]

Even though Pikaday is lightweight, it is unmaintained, full of bugs, and the latest commit was over 11 months ago. Maybe you should consider using something else.

[LukeTowers]

Is there a specific issue you have with it? Do you have a specific alternative in mind? Otherwise this sort of suggestion isn't very helpful to us; why should we invest a ton of time switching to something else when from our perspective it's working fine as it is?

[multiwebinc]

@LukeTowers Just fiddling around with it a bit, if you set a min date any month in the future, or max date to be a past month, the month displayed when opening the calendar is still set to the current month. I also recall I was able to scroll past the min date / max date yesterday, but I'm unable to reproduce it right now using a different browser. Also the year range does not limit the selected dates to be within that range. I'm not sure if this is by design.

There are lots of different datepicker options available. I had previously compared several of them for a project of mine and settled on https://github.com/nazar-pc/PickMeUp, due to it being dependency-free, lightweight, highly configurable, allows for selecting multiple dates or date ranges, and can display multiple calendars.

If you're interested in investigating other options available, let me know and I can work on a PR. If not, feel free to close.

[LukeTowers]

Meh, not convinced that https://github.com/nazar-pc/PickMeUp is any better. Pickaday also supports multilingual options quite well so I think it's the best option that I've seen so far.

[multiwebinc]

@LukeTowers Just so you're aware, locales are also supported by PickMeUp (https://github.com/nazar-pc/PickMeUp/blob/master/js/pickmeup.js#L1345), and other calendars, however if you ever consider changing it to anything else, maybe I could make a PR. Let me know.

[robinbonnes]

One of our clients is requesting the feature to select a daterange (filter) with 1 datepicker (drag from start date to end date or hold shift). This isn't supported by Pickaday. Is there a way we can add our own filter widgets to support this?

Reference: https://github.com/Pikaday/Pikaday/issues/332

[bennothommo]

@robinbonnes While you cannot swap Pikaday with another library in the in-built datepicker widget, you can create your own form widget which may use another library, if you wish.

[robinbonnes]

@bennothommo I know how to create a formwidget, however can I use it as a filter widget too?

[bennothommo]

@robinbonnes Good question - I don't think so. I think the available filters are hard-coded into the Backend\Widgets\Filter class currently.

[LukeTowers]

@robinbonnes you could probably take over the frontend display / interactions of those datepickers purely through JS, since the actual data being sent to the server would still be the same for the filter widget.

[robinbonnes]

Tried to handle it manually, but its pretty complex (highlighting dates when moving the mouse over etc.).

$(document).on('show.oc.popover', 'a.range', function (event) {
        // Wait for Pikaday rendering
        setTimeout(function() {
            var $inputs = $('.field-datepicker input', '#controlFilterPopoverDate');
            $inputs.each(function (index, datepicker) {
                var options = $.extend({}, $(datepicker).data('pikaday')._o);

                // Manually handle closing the datepicker when left mouse is hold down during select
                options.onSelect = function(date) {
                    var that = this;
                    $(document).on('mousedown', function(e) {
                        // Pretty buggy :(
                        that._o.bound = false;
                    });

                }
                $(datepicker).data('pikaday').destroy();
                $(datepicker).data('pikaday', new Pikaday(options));
            });
        }, 100);

I'm gonna try to destroy the datepicker and add my own to the date field. Will let know if it works.