topic Re: Filter widget use date calendar as default click in ArcGIS Web AppBuilder Questions

Filter widget use date calendar as default click

AndrewL — Thu, 15 Feb 2018 17:46:22 GMT

I am using the filter widget to filter dates. I would like to remove the today, tomorrow, yesterday options and have it direct to the calendar picker immediately when a user clicks on the dropdown box. I am using WAB 2.7 but I am using the Filter widget folder from 2.4 because I prefer the "Apply" button as opposed to the toggle button.

I commented out some code to where I see only the "the date..." option. However, the user still needs to select "the date..." from the dropdown before the calendar pops up.

The code I commented out is from: \apps\2\jimu.js\dijit\_filter\DateValueSelector.js The code I commented out are lines 55 through 62 and line 42. Thank you.

//virtualDates: null,//['today', 'yesterday', 'tomorrow']

//if(!(this.virtualDates && this.virtualDates.length > 0)){
//this.virtualDates =
//[filterUtils.VIRTUAL_DATE_TODAY, filterUtils.VIRTUAL_DATE_YESTERDAY, filterUtils.VIRTUAL_DATE_TOMORROW];
// }
//this.dateTypeSelect.addOption({
//value: '',
//label: ' '
//}); END Comment

Re: Filter widget use date calendar as default click

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:26:35 GMT

Andrew,

You really do not need any of the code you did. Here is whats needed:

Add these new rules to the filter widgets css\style.css file

.jimu-date-value-selector .custom-date-text-box {
  height: 30px !important;
  visibility: visible;
}

.date-type-select.restrict-select-width{
  display: none;
}‍‍‍‍‍‍‍‍

Re: Filter widget use date calendar as default click

AndrewL — Thu, 15 Feb 2018 19:14:04 GMT

Works great! Thank you. I uncommented out the previous code. I always tend to go digging into the JS code but I really should pay more attention to the css code.

Re: Filter widget use date calendar as default click

AndrewL — Thu, 15 Feb 2018 19:44:19 GMT

Actually, I spoke too soon. The calendar picker works, but when I apply the filter the filtering of the layer does not work. The format of the date is different with the new CSS code so I am not sure if that has something to do with it.

With original CSS code:

With new CSS code:

Re: Filter widget use date calendar as default click

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:26:38 GMT

Andrew,

Try changing the second css rule to this one:

.date-type-select.restrict-select-width{
  visibility: hidden;
}‍‍‍

Re: Filter widget use date calendar as default click

AndrewL — Thu, 15 Feb 2018 20:09:21 GMT

No sorry filter still not working. No console errors.

Re: Filter widget use date calendar as default click

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:26:40 GMT

Andrew,

OK, there needs to be a change in the DateValueSelector.js postCreate function as well.

Add line 6

...
          this.dateTypeSelect.addOption(option);
        }));

        this._showDateTypeSelect();
        this.dateTypeSelect.set('value', 'custom', false);
...‍‍‍‍‍‍‍

Re: Filter widget use date calendar as default click

AndrewL — Thu, 15 Feb 2018 20:50:19 GMT

Yep! That did it. Thank you. Great work.