nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

filterscreencap.png

Screenshot 2025-08-26 155703.png

Brian_McLeer_0-1749673751187.png

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertScheitlin__GISP

Andrew,

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

Add line 6

<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>dateTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addOption</SPAN><SPAN class="punctuation token">(</SPAN>option<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">_showDateTypeSelect</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>dateTypeSelect<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'value'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'custom'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

AndrewL

No sorry filter still not working. No console errors.

RobertScheitlin__GISP

Andrew,

Try changing the second css rule to this one:

<SPAN class="selector token">.date-type-select.restrict-select-width</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">visibility</SPAN><SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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:

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.

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

<SPAN class="selector token">.jimu-date-value-selector .custom-date-text-box</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 30px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">visibility</SPAN><SPAN class="punctuation token">:</SPAN> visible<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.date-type-select.restrict-select-width</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.