Displaying List View Web Part within selected date range using jQuery/j JavaScript

Hi,

We had a requirement of showing list values based upon selected date range.

Before writing a script. have created Calculated Column as ‘CustomCreatedDate’ using ‘Created’ column

I should thank below author which helped me in achieving this.

http://tanmaydharmaraj.com/sharepoint-daterange-filter/

<script>

//jQuuery datepicker

$(function() {

               

               

                decodedUrl = decodeURIComponent(window.location.href);

    $( "#startdatepicker" ).datepicker({

                                changeMonth: true,

                                changeYear: true,

                                maxDate: 0

                });

    $( "#enddatepicker" ).datepicker({

                                changeMonth: true,

                                changeYear: true,

                                maxDate: 0

                });

               

     if(GetParameterValues('FilterValue1') && GetParameterValues('FilterValue2')){

                                if((GetParameterValues('FilterValue1')!='undefined' && GetParameterValues('FilterValue2')!='undefined')|| (GetParameterValues('FilterValue1')!='' && GetParameterValues('FilterValue2')!='')){

                                                var fromdate=new Date(GetParameterValues('FilterValue1'));

                                                 document.getElementById('startdatepicker').value=fromdate.format("MM/dd/yyyy");

                                                var todate =new Date(GetParameterValues('FilterValue2'));

                                                document.getElementById('enddatepicker').value=todate.format("MM/dd/yyyy");

                                                $('#empty-WPQ2').closest('div').prev('table').hide();

                                                $('#empty-WPQ2 td').text("There are no records to show");

                                                $('.filterdList').hide();                                   

                                }             

                 }

                else {

                                $('.ms-listviewtable').hide();

                                $('.ms-promlink-button-right').hide();

                                $('.ms-paging').hide();

                                $('.filterdList').hide();

                                $('.ms-promlink-button').hide();

                }

                //Rename 'Created' column to 'Accepted Date'

                $("div[displayname='Created'] a").text("Accepted Date");

                //Hide 'Select All' tick mark

                $('.ms-selectall-span').hide();

                //Hide 'Select' tick mark

                $('.ms-selectitem-span').hide();

               

                 //Remove Filter

                $(".ms-listviewtable th").each(function(){                          

                                $(this).attr("onmouseover","");

                                $(this).attr("onmousedown","");                            

                });

                $(".ms-listviewtable .ms-headerSortTitleLink").each(function(){

                                $(this).parent().html("<span>"+$(this).text()+"</span>");                         

                });

               

                $(".s4-wpcell").removeAttr('onkeyup').removeAttr('onmouseup');

               

               

});

function GetParameterValues(param) { 

            var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

                                                //var decodedUrl = decodeURIComponent(url);

            for (var i = 0; i < url.length; i++) { 

                var urlparam = url[i].split('='); 

                if (urlparam[0] == param) { 

                    return urlparam[1]; 

                } 

            } 

        } 

/*Entry point to our script*/

function getFilter()

{

    var sourceURL =document.URL; //get the URL

                /*

    Remove existing querystrings added by our script and gives us a clean URL.

    This removes the parameters FilterField1,FilterOp1,FilterValue1,FilterField2,FilterOp2,FilterValue2

    */

    var url = removeParam(sourceURL);

    var from = document.getElementById('startdatepicker').value;

    var end= document.getElementById('enddatepicker').value;

    if(from!='' && from !='undefined')

    {

        if(end!='' && end!='undefined')

        {

            if(from <= end)

            {

            var startDate = new Date(from)

            var toDate = new Date(end);

            var startdate=startDate.format("yyyy/MM/dd");//convert format yyyy/MM/dd. Here we are using the format prototype.

            var enddate=toDate.format("yyyy/MM/dd");

            window.location = url+'FilterField1=Created&FilterValue1='+startdate+'&FilterOp1=Geq&FilterField2=CustomCreatedDate&FilterValue2='+enddate+'&FilterOp2=Leq';

                                                                               

                                               

            }

            else

            {

            alert("Please ensure that the To Date is greater than or equal to the From Date.");

            return false;

            }

        }                     

        else

        {

            alert("Please select To date");

            return false;

        }                     

                               

    }

    else

    {

        alert("Please select From date");

        return false;

    }         

}

function removeParam(sourceURL) {

    var rtn = sourceURL.split("?")[0],

        param,

        params_arr = [],

        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";

    if (queryString !== "") {

        params_arr = queryString.split("&");

        for (var i = params_arr.length - 1; i >= 0; i -= 1) {

            param = params_arr[i].split("=")[0];

            if (param === "FilterField1") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterValue1") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterOp1") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterField2") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterValue2") {

                params_arr.splice(i, 1);

            }

            if (param === "FilterOp2") {

                params_arr.splice(i, 1);

            }

        }

        rtn = rtn + "?" + params_arr.join("&");

    }

    else

    {

        rtn=rtn+"?";

    }

    return rtn;

}

