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
