DatePicker

560
3
05-11-2020 02:49 AM
EijiMatsuzaki
New Contributor

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;
          });
3 Replies
ThanHtetAung_EsriAu
Esri Regular Contributor

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

0 Kudos
EijiMatsuzaki
New Contributor

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,

0 Kudos
ThanHtetAung_EsriAu
Esri Regular Contributor

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.

0 Kudos