Creating filterable table on web page
Issue 1: Is there a way to avoid the back and forth converting between datetime and string?


There is, but it's not gonna be easy.
You could inject data into the template as JavaScript code.
That way the page will have the dates in native format.
To make that work,
you would have to stop injecting the data as HTML code,
and use JavaScript to generate it based on the injected dates in native format.

But unless you have large amounts of data,
you might not need this.
The conversions back and forth between datetime and string might not be significant.


  Issue 2: I would like the code to stay DRY, so any ideas on how to make the function be able to handle both datetime.date and datetime.time objects would also be very welcome.


Easy.
You could inject the filtering functionality.
In particular,
the most important part of your implementation is extracting a value to compare from the data.
This kind of function is often called key.
You could define such function to convert the string to time:

var time_key = function(s) {
    var parts = s.split(':');
    return new Date(0, 0, 0, parts[0], parts[1]);
}


Then you could inject this as the key parameter to filter:

function filter(id, column_id, key) {
    var i, value;
    var table = document.getElementById("myTable");
    var tr = table.getElementsByTagName("tr");
    var ref = key(document.getElementById(id).value);

    for (i = 0; i &lt; tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[column_id];
        if (td) {
            value = key(td.innerHTML.split(':')); 
            tr[i].style.display = value &lt; ref ? "none" : "";
        }
    }
}