move jquery-datetimepicker to npm/webpack (#10713)

- update to latest version and move to npm
- adapt for api changes and css class rename
- add specificity to arc-green rules as dependency css now loads later
- use imports-loader to make it load correctly
- fix some wrong paths in librejs

Co-authored-by: techknowlogick <techknowlogick@gitea.io>

web_src/js/features/datetimepicker.js

@@ -0,0 +1,8 @@
+export default async function initDateTimePicker(locale) {
+  await Promise.all([
+    import(/* webpackChunkName: "datetimepicker" */'jquery-datetimepicker'),
+    import(/* webpackChunkName: "datetimepicker" */'jquery-datetimepicker/build/jquery.datetimepicker.min.css'),
+  ]);
+
+  $.datetimepicker.setLocale(locale);
+}

web_src/js/index.js

@@ -15,6 +15,7 @@ import initHighlight from './features/highlight.js';
 import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
 import initUserHeatmap from './features/userheatmap.js';
+import initDateTimePicker from './features/datetimepicker.js';
 import createDropzone from './features/dropzone.js';
 import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
 
@@ -633,7 +634,7 @@ function initIssueComments() {
   });
 }
 
-function initRepository() {
+async function initRepository() {
   if ($('.repository').length === 0) {
     return;
   }
@@ -731,15 +732,16 @@ function initRepository() {
   // Milestones
   if ($('.repository.new.milestone').length > 0) {
     const $datepicker = $('.milestone.datepicker');
+
+    await initDateTimePicker($datepicker.data('lang'));
+
     $datepicker.datetimepicker({
-      lang: $datepicker.data('lang'),
       inline: true,
       timepicker: false,
       startDate: $datepicker.data('start-date'),
-      formatDate: 'Y-m-d',
-      onSelectDate(ct) {
-        $('#deadline').val(ct.dateFormat('Y-m-d'));
-      }
+      onSelectDate(date) {
+        $('#deadline').val(date.toISOString().substring(0, 10));
+      },
     });
     $('#clear-date').click(() => {
       $('#deadline').val('');

web_src/less/themes/theme-arc-green.less

@@ -1345,12 +1345,12 @@ a.ui.labels .label:hover {
     }
 }
 
-.xdsoft_datetimepicker {
+body .xdsoft_datetimepicker {
     background: #2a2e39;
     border: 1px solid #4c505c;
     color: #9e9e9e;
 
-    .xdsoft_mounthpicker {
+    .xdsoft_monthpicker {
         height: 36px;
         background: #464c5d;
         margin: -2px -8px 2px;
@@ -1416,7 +1416,6 @@ a.ui.labels .label:hover {
             background: #a0cc75;
             color: #000000;
         }
-
     }
 }