Filter widget use date calendar as default click

[AndrewL]

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

[RobertScheitlin__GISP]

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;
}‍‍‍‍‍‍‍‍

[AndrewL]

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.

[AndrewL]

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:

[RobertScheitlin__GISP]

Andrew,

  Try changing the second css rule to this one:

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

[AndrewL]

No sorry filter still not working. No console errors.

[RobertScheitlin__GISP · Accepted solution]

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);
...‍‍‍‍‍‍‍

[AndrewL]

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