first commit

admin-kalsport/themes/new-theme/js/app/utils/datepicker.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+import 'url-polyfill';
+
+const {$} = window;
+
+const replaceDatePicker = () => {
+  const datepickerWidget = $('body').find(
+    '.bootstrap-datetimepicker-widget:last',
+  );
+
+  if (datepickerWidget.length <= 0) {
+    return;
+  }
+
+  const position = datepickerWidget.offset();
+  const originalHeight = datepickerWidget.outerHeight();
+  const margin = (datepickerWidget.outerHeight(true) - originalHeight) / 2;
+
+  // Move datepicker to the exact same place it was but attached to body
+  datepickerWidget.appendTo('body');
+
+  // Height changed because the css from column-filters is not applied any more
+  let top = position.top + margin;
+
+  // Datepicker is settle to the top position
+  if (datepickerWidget.hasClass('top')) {
+    top += originalHeight - datepickerWidget.outerHeight(true) - margin;
+  }
+
+  datepickerWidget.css({
+    position: 'absolute',
+    top,
+    bottom: 'auto',
+    left: position.left,
+    right: 'auto',
+  });
+
+  $(window).on('resize', replaceDatePicker);
+};
+
+/**
+ * Enable all datepickers.
+ */
+const init = function initDatePickers() {
+  const $datePickers = $('.datepicker input[type="text"]');
+  $.each($datePickers, (i, picker) => {
+    $(picker)
+      .datetimepicker({
+        locale: window.full_language_code,
+        format: $(picker).data('format')
+          ? $(picker).data('format')
+          : 'YYYY-MM-DD',
+        sideBySide: true,
+        icons: {
+          time: 'time',
+          date: 'date',
+          up: 'up',
+          down: 'down',
+        },
+      })
+      .on('dp.show', replaceDatePicker)
+      .on('dp.hide', () => {
+        $(window).off('resize', replaceDatePicker);
+      })
+      .on('dp.change', (e) => {
+        // Looks like we can't bind an event to a datepicker selected afterwhile.
+        // So we emit an event on change to manipulate datas
+        const event = new CustomEvent('datepickerChange', e);
+        window.document.dispatchEvent(event);
+      });
+  });
+};
+
+export default init;