Show localized date over top of date input

Also move datepicker logic into edit_books.js and edit_books.js below the datepicker file declaration(s)

cps/static/js/edit_books.js

@@ -1,8 +1,23 @@
 /**
  * Created by SpeedProg on 05.04.2015.
  */
-/* global Bloodhound */
+/* global Bloodhound, language */
 
+if (!Modernizr.inputtypes.date) {
+    $('#pubdate').datepicker({
+        format: 'yyyy-mm-dd',
+        language: language
+    }).on('change', function () {
+        // Show localized date over top of the standard YYYY-MM-DD date
+        let pubDate, results;
+        if ((results = /(\d{4})[-\/\\](\d{1,2})[-\/\\](\d{1,2})/.exec(this.value))) { // YYYY-MM-DD
+            pubDate = new Date(results[1], parseInt(results[2], 10)-1, results[3]) || new Date(this.value);
+        }
+        $('#fake_pubdate')
+            .val(pubDate.toLocaleDateString(language))
+            .removeClass('hidden');
+    }).trigger('change');
+}
 
 /*
 Takes a prefix, query typeahead callback, Bloodhound typeahead adapter

cps/templates/book_edit.html

@@ -54,7 +54,10 @@
 
     <div class="form-group">
       <label for="pubdate">{{_('Publishing date')}}</label>
+      <div style="position: relative">
         <input type="date" class="form-control" name="pubdate" id="pubdate" value="{% if book.pubdate %}{{book.pubdate|formatdateinput}}{% endif %}">
+        <input type="text" class="form-control fake-input hidden" id="fake_pubdate" value="{% if book.pubdate %}{{book.pubdate|formatdate}}{% endif %}">
+      </div>
     </div>
     <div class="form-group">
       <label for="languages">{{_('Language')}}</label>
@@ -187,9 +190,9 @@
     'description': {{_('Description')|safe|tojson}},
     'source': {{_('Source')|safe|tojson}},
   };
+  var language = '{{ g.user.locale }}';
 </script>
 <script src="{{ url_for('static', filename='js/libs/typeahead.bundle.js') }}"></script>
-<script src="{{ url_for('static', filename='js/edit_books.js') }}"></script>
 <script src="{{ url_for('static', filename='js/libs/bootstrap-rating-input.min.js') }}"></script>
 <script src="{{ url_for('static', filename='js/get_meta.js') }}"></script>
 <script src="{{ url_for('static', filename='js/libs/tinymce/tinymce.min.js') }}"></script>
@@ -204,14 +207,8 @@
     menubar: 'edit view format',
     language: '{{ g.user.locale }}'
   });
-
-  if (!Modernizr.inputtypes.date) {
-    $('#pubdate').datepicker({
-      format: 'yyyy-mm-dd',
-      language: '{{ g.user.locale }}'
-    });
-  }
 </script>
+<script src="{{ url_for('static', filename='js/edit_books.js') }}"></script>
 {% endblock %}
 {% block header %}
 <link href="{{ url_for('static', filename='css/libs/typeahead.css') }}" rel="stylesheet" media="screen">