SearchBuilder: pre-define values for moment-datetimepicker not working

SearchBuilder: pre-define values for moment-datetimepicker not working

schwaluckschwaluck Posts: 103Questions: 27Answers: 1

Hi all,

for the last few months we used SearchBuilder which worked like a charm.
We also used it to set pre-defined values for Date and DateTime-Fields, which worked perfect as well.

However, since today our customers reported that those doesn't work anymore. I also checked and can't find to resolve the issue.
The pre-defined values get displayed in the SearchBuilder, however, the data of the table doesn't match the given values. If I update one of the values manually, it works again.

We use this build of SearchBuilder: https://nightly.datatables.net/searchbuilder/js/dataTables.searchBuilder.js?

Attached you can find the code which we use (note: we use Moment to format the dates, but that worked fine in the past as well):

            {
                extend: 'searchBuilder',
                    config: {
                        columns: [1,9],
                        conditions: {
                            "moment":{
                                    '=': null,
                                    '!null': null,
                                    '<': {
                                        conditionName: 'vor',
                                        },
                                    '!=': null,
                                    '>': {
                                        conditionName: 'nach',
                                        },
                                    'between': {
                                        init: function(that, fn, preDefined = null) {
                                        // Declare all of the date elements that are required using DataTables dateTime plugin
                                        let els = [
                                            $('<input/>')
                                                .addClass("dtsb-value")
                                                .addClass("dtsb-input")
                                                .dtDateTime({
                                                    attachTo: 'input',
                                                    format: that.s.momentFormat ? that.s.momentFormat : undefined
                                                })
                                                .on('input change', function() { fn(that, this); }),
                                            $('<span>')
                                                .addClass(that.classes.joiner)
                                                .text('and'),
                                            $('<input/>')
                                                .addClass("dtsb-value")
                                                .addClass("dtsb-input")
                                                .dtDateTime({
                                                    attachTo: 'input',
                                                    format: that.s.momentFormat ? that.s.momentFormat : undefined
                                                })
                                                .on('input change', function() { fn(that, this); })
                                        ];

                                        // If there are and preDefined values then add them
                                        if (preDefined !== null && preDefined.length > 0) {
                                            $(els[0]).val(preDefined[0]);
                                            $(els[2]).val(preDefined[1]);
                                        }
                                        else {
                                            var today = moment().format("DD.MM.YYYY");
                                            $(els[0]).val(today);
                                            $(els[2]).val(today);
                                        }
                                        
                                        that.s.value = [today, today];
                                        return els;
                                    },
                                        conditionName: 'zwischen',
                                        },
                                    '!between': null,
                                    'null': null,
                                    }
                        },
                    },
            },

I would appreciate any help since this is a crucial feature!

Thanks a lot

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,113Questions: 1Answers: 2,583

    I suspect you need to include the DateTime extension, as SearchBuilder is now using that. If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

    If that is the case, we should look at a way of handling this better as it's likely to affect users too,

    Colin

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    Hi colin,

    thanks for the quick response.
    I tried that, however it is not resolving the issue. There is still no filtering happening based on the pre-defined values. Is there something that I would need to change in the code besides using the given js and css files?

    Regards

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1
    edited February 2021

    Addition:
    we used:
    https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js
    in addition to the nighly build in the past, since we rely on moment formatting.

    Is this maybe something that has been changed?

    Also, is there a way to access an older version of SearchBuilder (for a quick, temporary fix of the issue)?

    Thanks a lot!

    Edit:
    https://datatables.net/forums/discussion/64674/searchbuilder-pre-define-values-for-moment-datetimepicker#latest

    heres the post where Sandy explained on how to force the reload after using the pre-defined values. This is how we've implemented it currently as well.

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    Sorry for reposting again, just want to report all the behaviour:

    In cases where we use SearchBuilder with DateTime-Fields and Moment.js, the following happens as well:
    the pre-defined values are set to a datetime value (date + time). However, if I want to update the value by clicking on the given input in SearchBuilder, it only shows me the option to add a date.

    This wasn't the case before.
    Attached I also add the code for a table where we got a DateTime-Field:


    { extend: 'searchBuilder', config: { columns: [3,5,12], conditions: { "moment":{ '=': null, '!null': null, '<': { conditionName: 'vor', }, '!=': null, '>': { conditionName: 'nach', }, 'between': { init: function(that, fn, preDefined = null) { // Declare all of the date elements that are required using DataTables dateTime plugin let els = [ $('<input/>') .addClass("dtsb-value") .addClass("dtsb-input") .dtDateTime({ attachTo: 'input', format: that.s.momentFormat ? that.s.momentFormat : undefined }) .on('input change', function() { fn(that, this); }), $('<span>') .addClass(that.classes.joiner) .text('and'), $('<input/>') .addClass("dtsb-value") .addClass("dtsb-input") .dtDateTime({ attachTo: 'input', format: that.s.momentFormat ? that.s.momentFormat : undefined }) .on('input change', function() { fn(that, this); }) ]; // If there are and preDefined values then add them if (preDefined !== null && preDefined.length > 0) { $(els[0]).val(preDefined[0]); $(els[2]).val(preDefined[1]); } else { var today = moment().format("DD.MM.YYYY"); $(els[0]).val(today+" 00:00:00"); $(els[2]).val(today+" 23:59:59"); } that.s.value = [today+" 00:00:00", today+" 23:59:59"]; return els; }, conditionName: 'zwischen', }, '!between': null, 'null': null, } }, }, },
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited February 2021 Answer ✓

    You need to include these two files now if you are using the SearchBuilder nightly:

    https://cdn.datatables.net/datetime/1.0.2/css/dataTables.dateTime.min.css
    https://cdn.datatables.net/datetime/1.0.2/js/dataTables.dateTime.min.js

    We've spun off the DateTime picker into its own library and the next major version of SearchBuilder will make use of that (rather than being bundled with Editor, SearchBuilder and anywhere else we use it).

    I'd suggest using the version of SearchBuilder that is on the CDN rather than the nightly version to avoid things like this, unless there is a specific fix you need in the nightly?

    We'll be doing a 1.1.0 release of SearchBuilder with this change in the next few weeks.

    Regards,
    Allan

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    Hi Allan,

    thanks for the answer.
    Yes, I included the CDN version now, which resolves the issue.
    Just wanted to give as much feedback as possible.

    Thanks again and have a nice evening!

  • schwaluckschwaluck Posts: 103Questions: 27Answers: 1

    Hi,
    I sadly need to get back to you guys on this one:

    We have upgraded to Editor 2.0.5 and also upgrade to the newest versions of SearchBuilder and SearchPanes.

    However, when I try to use SearchBuilder with the solution provided above (which workes like a charm for later versions), it wont work anymore (SearchBuilder).

    This is only the case if you use predefined values with the "between" option in SearchBuilder.

    The first image shows how it is set after selecting the "between" option. It is correctly displayed, but no search is applied. NO error on console.

    The second image show how the dates format whenever I select a new one from the picker.
    Then, the search is applied.


    Does anyone have an idea on what causes the issues?

    Using those versions it works:
    Editor 2.0.5
    SearchBuilder 1.0.1 (very early one)

    Serverside is not enabled for SearchBuilder.

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @schwaluck ,

    Could you link to a test case please? We are probably going to need to see the page for this one. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Thanks,
    Sandy

Sign In or Register to comment.