topic Re: WAB - Date range picker in Web AppBuilder Custom Widgets Questions

WAB - Date range picker

StanMcShinsky — Wed, 27 May 2015 21:59:27 GMT

Does anyone have a widget that allows you to pick a date range from a calender to limit features on the map? For example I want to have some crime data on a map and have the user select a date range to show on the map. It would also then be nice to make it work with a chart widget.

Thanks for any help.

-Stan

Re: WAB - Date range picker

RickeyFight — Wed, 27 May 2015 22:03:56 GMT

Stan,

I am sure you know about this but just in case: Time Slider widget—Web AppBuilder for ArcGIS | ArcGIS

If not look here:Custom Floor switcher widget WAB

I believe the code provided can do what you are looking for. I believe the right direction is DefinitionExpression. I am working on a widget for "filtering" multiple attributes on one layer. I am not very far yet though.

Picking from a calendar should be an option though.

I do not know about a chart though.

Re: WAB - Date range picker

StanMcShinsky — Wed, 27 May 2015 22:12:18 GMT

Rickey,

Yeah I am aware of the time slider, but it is not very user friendly when you try to pick out specific dates.

I like the idea of filtering through multiple attributes. That would be very helpful. Do you have a working demo of your floor switcher?

The chart would just be a bonus.

-Stan

Re: WAB - Date range picker

RickeyFight — Wed, 27 May 2015 22:16:22 GMT

I sort of have one. I have a working version but data is confidential. I need to make another one (tomorrow) that I can show you. Right now it works on one attribute but I have the code ready for two or more.

Re: WAB - Date range picker

RickeyFight — Thu, 28 May 2015 14:36:29 GMT

Stan McShinsky,

Here you go ArcGIS Web Application

Type in any organizational password and it should work. If it does not I will change the basemap.

It needs a lot of work and this is just a demo I came up with. I am working on a filter for crime data and will post that later today (I hope).

Just open the widget to load the layer.

Re: WAB - Date range picker

StanMcShinsky — Thu, 28 May 2015 15:08:31 GMT

Wow that is looking good. I am excited to see how it turns out.

-Stan

Re: WAB - Date range picker

RickeyFight — Thu, 28 May 2015 15:10:07 GMT

Any suggestions on look or functionality?

Re: WAB - Date range picker

RickeyFight — Tue, 02 Jun 2015 18:21:37 GMT

Stan,

Here is the next draft of the widget:

demo2

The popup can now be configured, Multiple filters can be added easier, number of visible records displayed.

As I posted elsewhere my boss does not want me to spend my time writing the setting files for the widget. So it will take a while before it gets done.

Re: WAB - Date range picker

StanMcShinsky — Sun, 12 Dec 2021 10:23:03 GMT

Rickey Fite

I have been looking at this for a little while and worked up some extra things for you. Hopefully this will help and get it moving along. There still are a few things that are quirky but not sure yet how to work around it. Like you have to select the month drop down for it to run the query. Anyway here are the changes I made:

in the index.html file in the <head> (this loads the jquery to the map)

></script>

<!-- added this jquery for the date picker  -->
<link rel="stylesheet" href="https://community.esri.com//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

in the \widgets\LocalLayer_filter\widget.js right after the startup function is called.

//--------date picker--------------------
var fromDate;
var toDate;
                                                                
$(function() {
$( "#from" ).datepicker({
     // minDate: -90,
     maxDate: "+0D",
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 2,
     onClose: function( selectedDate ) {
          $( "#to" ).datepicker( "option", "minDate", selectedDate );
          fromDate = selectedDate;
     }
});
$( "#to" ).datepicker({
     maxDate: "+0D",
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 2,
     onClose: function( selectedDate ) {
          $( "#from" ).datepicker( "option", "maxDate", selectedDate );
          toDate = selectedDate;
     }
});
});
//------------end date picker---------------

case 104:

case "104":
     defExp2 = "Date >='"+fromDate+"' AND Date <= '"+toDate+"'"; //changed this
     break;

and lets not forget about the Widget.html file. A little better formatting and new fields.

<div>


