filter db by a single date - how to hack the standard calendar form field

Question

I used component-creator.com to build a component. The component has a table with a date field and a frontend view which shows the contents of the table with a filter which can show the items between two dates. Here is a view from the backend:

That's great, but I only wanted to filter the db result by a single date, so I modified my site/models/sessions.php to include this line:

    $filter_date_from = $this->state->get("filter.date_from_dateformat");
    $filter_Qdate_from = (!empty($filter_date_from)) ? $this->isValidDate($filter_date_from) : null;

    if ($filter_Qdate_from != null)
    {
        $query->where("a.date = '" . $db->escape($filter_Qdate_from) . "'");
    }

and then modified my site/models/forms/filter_sessions.xml to include only this line:

<field name="date_from_dateformat" label="COM_MERAKIAC_LIST_LBL_SESSION_DATE_FILTER_FROM" type="calendar" onchange="this.form.submit();" filter="safehtml" class="inputbox"/>

Which, when I rebuild the component, allows me to filter my db by providing a single date:

Here is where I am stuck. I want to change the behavior of the calendar as such:

1. I want the calendar to always appear on the page (inline), not at a popup triggered by a button, and certainly not hidden within any collapsible "search tools" menu.
2. I would rather not see a text field at all--limiting the user to enter a date only by selecting it on the calendar.
3. I want the user to be able to click on a single date on the calendar and see the db entries associated with that date.
4. I want to control the CSS properties of the calendar for purposes of responsive web design.

Question 1: Am I correct in understanding I would have to hack .js and .css files built into Joomla itself to make these changes to the calendar? If so, my plugin could not be distributed to others unless they hack those files as well?

Since I couldn't find out how to control the standard calendar form field, I tried to hack the original calendar code from dynarch.com into my site/views/sessions/tmpl/default.php file with something like this (and a million variations):

<script>
Calendar.setup({
    cont: "sample1",
    inputField: "filter_date_from_dateformat"
});
</script>

<div id="sample1">
<input type="text" title="" name="filter[date_from_dateformat]" id="filter_date_from_dateformat" value="" maxlength="45" class="inputbox hasTooltip" onchange="this.form.submit();" />
</div>

But no matter what I try I can't seem to pass the date selected by the user on the calendar directly to my filter_sessions.xml file. So

Question 2: How can I collect a date from a visual calendar and pass it to my model to apply to the SQL query? Is there a way to do this with the dynarch calendar? Or am I stuck using the standard calendar form field?

Any insight is appreciated. Thank you!

Answer 1

My question may not have been as clear as it could have been. Upon further research, the questions I was ultimately asking were:

1. How to add a custom filter to the list view (I found a great resource here).

2. How to adapt the Dynarch calendar for use as a custom filter when the built-in Joomla search tools were just not cut out for the job.

I finally got this working, though it may be somewhat of a hack. I was only concerned with adding this filter to the frontend, so I had to modify four files as follows:

I added the following code to site/models/sessions.php within the getListQuery() section:

    // Filtering date
    // Checking "_dateformat"
    $filter_date_from = $this->state->get("filter.date_from_dateformat");
    $filter_Qdate_from = (!empty($filter_date_from)) ? $this->isValidDate($filter_date_from) : null;

    if ($filter_Qdate_from != null)
    {
        $query->where("a.date = '" . $db->escape($filter_Qdate_from) . "'");
    }

I created a new file site/models/forms/filter_sessions.xml with the following contents:

<?xml version="1.0" encoding="utf-8"?>
<form>
    <fields name="filter">
        <field name="date_from_dateformat" label="COM_MERAKIAC_LIST_LBL_SESSION_DATE_FILTER_FROM" type="text" onchange="this.form.submit();" filter="safehtml" class="inputbox"/>
    </fields>
</form>

I added the following two lines of code to site/views/sessions/view.html.php within the display() function:

$this->filterForm = $this->get('FilterForm');
$this->activeFilters = $this->get('ActiveFilters');

And finally (and I am sure this is terrible Joomla coding practice), I hard-coded the following lines of code into my site/views/sessions/tmpl/default.php right after the opening of the form div and before the table list view:

    <!-- Calendar filter -->
    <script src="http://www.dynarch.com/jscal/jscal/src/js/jscal2.js"></script>
    <script src="http://www.dynarch.com/jscal/jscal/src/js/lang/en.js"></script>
    <link rel="stylesheet" type="text/css" href="http://www.dynarch.com/jscal/jscal/src/css/jscal2.css" />
    <link rel="stylesheet" type="text/css" href="http://www.dynarch.com/jscal/jscal/src/css/border-radius.css" />

<div id="sample1"></div>
<script>
Calendar.setup({
    cont: "sample1",
    onSelect   : function() { 
        var date = Calendar.intToDate(this.selection.get());
        document.getElementById('filter_date_from_dateformat').value=date;
        document.getElementById('adminForm').submit();
        }
});
</script>

<input type="hidden" name="filter[date_from_dateformat]" id="filter_date_from_dateformat" value="" class="inputbox";" />

When I install my new component in Joomla, I receive a filter that looks like this and allows me to filter db results by selecting a single date from a calendar:

In explanation, the modifications to sessions.php allowed me to filter the list results by a single variable, received from a text field on the list view. The filter_sessions.xml, has the ability to set up filter fields which can be dynamically displayed in the list view. Since I didn't want to use the built-in Joomla filter capabilities, I decided to hard-code these filters into default.php. However, I still needed the filter_sessions.xml file in place and the two inclusions in view.html.php to get the final form to work. The modifications to default.php hard-code php code which will appear in the final rendering of the list view, complete with the .js and .css inclusions and calendar function.

Hopefully this helps somebody else in the future. If anybody has any insight on how I could do this more properly, I would love to hear it. Thank you!