Select to view content in your preferred language

WAB - Date range picker

15052
23
05-27-2015 02:59 PM
StanMcShinsky
Frequent Contributor

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

0 Kudos
23 Replies
StanMcShinsky
Frequent Contributor

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

RickeyFight
MVP Regular Contributor

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.

0 Kudos
StanMcShinsky
Frequent Contributor

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

TimWitt2
MVP Alum

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

RobertScheitlin__GISP
MVP Emeritus

Guys,

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

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

The widget.html cleaned:

  1. Removed all the ids and data-props from the selects
  2. Added cellspacing to table
RickeyFight
MVP Regular Contributor

Robert,

Your input is always welcome!

0 Kudos
RickeyFight
MVP Regular Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
RickeyFight
MVP Regular Contributor

Robert,

I see now, it is fixed.

Thank you!

0 Kudos
RickeyFight
MVP Regular Contributor

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!

0 Kudos