Date Range Selection with Materialize CSS

C_Lemon · December 2022

**https://datatables.net/forums/discussion/71974/how-to-implement-datatable-with-materializecss?**:

In continuation to the above solution posted by Willaim, can we add date range selection as well? I am trying to add the below code, but not getting any output. (I dont know any javascript)

var minDate, maxDate;
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
  var min = minDate.val();
  var max = maxDate.val();
  var date = new Date(data[4]);

  if (
    (min === null && max === null) ||
    (min === null && date <= max) ||
    (min <= date && max === null) ||
    (min <= date && date <= max)
  ) {
    return true;
  }
  return false;
});
$(document).ready(function () {
  // Create date inputs
  minDate = new DateTime($('#min'), {
    //format: 'MMMM Do YYYY'
    format: 'YYYY-MM-DD',
  });
  maxDate = new DateTime($('#max'), {
    //format: 'MMMM Do YYYY'
    format: 'YYYY-MM-DD',
  });

  // DataTables initialisation
  var table = $('#mainTable').DataTable();

  // Refilter the table
  $('#min, #max').on('change', function () {
    table.draw();
  });
});

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · December 2022

I'm happy to look at a test page showing the issue. Please see here if you can't provide a link to your current page.

Allan

C_Lemon · December 2022

Below is the code for the Django application.Date selection is not rendered with the below code. Is it also possible to have the search box and the date range inputs all in one line with a reset button to clear the filtered result?

Attaching a screenshot of the rendered output.

base.html

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"
          rel="stylesheet">
    <!--Let browser know website is optimized for mobile-->
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <link href="{% static 'css/dashboard2.css' %}" rel="stylesheet">

    <link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <title>AquaSpan</title>
</head>
<body>
{% include 'partials/sidenav.html' %}
{% include 'partials/navbar.html' %}

{% block content %}
{% endblock %}

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js">
</script>
<script
    src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" type="text/javascript">
</script>
<script>
$('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240
      edge: 'left', // Choose the horizontal origin
      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );
// Show sideNav
//$('.button-collapse').sideNav('show');
</script>

{% block js %}
{% endblock js %}

</body>
</html>

Test.html

{% extends 'partials/base.html' %}
{% load static %}
{% include 'partials/topmenu.html' %}

<head>
    {% block stylesheets %}
    <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/datetime/1.2.0/css/dataTables.dateTime.min.css"
          rel="stylesheet">
    {% endblock stylesheets %}
</head>

<style>
    table, #example_info, #example_paginate, #example_length, #example_filter {
        font-family: "Verdana";
        font-size: 12px;
    }
</style>

{% block content %}
<table border="0" cellpadding="5" cellspacing="5">
    <tbody>
    <tr>
        <td>Minimum date:</td>
        <td><input id="min" name="min" type="text"></td>
        <td>Maximum date:</td>
        <td><input id="max" name="max" type="text"></td>
    </tr>
    </tbody>
</table>
<table class="display nowrap" id="example" style="width:100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011-04-25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011-07-25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009-01-12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012-03-29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008-11-28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012-12-02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012-08-06</td>
        <td>$137,500</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
</table>
{% endblock content %}

{% block js %}
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min.js"></script>

<script>
var minDate, maxDate;
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = minDate.val();
var max = maxDate.val();
var date = new Date( data[4] );

if (
( min === null && max === null ) ||
( min === null && date <= max ) ||
( min <= date   && max === null ) ||
( min <= date   && date <= max )
) {
return true;
}
return false;
}
);
$(document).ready(function() {
// Create date inputs
minDate = new DateTime($('#min'), {
format: 'MMMM Do YYYY'
});
maxDate = new DateTime($('#max'), {
format: 'MMMM Do YYYY'
});

// DataTables initialisation
var table = $('#example').DataTable();

// Refilter the table
$('#min, #max').on('change', function () {
table.draw();
});
});

</script>

{% endblock js %}

kthorngren · December 2022

Is it also possible to have the search box and the date range inputs all in one line

This example shows how to add custom elements in with the Datatables elements.

Kevin

allan · December 2022

I'd really need a link to a running test case showing the issue so I can debug it please. I'm not at all well versed in Django - not enough to make a running test case from the above anyway.

Also it looks like some styling is missing - I wonder if just that is enough to make the date box not appear (it actually probably does somewhere on the page if that is indeed the issue). Try adding the DataTables and DateTime styling to your page (I see you do have the two stylesheets in the code - but the DataTables one certainly isn't being applied). A running test case would let me test and debug these things.

Allan

C_Lemon · December 2022

Hi Allan,

Since my requirement involves multiple files, can i upload a running project on surge.sh?

allan · December 2022

Sure - that should allow be to debug the front end.

Allan

C_Lemon · December 2022

I have managed to create a CodePen with the incorrect output. Output desired is to have the number of entries selection appear together with the date range to filter the table records accordingly in addition to the Sidebar navigation menu and searching the table records. Link to CodePen is as below:

https://codepen.io/Chlorine-Lemon/pen/abKegor

allan · December 2022

Thanks for the link!

Reading their documentation for Select it says:

Remember that this is a jQuery plugin so make sure you initialize this in your document ready.

Which would explain why the select for the "Show entries" is display: none. Likewise the hidden "Search" input element.

So... I tried to follow the Materialize documentation:

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });

Neither work. I saw you were including 0.98.2, so I tried 1.0.0 - same issue. The first reports that M is undefined, the second that formSelect is undefined.

There doesn't appear to be a general initialisation for Materialize, so I'm at a bit of a loss. I'm afraid that this would be one for the Materialize folk. Although the project looks like it hasn't been updated in 5 years, so I'm not sure how much support you'll be able to get from them?

Can you see something that I've missed?

Allan

C_Lemon · December 2022

Thanks Allan. I tried different ways too. Once materialize.css is included, the layout and display gets affected. Guess I will have to change the CSS framework for the entire project altogether. Trying with UIKit now. Hope it works. Thanks anyway.

allan · December 2022

The Materialize core CSS has select { display: none } which is why the select input for the page length disappears. The input for the filter is the same. Imho that's not the best for accessibility and progressive enhancement would be better, but what really has me confused is why we can't get the Materialize JS to then operate like it says in their docs. There isn't even an M object on the global space. So I'm clearly missing something, I'm just not sure what!

I've just found that there is an active fork on Github that you might want to give a go before throwing in the towel?

Allan

Date Range Selection with Materialize CSS

Date Range Selection with Materialize CSS

Replies

Howdy, Stranger!

Categories

DataTables

Date Range Selection with Materialize CSS

Date Range Selection with Materialize CSS

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables