diff --git a/bitbake/lib/toaster/toastergui/templates/projectbuilds.html b/bitbake/lib/toaster/toastergui/templates/projectbuilds.html
index 07595f2376..18b24955d0 100644
--- a/bitbake/lib/toaster/toastergui/templates/projectbuilds.html
+++ b/bitbake/lib/toaster/toastergui/templates/projectbuilds.html
@@ -6,8 +6,24 @@
 <li>Project builds</li>
 {% endblock %}
 
+{% block extraheadcontent %}
+<link rel="stylesheet" href="/static/css/jquery-ui.min.css" type='text/css'>
+<link rel="stylesheet" href="/static/css/jquery-ui.structure.min.css" type='text/css'>
+<link rel="stylesheet" href="/static/css/jquery-ui.theme.min.css" type='text/css'>
+<script src="/static/js/jquery-ui.min.js"></script>
+<script src="/static/js/filtersnippet.js"></script>
+{% endblock %}
+
 {% block projectinfomain %}
 
+<script>
+    // initialize the date range controls
+    $(document).ready(function () {
+        date_init('created','{{last_date_from}}','{{last_date_to}}','{{dateMin_created}}','{{dateMax_created}}','{{daterange_selected}}');
+        date_init('updated','{{last_date_from}}','{{last_date_to}}','{{dateMin_updated}}','{{dateMax_updated}}','{{daterange_selected}}');
+    });
+</script>
+
     <div class="page-header">
       <h1>
         {% if request.GET.filter and objects.paginator.count > 0 or request.GET.search and objects.paginator.count > 0 %}