Use Buttons to Search a Date Within a Range

The idea behind this method is to create a user experience where a user can click a date button on a page and then will be able to see details for records on that date.

Step 1

Add the custom JavaScript pipe and set the parameters as seen in the image below.

Step 2

In the request tab of the pipe, add the following request.

Date.prototype.addDays = function(days) {
var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}
var retVal = "", current = new Date('{start}'), end = new Date('{end}');
while (current <= end) {
  retVal+=current.toLocaleDateString('en-CA', {day: '2-digit',month: '2-digit',year: 'numeric',})+" ";
  current = current.addDays(1);
 }
retVal;

Step 3

In your data table, set up the pipe to trigger a table rule when the record is created or edited. 

Step 4

On your page, add a search component and link it to the components you wish to search for. In the fields tab of the search component, select list dates and set the operators as seen in the image below. 

Step 5

In the system component selections, add an HTML component to your page. In the settings, add the following to the source code <>.

<table style="height: 51px;" width="722">
    <tbody>
        <tr>
            <td style="width: 174px;"><button class="btn btn-primary btn-sm date-link" data-value="0">Today</button></td>
            <td style="width: 174px;"><button class="btn btn-primary btn-sm date-link" data-value="1">Tomorrow</button></td>
            <td style="width: 174px;"><button class="btn btn-primary btn-sm date-link" data-value="2">2</button></td>
            <td style="width: 174px;"><button class="btn btn-primary btn-sm date-link" data-value="3">3</button></td>
        </tr>
    </tbody>
</table>

Step 5

In the JavaScript tab of the page, add the following code. 

TB.render('component_24', function(data) {
    TB.hideComponent('component_12');
    var links = document.getElementsByClassName("date-link"),
        days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    for (var x = 2; x < links.length; x++) {
        var date = new Date();
        date.setDate(date.getDate() + x);
        console.log(date);
        links[x].innerHTML = days[date.getDay()] + " " + date.getDate();
    }
    $(".date-link").click(function() {
        var date2 = new Date();
        date2.setDate(date2.getDate() + parseFloat(this.dataset.value));
        window.location = "#!/default?date=" + date2.toLocaleDateString('en-CA', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
        });
        location.reload();
    });
});

Remember to edit the components within the code to your HTML component and search component. You can find these values by hovering over the info icon of the two, as seen in the image below.

Original Community Post:

Use Buttons to Search a Date Within a Range - Community Discussions / How to Do I - Tadabase Community