# Daterangepicker with CMS Filter
**URL:** https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284
**Category:** Attributes
**Created:** [December 20, 2023, 3:06am UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284 "2023-12-20T03:06:34Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@a11](https://forum.finsweet.com/u/a11)
#### Post date: [December 20, 2023, 3:06am UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284/1 "2023-12-20T03:06:34Z")
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:
```auto
$('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 +
")"
);
}
);
```
---
### Author:  [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [December 20, 2023, 11:24am UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284/2 "2023-12-20T11:24:18Z")
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.
---
### Author:  [@a11](https://forum.finsweet.com/u/a11)
#### Post date: [December 20, 2023, 2:16pm UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284/3 "2023-12-20T14:16:15Z")
Thank you so much for your reply. I’ll try.
---
### Author:  [@a11](https://forum.finsweet.com/u/a11)
#### Post date: [December 20, 2023, 4:32pm UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284/4 "2023-12-20T16:32:04Z")
@Support-Luis It looks like I do something wrong. Could you please take a look?
[— Read-only preview](https://preview.webflow.com/preview/date-picker-fs-filter?utm_medium=preview_link&utm_source=dashboard&utm_content=date-picker-fs-filter&preview=965fd4194997cd97ea88655aa00ce703&workflow=preview)
[— Published](https://date-picker-fs-filter.webflow.io/)
Thank you in advance for your help.
---
### Author:  [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [December 21, 2023, 10:58am UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284/5 "2023-12-21T10:58:26Z")
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
```js
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 }));
}
```
---
### Author:  [@a11](https://forum.finsweet.com/u/a11)
#### Post date: [December 21, 2023, 11:01pm UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284/6 "2023-12-21T23:01:11Z")
@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].
---
### Author:  [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [January 2, 2024, 10:53am UTC](https://forum.finsweet.com/t/daterangepicker-with-cms-filter/2284/7 "2024-01-02T10:53:48Z")
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 💪