<table style="width:100%">
  <tr>
    <td><label for="from">From:</label></td>
    <td><input type="text" id="from" name="from"></td> 
  </tr>
  <tr>
    <td><label for="to">To:</label></td>
    <td><input type="text" id="to" name="to"></td> 
  </tr>
   <tr>
    <td><label>Crime:</label></td>
    <td>    
  <select id="s5" data-dojo-id="s5" data-dojo-attach-point="test" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s5", onChange: myOnClick'>
  <option value="0" selected="selected">Larceny/Theft</option>
  <option value="1">Vehicle Theft</option>
  <option value="2">Assult</option>
  <option value="6">Other</option>
  <option value="7">DUII</option>
  <option value="8">Fraud</option>
  <option value="9">Burglary</option>
  <option value="10">Traffic Stop</option>
  <option value="" disabled="true">----------</option>
  <option value="Clear">All</option>
        </select>
  </td> 
  </tr>
   <tr>
    <td><label>Month:</label></td>
    <td>
  <select id="s12" data-dojo-id="s12" data-dojo-attach-point="s12" data-dojo-type="dijit/form/Select" onclick="" data-dojo-props='name:"s12"'>
  <!-- <option value="103">August</option> -->
  <option value="104" selected="selected">Date Range</option>
  <!-- <option value="105">December</option>
  <option value="106">January</option>
  <option value="" disabled="true">----------</option> -->
  <option value="Clear2">All</option>
  </select>
  </td> 
  </tr>
   <tr>
    <td><label>Time</label></td>
    <td>
  <select id="s1" data-dojo-id="s12" data-dojo-attach-point="s1" data-dojo-type="dijit/form/Select" onclick="" data-dojo-props='name:"s1"'>
  <option value="010">Day (6am-8pm)</option>
  <option value="011">Commute(7-9am/5-7pm)</option>
  <option value="012">Night (8pm-6am)</option>
  <option value="013">Night Life (9pm-2am)</option>
  <option value="" disabled="true">----------</option>
  <option value="Clear3" selected="selected">All</option>
  </select>
  </td> 
  </tr>
</table>
</br></br>
    </br>
    </br>
    </br>
    <div> <span id="featcount"> Loading...</span>   
    </div>

</div>

Here is the sample I based it from http://jqueryui.com/datepicker/#date-range

Here is the page to see more parameters to configure the datepicker http://api.jqueryui.com/datepicker/

This is at least a start. I am sure there must be a better way but it works. I really like the direction of the widget.

-Stan

Re: WAB - Date range picker

RickeyFight — Thu, 04 Jun 2015 14:13:54 GMT

Stan McShinsky,

You work wonders!

Here is the next version:

Demo3

Any Ideas on a time selector?

I am having issues with time selections that go into a new day. Ex. 9pm-2am

p.s. did you get a widget that works for you in your original question?

Re: WAB - Date range picker

TimWitt2 — Thu, 04 Jun 2015 14:18:15 GMT

I really like the jquery date picker. It looks very slick!

Re: WAB - Date range picker

StanMcShinsky — Thu, 04 Jun 2015 20:01:51 GMT

Rickey,

Are you wanting to pick the overnight times for a single night? Right now you have night time hours for the entire date range. This is a fun project for me to tinker with. Thanks for letting me be of assistance.

Also I noticed on the popup the time in the date field is different from the time in the time field.

-Stan

Re: WAB - Date range picker

RickeyFight — Thu, 04 Jun 2015 20:09:59 GMT

Stan,

Any input is welcome!

A way to select certain hrs of the day such as 2pm-4am but let the user decide.

I guess that would just be a time slider I just don't know how one would be able select overnight times.

I had not noticed that there was a time next to the date. I will fix it. The Time in the time field is the right time.

Re: WAB - Date range picker

StanMcShinsky — Thu, 04 Jun 2015 21:41:52 GMT

Rickey,

I have been working on a time selector in conjunction with the date picker and it works kinda but not the way I like it so I am going to try something new.

-Stan

Re: WAB - Date range picker

RobertScheitlin__GISP — Fri, 05 Jun 2015 03:14:37 GMT

Guys,

Hope you don't mind so more assistance. Here is the widget.js cleaned and improved:

Filter applied at startup
Filter changes using the change event instead of the on click event
Filter is applied when to and from date are chosen
Date portion is not applied if there is not a to and a from date
Unused requires removed
Event listeners are only applied on init instead of each time the filter changes
Filter is applied to FeatureLayer type only (since the def filter is specific to the crimes layer).

The widget.html cleaned:

Removed all the ids and data-props from the selects
Added cellspacing to table

Re: WAB - Date range picker

RickeyFight — Fri, 05 Jun 2015 14:08:14 GMT

Robert,

Your input is always welcome!

Re: WAB - Date range picker

RickeyFight — Fri, 05 Jun 2015 14:57:30 GMT

Robert,

I copied your code into this demo3 and the filter does not seem to work.

The console log does not give any errors either.

Re: WAB - Date range picker

RobertScheitlin__GISP — Fri, 05 Jun 2015 15:17:29 GMT

Rickey,

The filter is getting applied to the last layer in your json which is the rickey_firehydrant layer. I was kind of confused on how you intended this widget to work with multiple layers when your filter logic was very specific to one particular layer so I just remove the rickey_firehydrant layer from my test environment.

Re: WAB - Date range picker

RickeyFight — Fri, 05 Jun 2015 15:24:34 GMT

Robert,

I see now, it is fixed.

Thank you!

Re: WAB - Date range picker

RickeyFight — Fri, 05 Jun 2015 20:53:04 GMT

Robert,

I am now trying to add another layer. Right now the plan is to use tabs to differentiate between the filtering process (I have the tabs set up). I cannot seem to find the part of the code that references the last layer in the json unless it is:

filterLayer = lLayer;

I need to change the lLayer to the title of the layer or another way to differentiate between the layers.

Thank you!