</script>

<h1 class="searchHeading">Search for Lady Employees who Accepted Guidelines</h3>

<div class="timePeriod">

                <div class="add-lbl-wrp">

                                <label class="add-label">Filter time period</label>

                </div>

                <div id="Main_Left_divStartDate" class="float-l from">

                                <div class="add-lbl-wrp">

                                                <span id="Main_Left_lblStartDate" class="add-label">From Date</span>

                                                <input type="hidden" id="Main_Left_hdnStartDate" value="Start Date">

                                </div>

                                <input type="text" id="startdatepicker" class="txt-bx" placeholder="Mandatory" readonly='true'/>

                               

                </div>

                <div id="Main_Left_divEndDate" class="float-l last">

                                <div class="add-lbl-wrp">

                                                <span id="Main_Left_lblEndDate" class="add-label">To Date</span>

                                                <input type="hidden" id="Main_Left_hdnEndDate" value="End Date">

                                </div>

                               

                                <input type="text" id="enddatepicker" class="txt-bx" placeholder="Mandatory" readonly='true'/>

                               

                </div>

                <input id="btnFilter" onclick="getFilter()" type="button" value="Search"  class="float-r"/>

</div>

<h3 class="filterdList">List of Lady Minds</h3>

<style type="text/css">

.article .related-links,.article .article-header{display:none;}

h1.searchHeading,.filterdList{font:16px open_sanssemibold;margin:0 0 20px;color:#333;}

.filterdList{margin:0 0 10px;}

.timePeriod {width: 600px;padding: 2px 10px 10px;background: #f2f2f2;border: 1px solid #ccc;display: inline-block;min-height: 96px;margin:0 0 20px}

.timePeriod .add-lbl-wrp {line-height: 17px;margin: 0 0 2px;}

.timePeriod .add-label {margin: 0;padding: 1px 10px 1px 3px;text-transform: uppercase;line-height: 11px;}

.timePeriod .from {margin: 0 20px 0 0;}

.timePeriod .float-l {position: relative;margin-top: 20px;width: 286px;}

input[type=text].txt-bx, .textarea {border: none;border-bottom: 1px dashed #999 !important;max-width: 300px;padding: 0;font: 15px open_sansregular, helvetica, arial;min-height: 28px;}

.timePeriod .float-l .txt-bx {width: 286px;background: url('/transport/PublishingImages/calendor_icon.png') no-repeat scroll right 5px transparent;cursor:pointer;}

#btnFilter{background: #d0d0d0;font: 10px/20px open_sansbold,helvetica,arial;text-decoration: none;color: #444;border: 0;margin: 10px 10px 0 20px;display: inline-block;cursor: pointer;padding:0;}

.txt-bx::-webkit-input-placeholder{font-family: open_sansitalic, helvetica, arial;color: #999999;}

.txt-bx:-moz-placeholder{/* Firefox 18- */font-family: open_sansitalic, helvetica, arial;color: #999999;}

.txt-bx::-moz-placeholder{          /* Firefox 19+ */font-family: open_sansitalic, helvetica, arial;color: #999999;}

.txt-bx:-ms-input-placeholder{font-family: open_sansitalic, helvetica, arial;color: #999999;}

[summary="TransportLadyEmployees"]{width:100%;}

[summary="TransportLadyEmployees"] tr:nth-child(even){background:#f7f7f7;}

#DeltaPlaceHolderMain [summary="TransportLadyEmployees"] tr td{vertical-align:middle;}

[summary="TransportLadyEmployees"] tr:nth-child(odd).ms-viewheadertr{background:#fff;}

[summary="TransportLadyEmployees"] tr:nth-child(odd).ms-viewheadertr th{border-bottom:1px solid #d7d7d7;padding-bottom:5px;}

[summary="TransportLadyEmployees"] tr:nth-child(odd).ms-viewheadertr th a{color:#000!important;font:13px open_sanssemibold;}

.ms-bottompaging {margin: 10px 22px 0 0;}

div#WebPartWPQ2 {width: 624px;height: 360px;overflow-y: auto;}

td.ms-vb-itmcbx.ms-vb-imgFirstCell >div {display: none;}

div.article, div.welcome{padding:0px;}

.filterdList {margin:0px;}

.ms-webpart-cell-vertical {display: inherit;}

#empty-WPQ2 td{padding:20px;text-align:center;font:13px open_sanssemiboldItalic;}

</style>

After this I was able to display the list of records as below