Create a radio button filter based on "Created Date" attribute using jquery or javascript

Question

I’m currently loading a number of list items through a customised Content Query Web Part.

And XSLT attribute associated with each of these items is the Created Date.

An example of the mark up below.

<div class=”item” createddate=”2014-01-22 13:02:52” language=”French”>Content</div>
<div class=”item” createddate=”2014-01-28 13:02:52” language=”German”>Content</div>
<div class=”item” createddate=”2013-12-18 13:02:52” language=”Italian”>Content</div>

What I need to do is create a radio button filter where the values are:

• Last 30 days
• Last 90 days

When either of these radio buttons are selected, it will hide and show the items based on their date value.

How could the filter be created (through jquery/javascript) that would hide and show these items based on their created date?

Any help would be greatly appreciated.

Answer 1

You should add an event select change in the radio button and when the user select a value in radio button. You can create a js function to get all the item in html content and parse the created date. After that you can compare that to the current day and possible to filter with last 30 days or 90 days: Note: try to use a unique css class for each item like below:

<div class=”lang-item-node” createddate=”2014-01-22 13:02:52” language=”French”>Content</div>
<div class=”lang-item-node” createddate=”2014-01-28 13:02:52” language=”German”>Content</div>
<div class=”lang-item-node” createddate=”2013-12-18 13:02:52” language=”Italian”>Content</div>

Pseudo code:(modify these if that is applicable)

$('#radioButton').on('change', function(){
var filteredValue = $(this).val();
    var listItems = $('.lang-item-node');
    if(listItems && listItems.length > 0)
{
   $.each(listItems, function(){
    var createdDate = $(this).attr('createddate');
    //compare to your filtered condition 
    //if true: $(this).show();
    //else: $(this).hide();
});
}
});