Index: src/django_gheat/website/static/heatmap_extensions.js
===================================================================
--- src/django_gheat/website/static/heatmap_extensions.js	(revision 9250)
+++ src/django_gheat/website/static/heatmap_extensions.js	(revision 9251)
@@ -44,4 +44,6 @@
 //    enc = $('#select_enc option:selected').text();
 //    date = $('#select_date option:selected').text();
+    start_date = $('#start_date').val();
+    end_date = $('#end_date').val();
     colour = encodeURIComponent(document.getElementById("colour").value);
     lname = encodeURIComponent(document.getElementById("lname").value);
@@ -56,5 +58,19 @@
 //    if (enc != ''){enc='&accespoint__encryptie='+enc;} 
 //    if (date != ''){date='&meetrondje__datum='+date;} 
-    if (colour != ''){colour='colour='+colour;} 
+    if (start_date && end_date){
+      sd_d=start_date.substr(0,2);
+      sd_m=start_date.substr(3,2);
+      sd_y=start_date.substr(6,4);
+
+      ed_d=end_date.substr(0,2);
+      ed_m=end_date.substr(3,2);
+      ed_y=end_date.substr(6,4);
+
+      start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
+      end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
+    }
+
+
+    if (colour != 'NaN,NaN,NaN'){colour='colour='+colour;} 
     else {colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
     if (lname != ''){lname=lname;} 
@@ -66,5 +82,5 @@
       initialize: function(name, options) {
         var url = [
-          baseurl + colour + user + dataset + wlnode /* + enc + date */
+          baseurl + colour + user + dataset + wlnode + start_date + end_date /* + enc */ 
         ];
         document.getElementById('filter_text').innerHTML+="<br />Added: " + url;
Index: src/django_gheat/website/templates/home.html
===================================================================
--- src/django_gheat/website/templates/home.html	(revision 9250)
+++ src/django_gheat/website/templates/home.html	(revision 9251)
@@ -3,24 +3,40 @@
   <link href="{{ STATIC_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}jquery-1.6.1.min.js"></script>
-<!--
+
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenLayers.js"></script>
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenStreetMap.js"></script> 
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap.js"></script>
--->
+
   <script type="text/javascript" language="javascript" src="{{ STATIC_URL }}jquery.chained.js"></script>
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions.js"></script>
   <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}colorpicker.js"></script>
 
-<!-- jquery UI datapicker -->
-<link type="text/css" href="{{ STATIC_URL }}jquery-ui-1.8.13.custom.css" rel="Stylesheet" />	
-<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.13.custom.min.js"></script>
+  <!-- jquery UI datapicker -->
+  <link type="text/css" href="{{ STATIC_URL }}jquery-ui-1.8.13.custom.css" rel="Stylesheet" />	
+  <script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.13.custom.min.js"></script>
 
 
   <script language="javascript" type="text/javascript">
     $(function(){
-      // enable colorpicker
       $('#colour').colorPicker();
-      $('#start_date').datepicker();
-      $('#end_date').datepicker();
+      $('#start_date, #end_date').datepicker({
+        dateFormat: 'dd/mm/yy',
+        beforeShow: setEnd,
+      });
+
+      function setEnd(element){
+        if (element.id=='end_date'){
+          var start_date = new Date($('#start_date').val());
+          start_date.setDate(start_date.getDate())
+          return {
+            minDate: start_date
+          };
+        }
+      return {}
+      }
+
+      $('#start_date').change(function(){
+        $('#end_date').val('').text('');
+      });
 
       $('#menu_filter').click(function(){
