Daterangepicker with CMS Filter

Attributes
1

Hi! I’ve integrated a Date Range Picker to update two hidden inputs (“date from” and “date to”) programmatically. However, I’m facing challenges in refreshing the CMS filter to reflect these changes. Triggering various events didn’t yield results. Interestingly, manually modifying either input (even adding a space) updates the filter, but it doesn’t consider the value of the second input that wasn’t manually altered. Could you guide me on how to refresh the filter when these input values are changed programmatically?

Thank you for your assistance.

Just in case:

$('input[ms-code-input="date-range"]').daterangepicker(
      {
        timePicker: true,
        timePickerIncrement: 30,
        ranges: {
          Today: [moment(), moment()],
          Tomorrow: [moment().add(1, "days"), moment().add(1, "days")],
          "Next 7 Days": [moment(), moment().add(6, "days")],
          "Next 30 Days": [moment(), moment().add(29, "days")],
          "This Month": [moment().startOf("month"), moment().endOf("month")],
          "Next Month": [
            moment().add(1, "month").startOf("month"),
            moment().add(1, "month").endOf("month"),
          ],
        },
        alwaysShowCalendars: true,
        startDate: "12/13/2023",
        endDate: "12/19/2023",
        drops: "auto",
      },
      function (start, end, label) {
        $("#date-from")
          .val(start.format("MMM DD YYYY HH:mm"))
          .trigger("change")
          .trigger("input")
          .trigger("keyup")
          .trigger("blur");
        $("#date-to")
          .val(end.format("MMM DD YYYY HH:mm"))
          .trigger("change")
          .trigger("input")
          .trigger("keyup")
          .trigger("blur");

        console.log(
          "New date range selected: " +
            start.format("MMM DD YYYY HH:mm") +
            " to " +
            end.format("MMM DD YYYY HH:mm") +
            " (predefined range: " +
            label +
            ")"
        );
      }
    );
2

hey @a11! Have you tried dispatching an even to the input elements after the value is changed?

You can try with yourElement.dispatchEvent(new Event('input', { bubbles: true }));.

This should make the filter refresh when one of the fields is updated. If you need help setting this up please share a link to your site and I can help debug.

1 Like
3

Thank you so much for your reply. I’ll try.

1 Like
4

@Support-Luis It looks like I do something wrong. Could you please take a look?
— Read-only preview
— Published

Thank you in advance for your help.

5

hey @a11! You almost had it! I’ve only moved the dispatched event into the function where the dates are logged into the console.

The code below worked for me but do test it some more on your end

function (start, end, label) {
    $('#date-from').val(start.format('MMM DD YYYY HH:mm')).trigger('input');
    $('#date-to').val(end.format('MMM DD YYYY HH:mm')).trigger('input');

    console.log(
      'New date range selected: ' +
        start.format('MMM DD YYYY HH:mm') +
        ' to ' +
        end.format('MMM DD YYYY HH:mm') +
        ' (predefined range: ' +
        label +
        ')'
    );
    dateFrom.dispatchEvent(new Event('input', { bubbles: true }));
    dateTo.dispatchEvent(new Event('input', { bubbles: true }));
  }
1 Like
6

@Support-Luis
Amazing! It works! Thank you so much.

Just a small related question: Is it possible to somehow format the filter indication to not have so technical array presentation for users? I mean [date from, date to].

Screen Shot 2023-12-21 at 5.52.38 PM
Screen Shot 2023-12-21 at 5.52.38 PM1804×1814 198 KB

7

Hey @a11! I’m afraid the tag text will display anything you have showing on the input field and at the moment we have no option to format this natively.

Some custom code could fix the issue. Some solutions I can think of are:

  • Directly modify the text content of the tag after the user selects a date
  • Have a hidden field that has only the desired text from the input and add the filter field attributes to this hidden input. Only limitation would be that the filtering would be limited to what this input displays. If you remove the hour from the display, this filter might not be able to filter by hour range.

I would try the first option as it seems the most straightforward one.

The page seems to not be available anymore so I can’t test this out. Let me know if you need any help and please re-share a valid link so I can test :muscle: