diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
index c9c4892abf..e823531d77 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
@@ -1,3 +1,5 @@
+@import "flatpickr";
+
 body {
     background-color: #EEE;
     font-family: arial, verdana, helvetica, sans-serif;
@@ -189,99 +191,15 @@ span.required {
     padding: .4em 2em;
 }
 
-
-/* Override core jQueryUI widgets */
-.ui-widget-content {
-    border: 1px solid #B9D8D9;
-    background: #ffffff none;
-    color: #222222;
-}
-
-.ui-widget-header {
-    border: 1px solid #B9D8D9;
-    background: #E6F0F2 none;
-    color: #222222;
-    font-weight: bold;
-}
-
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
-    border: 1px solid #B9D8D9;
-    background: #F4F8F9 none;
-    font-weight: normal;
-    color: #555555;
-}
-
-.ui-state-hover,
-.ui-widget-content .ui-state-hover,
-.ui-widget-header .ui-state-hover,
-.ui-state-focus,
-.ui-widget-content .ui-state-focus,
-.ui-widget-header .ui-state-focus {
-    border: 1px solid #B9D8D9;
-    background: #E6F0F2 none;
-    font-weight: normal;
-    color: #212121;
-}
-
-.ui-state-active,
-.ui-widget-content .ui-state-active,
-.ui-widget-header .ui-state-active {
-    border: 1px solid #aaaaaa;
-    background: #ffffff none;
-    font-weight: normal;
-    color: #212121;
-}
-
-.ui-state-highlight,
-.ui-widget-content .ui-state-highlight,
-.ui-widget-header .ui-state-highlight {
-    border: 1px solid #FED22F;
-    background: #FFF4C6;
-    color: #363636;
-}
-
-.ui-state-error,
-.ui-widget-content .ui-state-error,
-.ui-widget-header .ui-state-error {
-    border: 1px solid #cd0a0a;
-    background: #fef1ec;
-    color: #cd0a0a;
-}
-
-.ui-widget,
-.ui-widget input,
-.ui-widget select,
-.ui-widget textarea,
-.ui-widget button {
-    font-family : inherit;
-    font-size : inherit;
-}
-
-/* jQuery UI Datepicker */
-.ui-datepicker table {
-    width: 100%;
-    font-size: .9em;
-    border : 0;
-    border-collapse: collapse;
-    margin:0 0 .4em;
-}
-
-.ui-datepicker th {
-    background : transparent none;
-    padding: .7em .3em;
-    text-align: center;
-    font-weight: bold;
-    border: 0;
-}
-
-.ui-datepicker-trigger {
-    vertical-align: middle;
-    margin : 0 3px;
-}
-.ui-datepicker {
-    box-shadow: 1px 1px 3px 0 #666;
+/* Font Awesome isn't used in the installer, so add custom X icon */
+.clear_date {
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 3.175 3.175' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-74.712 -91.722)'%3E%3Cpath d='M75.321 94.571a.207.207 0 0 0 .293 0l.686-.685.685.685a.207.207 0 0 0 .293 0l.284-.283a.207.207 0 0 0 0-.294l-.686-.685.686-.685a.207.207 0 0 0 0-.294l-.284-.283a.207.207 0 0 0-.293 0l-.685.685-.686-.685a.207.207 0 0 0-.293 0l-.283.283a.207.207 0 0 0 0 .294l.685.685-.685.685a.207.207 0 0 0 0 .294z' fill='%23c33'/%3E%3Cimage x='-117.25' y='-204.6' width='196.44' height='175.61' preserveAspectRatio='none'/%3E%3C/g%3E%3C/svg%3E");
+    background-position: 5px 5px;
+    background-repeat: no-repeat;
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
 }
 
 span.breadcrumbs {
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
index 556d241762..b7cccf913b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
@@ -6,4 +6,12 @@
 [% Asset.css("lib/bootstrap/bootstrap.min.css") | $raw %]
 [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %]
 [% Asset.css("css/installer.css")  | $raw %]
+<script>
+var Koha = {};
+</script>
+[% IF lang && lang != 'en' %]
+    [% Asset.js(lang _ '/js/locale_data.js') | $raw %]
+[% END %]
+[% Asset.js('js/Gettext.js') | $raw %]
+[% Asset.js('js/i18n.js') | $raw %]
 <style id="antiClickjack">body{display:none !important;}</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc
index 33f7ffb3d2..3f1ca56a38 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc
@@ -5,6 +5,7 @@
         [% Asset.js("lib/jquery/jquery-ui-1.11.4.min.js") | $raw %]
         [% Asset.js("lib/bootstrap/bootstrap.min.js") | $raw %]
         [% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %]
+        [% INCLUDE 'calendar.inc' %]
         <!-- installer-intranet-bottom.inc -->
         <script>
             function _(s) { return s } // dummy function for gettext
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
index f00b263fdf..2a0250dbee 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
@@ -121,7 +121,7 @@
                                         </li>
                                         <li>
                                             <label for="enrolmentperioddate">Until date: </label>
-                                            <input type="text" class="enrolmentperioddate datepicker" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | $KohaDates %]" />
+                                            <input type="text" class="enrolmentperioddate" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | $KohaDates %]" />
                                              <div class="hint">[% INCLUDE 'date-format.inc' dateformat = Koha.Preference('dateformat') %]</div>
                                         </li>
                                     </ol>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/onboarding.js b/koha-tmpl/intranet-tmpl/prog/js/onboarding.js
