How to Get Date Range Filters feature using jQuery and Metadata FetchXML Filter in Entity List of MS power portals

Step 1: Enable metadata filter as shown in the below image.

Step 2: Add FetchXml filters as shown in below.

Modified From reference code.

<filter type="or" adx:uiinputtype="dynamic" adx:uiname="Modified from">
      <condition value="Datefilter" attribute="modifiedon" operator="on-or-after" adx:uiinputtype="dynamic" />
</filter>

Modified To reference code

<filter type="or" adx:uiinputtype="dynamic" adx:uiname="Modified To" >
      <condition value="Datefilter" attribute="modifiedon" operator="on-or-before" adx:uiinputtype="dynamic" />
</filter>

Step 3: Add jQuery as shown below.

jQuery Code:

$(document).ready(function () {
    $(".entitylist-filter-option-group label:contains(Datefilter) input").each(function (index){ // We are identifying the 2 filters on basis of Datefilter value
        $(this).attr('type', 'text');           //Change the original checkbox input control's type to Text
        $(this).val("");                        //Set null value for the original input control
        // Create a fake datepicker
        var fakedate = "<div id='datetimepicker"+index+"' class='datetimepicker input-append input-group' data-provide='datetimepicker'><span class='input-group-addon' tabindex='0' aria-label='Choose a date'><span data-date-icon='icon-calendar fa fa-calendar' class='icon-calendar fa fa-calendar' style='cursor:pointer'></span></span><input type='text' class='fake form-control' /></div>";
        $(this).closest(".checkbox").parent().prepend(fakedate); //Add fake datepicker to entitylistfilter
        $(this).closest(".checkbox").hide();    //Hide original filter field
        $(this).closest(".entitylist-filter-option-group-box-overflow").css("overflow-y","visible"); //Change overflow for parent filter element to allow picker to be visible
    });
    $("#entitylist-filters").find(".datetimepicker").each(function(){           // for each of the elements with .datetimepicker class
        var lang = $("html").data("lang") === "nb-NO" ? 'nb' : 'en-gb';  // set moment locale based on portal language
        $(this).datetimepicker({                    //for this datetimepicker
            icons: {                                //set icons
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down"
            },
            format: 'L',                            //set locale to 'L' will format into browser language default
            locale: lang                            //set language based on portal language 
        });
        $(this).on("dp.change", function (e) { // when datetimepicker change function
            $(this).parent().find(".checkbox input").val(e.date.format('YYYY-MM-DD')); //Get moment object, format to DD/MM/YYYY (format the filter need) and set it as filter input value
        });
    });
});

Step 4: Add Custom CSS style in Webpage.

CSS Code to attach in Webpage.

    .entitylist-filter-option-group .h4 {
    display: block;
    color: #333;
}
  th.picker-switch {
    background: #302ce1;
}  

Step 5 : Synch Configuration as shown below.

Step 6: Test functionality working as expected or not.

Finally everything working as expected.

I hope you like this post for more interesting updates don’t forget share and subscribe our Joyful Learning 365 youtube channel.

https://www.youtube.com/channel/UCulwrFxBkHWdl7jBH9tCD8w