topic Re: DatePicker in ArcGIS JavaScript Maps SDK Questions

DatePicker

EijiMatsuzaki — Mon, 11 May 2020 09:49:51 GMT

Dear viewers,

I wonder how I can filter feature layer using new widget "DatePicker".

More specifically, I want to return a date selected in DatePicker and filter the feature layer in featureLayerView. I have tried lots but I am not even certain what is wrong or right.

I am sorry that what I did below does not make sense...

I really appreciate it if you can give me some hints..

// Date Picker

const startDate = new DatePicker({

container: "start-date-picker"

});

view.ui.add(startDate, "bottom-right");

// click event handler for seasons choices

startDate.addEventListener("click", filterByDate);

// User clicks date

// Filter layer by the selected date

function filterByDate(event) {

const selectedDate = event.target.value;

timeLayerView.filter = {

where: "EndDate <= date'" + selectedDate + "'" // time field is "EndDate"

};

}

view.whenLayerView(featureLayer).then(function(layerView) {

timeLayerView = layerView;

});

Re: DatePicker

Anonymous User — Sun, 12 Dec 2021 03:48:40 GMT

Hi Eiji Matsuzaki‌,

For where clause with date filter, you can refer to this Querying Feature Services: Date-Time Queries

So you shall change filterByDate into .

// User clicks date
          // Filter layer by the selected date
          function filterByDate(event) {
            const selectedDate = event.target.value; //that selectedDate is js date object
const filterDateFormat = selectedDate.getFullYear() + "-" + (selectedDate.getMonth() + 1) + "-" + selectedDate.getDate();
            timeLayerView.filter = {
              where: "EndDate <= DATE '" + filterDateFormat + "'" ;// time field is "EndDate" , 
            };
          }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Sample usage

https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0/query?where=date_evt+%3E%3D+DATE+%272015-11-09%27&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=*&returnGeometry=true&featureEncoding=esriDefault&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnQueryGeometry=false&returnDistinctValues=false&cacheHint=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=html&token=

Re: DatePicker

EijiMatsuzaki — Sun, 17 May 2020 08:55:17 GMT

Hi Than Aung,

Thank you very much for giving me some insights.

I tried your approach and others but unfortunately nothing seems to work. I know I must be doing something wrong.

For example, I tried to display the output of default value of DatePicker and your formatted value using the following scripts:

// Date Picker

const startDate = new DatePicker({

container: "start-date-picker",

value: "2020-06-10"

});

view.ui.add(startDate, "bottom-right");

var datePickID = document.getElementById("datePicker-date");

var formattedID = document.getElementById("formatted-date");

var datePickerDate = startDate.value;

datePickID.innerHTML = datePickerDate;

formattedID.innerHTML = datePickerDate.getFullYear() + "-" + (datePickerDate.getMonth() + 1) + "-" + datePickerDate.getDate();

view.whenLayerView(dwallLayer).then(function(layerView) {

timeLayerView = layerView;

timeLayerView.filter = {

// where: "endDate <= date'" + "2020-6-10" + "'" // time field is "EndDate"

where: "endDate <= DATE'" + fromattedID.innerHTML + "'" // time field is "EndDate"

}

});

Output is displayed like this:

Unfortunately, the formatted value simply returned nothing. I have no idea how I can convert the raw DatePicker date format to "2020-6-10".

I hope you can give another clue..

Best Regards,

Re: DatePicker

Anonymous User — Fri, 22 May 2020 12:47:08 GMT

Hi Eiji Matsuzaki‌

I think, you are using the js 4.15."esri/widgets/support/DatePicker"

Here is the sample codepen for you.

https://codepen.io/thanhtetaung/pen/xxwMjMM

Sorry about my first reply, I thought it is from dojo diji form.