Add week navigation to time sheet view

tailbone/templates/timesheet/index.mako

@@ -6,6 +6,14 @@
 <%def name="head_tags()">
   ${parent.head_tags()}
   <style type="text/css">
+    .timesheet-header {
+        position: relative;
+    }
+    .timesheet-header .week-picker {
+        bottom: 0.5em;
+        position: absolute;
+        right: 0;
+    }
     .timesheet {
         border-bottom: 1px solid black;
         border-right: 1px solid black;
@@ -27,21 +35,55 @@
         display: block;
     }
   </style>
+  <script type="text/javascript">
+
+    $(function() {
+
+        $('.week-picker #date').datepicker({
+            dateFormat: 'yy-mm-dd',
+            changeYear: true,
+            changeMonth: true,
+            showButtonPanel: true,
+            onSelect: function(dateText, inst) {
+                $(this).focus().select();
+            }
+        });
+
+        $('.week-picker form').submit(function() {
+            location.href = '${url('timesheet')}?date=' + $('.week-picker #date').val();
+            return false;
+        });
+
+    });
+
+  </script>
 </%def>
 
-<div class="field-wrapper employee">
-  <label>Employee</label>
-  <div class="field">
-    ${employee}
-  </div>
-</div>
+<div class="timesheet-header">
 
-<div class="field-wrapper week">
-  <label>Week of</label>
-  <div class="field">
-    ${week_of}
+  <div class="field-wrapper employee">
+    <label>Employee</label>
+    <div class="field">
+      ${employee}
+    </div>
   </div>
-</div>
+
+  <div class="field-wrapper week">
+    <label>Week of</label>
+    <div class="field">
+      ${week_of}
+    </div>
+  </div>
+
+  <div class="week-picker">
+    ${h.form(url('timesheet'))}
+    <label>Jump to week:</label>
+    ${h.text('date', value=sunday.strftime('%Y-%m-%d'))}
+    ${h.submit('go', "Go")}
+    ${h.end_form()}
+  </div>
+
+</div><!-- timesheet-header -->
 
 <table class="timesheet">
   <thead>