diff --git a/aleksis/apps/chronos/static/js/chronos/date_select.js b/aleksis/apps/chronos/static/js/chronos/date_select.js
new file mode 100644
index 0000000000000000000000000000000000000000..40bfa8c02df1e1757ce691acad9996a9b68dc7e7
--- /dev/null
+++ b/aleksis/apps/chronos/static/js/chronos/date_select.js
@@ -0,0 +1,54 @@
+function updateDatepicker() {
+    if (!displayDateOnly) {
+        $("#date").val(formatDate(activeDate));
+    }
+}
+
+function update() {
+    console.log("Render new.");
+
+    updateDatepicker();
+}
+
+function loadNew() {
+    window.location.href = dest + formatDateForDjango(activeDate);
+}
+
+function onDateBeforeClick() {
+    if (activeDate.getDay() === 1) {
+        var minus = 3;
+    } else {
+        var minus = 1;
+    }
+    activeDate.setDate(activeDate.getDate() - minus);
+    update();
+    loadNew();
+}
+
+function onDateNextClick() {
+    if (activeDate.getDay() === 5) {
+        var plus = 3;
+    } else {
+        var plus = 1;
+    }
+    activeDate.setDate(activeDate.getDate() + plus);
+    update();
+    loadNew();
+}
+
+function onDateChanged() {
+    var str = $("#date").val();
+    var split = str.split(".")
+    activeDate = new Date(split[2], split[1] - 1, split[0]);
+    update();
+    loadNew();
+}
+
+
+$(document).ready(function () {
+    $("#date-before").click(onDateBeforeClick);
+    $("#date-next").click(onDateNextClick);
+    $("#date").change(onDateChanged);
+
+    update();
+});
diff --git a/aleksis/apps/chronos/static/js/chronos/week_select.js b/aleksis/apps/chronos/static/js/chronos/week_select.js
new file mode 100644
index 0000000000000000000000000000000000000000..98db085cf031142fd47f8c308e3fa11344b1ed9e
--- /dev/null
+++ b/aleksis/apps/chronos/static/js/chronos/week_select.js
@@ -0,0 +1,19 @@
+function goToCalendarWeek(cw, year) {
+    window.location.href = dest + year + "/" + cw;
+}
+
+function onCalendarWeekChanged(where) {
+    goToCalendarWeek($(where).val(), year);
+}
+
+$(document).ready(function () {
+    $("#calendar-week-1").change(function () {
+        onCalendarWeekChanged("#calendar-week-1");
+    });
+    $("#calendar-week-2").change(function () {
+        onCalendarWeekChanged("#calendar-week-2");
+    });
+    $("#calendar-week-3").change(function () {
+        onCalendarWeekChanged("#calendar-week-3");
+    });
+});
diff --git a/aleksis/apps/chronos/templates/chronos/partials/datepicker.html b/aleksis/apps/chronos/templates/chronos/partials/datepicker.html
index 39e9d49b0ab969b361a5a4dd6ad54f5d2480010d..5ce02cfd3e65f453f9d42ab217770b3caf0035fe 100644
--- a/aleksis/apps/chronos/templates/chronos/partials/datepicker.html
+++ b/aleksis/apps/chronos/templates/chronos/partials/datepicker.html
@@ -1,63 +1,11 @@
 {% load date_js static %}
 
-<script src="{% static "js/helper.js" %}"></script>
+<script type="text/javascript" src="{% static "js/helper.js" %}"></script>
 <script type="text/javascript">
-    function updateDatepicker() {
-        {% if not display_date_only %}
-            $("#date").val(formatDate(activeDate));
-        {% endif %}
-    }
-
-    function update() {
-        console.log("Render new.");
-
-        updateDatepicker();
-    }
-
-    function loadNew() {
-        window.location.href = dest + formatDateForDjango(activeDate);
-    }
-
-    function onDateBeforeClick() {
-        if (activeDate.getDay() === 1) {
-            var minus = 3;
-        } else {
-            var minus = 1;
-        }
-        activeDate.setDate(activeDate.getDate() - minus);
-        update();
-        loadNew();
-    }
-
-    function onDateNextClick() {
-        if (activeDate.getDay() === 5) {
-            var plus = 3;
-        } else {
-            var plus = 1;
-        }
-        activeDate.setDate(activeDate.getDate() + plus);
-        update();
-        loadNew();
-    }
-
-    function onDateChanged() {
-        var str = $("#date").val();
-        var split = str.split(".")
-        activeDate = new Date(split[2], split[1] - 1, split[0]);
-        update();
-        loadNew();
-    }
-
-    var activeDate = new Date({{ day|date_unix }});
-
-    $(document).ready(function () {
-        $("#date-before").click(onDateBeforeClick);
-        $("#date-next").click(onDateNextClick);
-        $("#date").change(onDateChanged);
-
-        update();
-    })
+  var activeDate = new Date({{ day|date_unix }});
+  var displayDateOnly = {% if display_date_only %}true{% else %}false{% endif %};
 </script>
+<script type="text/javascript" src="{% static "js/chronos/date_select.js" %}"></script>
 
 
 <div class="col s2" style="display: initial;">
diff --git a/aleksis/apps/chronos/templates/chronos/plan.html b/aleksis/apps/chronos/templates/chronos/plan.html
index b79727c5f9be0d2a16a3efc2b775ce7208612279..82fdf212e9963c660f559663fe7a660bd5455a10 100644
--- a/aleksis/apps/chronos/templates/chronos/plan.html
+++ b/aleksis/apps/chronos/templates/chronos/plan.html
@@ -7,32 +7,15 @@
 {% endblock %}
 
 {% block content %}
-  <script type="text/javascript">
-    {% if smart %}
+  {% if smart %}
+    <script type="text/javascript">
       var week = {{ week.week }};
       var year = {{ week.year }};
+      var dest = "{% url "timetable" type pk %}";
+    </script>
+    <script type="text/javascript" src="{% static "js/chronos/week_select.js" %}"></script>
+  {% endif %}
 
-      function goToCalendarWeek(cw, year) {
-        window.location.href = "{% url "timetable" type pk %}/" + year + "/" + cw;
-      }
-
-      function onCalendarWeekChanged(where) {
-        goToCalendarWeek($(where).val(), year);
-      }
-
-      $(document).ready(function () {
-        $("#calendar-week-1").change(function () {
-          onCalendarWeekChanged("#calendar-week-1");
-        });
-        $("#calendar-week-2").change(function () {
-          onCalendarWeekChanged("#calendar-week-2");
-        });
-        $("#calendar-week-3").change(function () {
-          onCalendarWeekChanged("#calendar-week-3");
-        });
-      });
-    {% endif %}
-  </script>
   <div class="row no-margin">
     <div class="col s8 m6 l8 xl9">
       <h4>