index 93cb010b0c..5a19de635a 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/onboarding.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/onboarding.js
@@ -61,8 +61,25 @@ $(document).ready(function() {
          toUC(this);
     });
 
-    $("#enrolmentperioddate").datepicker({
-        minDate: 1
+    $("#enrolmentperioddate").flatpickr({
+        /* Default Flatpickr configuration uses Font Awesome icons for arrows. Onboarding doesn't include Font Awesome, so we redefine these arrows with some SVG icons */
+        nextArrow: '<svg width="17" height="17" viewBox="0 0 4.498 4.498" xmlns="http://www.w3.org/2000/svg"><path d="M3.761 2.491c.158.17.47.12.566-.09.085-.158.02-.356-.116-.461L2.562.292C2.445.17 2.3.282 2.217.382c-.087.102-.255.193-.195.35.107.149.254.265.378.399l1.361 1.36zm.496.017c.17-.157.12-.47-.091-.566-.158-.085-.355-.02-.46.117L2.057 3.707c-.12.118-.01.263.091.345.101.087.193.255.35.195.148-.106.264-.254.398-.378l1.36-1.36zm-.746.095c.206.006.457-.124.462-.353-.005-.23-.256-.36-.462-.354-1.054 0-2.109-.002-3.163 0-.174-.003-.234.166-.212.308.01.128-.043.3.104.369.157.056.33.02.493.03h2.778z"/></svg>',
+        prevArrow: '<svg width="17" height="17" viewBox="0 0 4.498 4.498" xmlns="http://www.w3.org/2000/svg"><path d="M.737 2.008c-.158-.17-.47-.12-.566.09-.085.158-.02.356.116.461l1.649 1.648c.117.121.263.01.345-.09.087-.102.255-.193.195-.35-.107-.149-.254-.265-.378-.399L.737 2.008zM.241 1.99c-.17.157-.12.47.091.566.158.085.355.02.46-.117L2.441.792C2.56.674 2.45.53 2.35.447 2.249.36 2.157.192 2 .252c-.148.106-.264.254-.398.378L.242 1.99zm.746-.095C.781 1.89.53 2.02.525 2.249c.005.23.256.36.462.354 1.054 0 2.109.002 3.163 0 .174.003.234-.166.212-.308-.01-.128.043-.3-.104-.369-.157-.056-.33-.02-.493-.03H.987z"/></svg>',
+        minDate: new Date().fp_incr(1),
+        onReady: function( selectedDates, dateStr, instance ){
+            $(instance.input)
+                /* Add a wrapper element so that we can prevent the clear button from wrapping */
+                .wrap("<span class='flatpickr_wrapper'></span>")
+                .after( $("<a/>")
+                    .attr("href","#")
+                    .addClass("clear_date")
+                    .on("click", function(e){
+                        e.preventDefault();
+                        instance.clear();
+                    })
+                    .attr("aria-hidden", true)
+                );
+        }
     }); // Require that "until date" be in the future
 
     $("#category_form").validate({