DatePicker

[EijiMatsuzaki]

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;

          });

[Anonymous User]

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/FeatureS...

[EijiMatsuzaki]

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,

[Anonymous User]

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.