[QDatepicker] add mobile support

src/qComponents/QDatePicker/src/QDatePicker.vue

@@ -2,6 +2,7 @@
   <div
     ref="root"
     class="q-date-picker"
+    :class="{ 'q-date-picker_ranged': isRanged }"
   >
     <div
       v-if="!isRanged"
@@ -10,8 +11,9 @@
     >
       <q-input
         ref="reference"
+        class="q-date-picker__input"
         :model-value="displayValue"
-        :class="['q-date-editor', { 'q-input_focused': state.pickerVisible }]"
+        :root-class="{ 'q-input_focused': state.pickerVisible }"
         :readonly="!editable"
         :disabled="isPickerDisabled"
         :name="name"
@@ -21,6 +23,7 @@
         @keyup="handleKeyUp"
         @input="handleInput"
         @change="handleInputDateChange"
+        @keydown="handleKeydown"
       >
         <template #suffix>
           <span
@@ -44,37 +47,52 @@
     >
       <input
         autocomplete="off"
-        class="q-range-input"
+        class="q-date-picker__input"
         :placeholder="startPlaceholder || t('QDatePicker.startPlaceholder')"
         :value="displayValue && displayValue[0]"
         :disabled="isPickerDisabled"
         readonly
         tabindex="-1"
       />
       <slot name="range-separator">
-        <span class="q-range-separator">{{ rangeSeparator }}</span>
+        <span class="q-date-picker__range-separator">{{ rangeSeparator }}</span>
       </slot>
       <input
         autocomplete="off"
         :placeholder="endPlaceholder || t('QDatePicker.endPlaceholder')"
         :value="displayValue && displayValue[1]"
         :disabled="isPickerDisabled"
-        class="q-range-input"
+        class="q-date-picker__input"
         readonly
         tabindex="-1"
       />
       <span
         :class="iconClass"
-        class="q-input__icon"
+        class="q-date-picker__suffix"
         @click="handleIconClick"
       />
     </div>
     <teleport
       :to="teleportTo || 'body'"
       :disabled="!teleportTo"
     >
+      <q-dialog
+        v-if="isMobileView"
+        v-model:visible="state.pickerVisible"
+        prevent-focus-after-closing
+        @close="closePicker"
+      >
+        <component
+          :is="panelComponent"
+          ref="panel"
+          v-model="transformedToDate"
+          class="q-picker-panel__dialog-view"
+          @pick="handlePickClick"
+        />
+      </q-dialog>
       <transition
-        name="q-picker-panel_animation"
+        v-else
+        name="q-picker-panel-animation"
         @after-leave="destroyPopper"
         @before-enter="popperInit"
       >
@@ -119,7 +137,9 @@ import { isServer } from '@/qComponents/constants/isServer';
 import { getConfig } from '@/qComponents/config';
 import { t } from '@/qComponents/locale';
 import { notNull, validateArray } from '@/qComponents/helpers';
+import { useMediaQuery } from '@/qComponents/hooks';
 import QInput from '@/qComponents/QInput';
+import QDialog from '@/qComponents/QDialog';
 import type { QFormProvider } from '@/qComponents/QForm';
 import type { QInputInstance } from '@/qComponents/QInput';
 import type { QFormItemProvider } from '@/qComponents/QFormItem';
@@ -152,7 +172,7 @@ import type {
 export default defineComponent({
   name: 'QDatePicker',
   componentName: 'QDatePicker',
-  components: { QInput },
+  components: { QInput, QDialog },
   props: {
     /**
      * one of sugested types
@@ -321,6 +341,9 @@ export default defineComponent({
       popper: null
     });
 
+    const isMobileView = useMediaQuery('(max-width: 768px)');
+    const isTouchMode = useMediaQuery('(pointer: coarse)');
+
     const calcFirstDayOfWeek = computed<number>(() => {
       if (isNumber(props.firstDayOfWeek)) return props.firstDayOfWeek;
       return getConfig('locale') === 'ru' ? 1 : 0;
@@ -351,19 +374,13 @@ export default defineComponent({
     );
 
     const rangeClasses = computed<Record<string, boolean>>(() => ({
-      'q-date-editor': true,
-      'q-range-editor': true,
-      'q-range-editor_disabled': isPickerDisabled.value,
-      'q-range-editor_focused': state.pickerVisible
+      'q-date-picker__range-wrapper': true,
+      'q-date-picker__range-wrapper_disabled': isPickerDisabled.value,
+      'q-date-picker__range-wrapper_focused': state.pickerVisible
     }));
 
     const isRanged = computed<boolean>(() => props.type.includes('range'));
 
-    const iconClass = computed<string>(() => {
-      if (isPickerDisabled.value) return 'q-icon-lock';
-      return state.showCloseIcon ? 'q-icon-close' : 'q-icon-calendar';
-    });
-
     const panelComponent = computed<
       | typeof DateRangePanel
       | typeof MonthRangePanel
@@ -390,6 +407,15 @@ export default defineComponent({
       return !transformedToDate.value;
     });
 
+    const iconClass = computed<string>(() => {
+      if (isPickerDisabled.value) return 'q-icon-lock';
+      if (isTouchMode.value)
+        return !isValueEmpty.value && props.clearable
+          ? 'q-icon-close'
+          : 'q-icon-calendar';
+      return state.showCloseIcon ? 'q-icon-close' : 'q-icon-calendar';
+    });
+
     const displayValue = computed<Nullable<string | string[]>>(() => {
       let formattedValue: string | number | Date | (string | number | Date)[] =
         '';
@@ -494,6 +520,13 @@ export default defineComponent({
       state.userInput = null;
     };
 
+    const handleKeydown = (event: KeyboardEvent): void => {
+      // prevent letters input
+      if (event.key.match(/^(?!Enter$|Backspace$)[^0-9]+/g)) {
+        event.preventDefault();
+      }
+    };
+
     const handleKeyUp = (e: KeyboardEvent): void => {
       // if user is typing, do not let picker handle key input
       if (state.userInput) {
@@ -592,11 +625,16 @@ export default defineComponent({
 
     const handleFocus = (): void => {
       if (isPickerDisabled.value) return;
-
       state.pickerVisible = true;
       ctx.emit('focus');
-      if (!transformedToDate.value || Array.isArray(transformedToDate.value))
+
+      if (
+        !transformedToDate.value ||
+        Array.isArray(transformedToDate.value) ||
+        isMobileView.value
+      )
         return;
+
       const format = 'dd.MM.yy';
       state.userInput = formatToLocalReadableString(
         transformedToDate.value,
@@ -624,7 +662,7 @@ export default defineComponent({
       }
     };
 
-    const handleClose = (): void => {
+    const closePicker = (): void => {
       if (!state.pickerVisible) return;
       state.pickerVisible = false;
     };
@@ -672,11 +710,18 @@ export default defineComponent({
       }
     );
 
+    watch(isMobileView, value => {
+      if (value) {
+        closePicker();
+      }
+    });
+
     onBeforeUnmount(() => destroyPopper());
 
     provide<QDatePickerProvider>('qDatePicker', {
       emit: ctx.emit,
       firstDayOfWeek: calcFirstDayOfWeek,
+      isMobileView,
       emitChange,
       handlePickClick,
       type: toRef(props, 'type'),
@@ -689,6 +734,7 @@ export default defineComponent({
       root,
       panel,
       reference,
+      isMobileView,
       isRanged,
       isPickerDisabled,
       calcFirstDayOfWeek,
@@ -705,9 +751,10 @@ export default defineComponent({
       handlePickClick,
       handleFocus,
       handleInput,
+      handleKeydown,
       handleMouseEnter,
       handleRangeClick,
-      handleClose,
+      closePicker,
       handleIconClick,
       t
     };

src/qComponents/QDatePicker/src/helpers.ts

@@ -59,7 +59,7 @@ const formatToLocalReadableString = (
 };
 
 const calcInputData = (data: string, inputType: string): string => {
-  const clearVal = data.replace(/ |,|:|\./g, '');
+  const clearVal = data.replace(/[^0-9]/g, '');
   const array = clearVal.split('');
   const options = { separator: '.', maxLength: MAX_DATE_INPUT_LENGTH };
 

src/qComponents/QDatePicker/src/panel/Date/DatePanel.vue

@@ -435,6 +435,7 @@ export default defineComponent({
       state,
       root,
       shortcuts: picker.shortcuts,
+      isMobileView: picker.isMobileView,
       datePanel,
       panelContentClasses,
       currentMonth,

src/qComponents/QDatePicker/src/panel/Date/types.ts

@@ -26,6 +26,7 @@ interface DatePanelInstance {
   state: DatePanelState;
   root: Ref<Nullable<HTMLElement>>;
   shortcuts: Ref<Nullable<QDatePickerPropShortcuts>>;
+  isMobileView: Ref<boolean>;
   datePanel: Ref<Nullable<HTMLElement>>;
   panelContentClasses: ComputedRef<Record<string, boolean>>;
   isPeriodTableShown: ComputedRef<boolean>;

src/qComponents/QDatePicker/src/panel/DateRange/DateRange.vue

@@ -39,16 +39,12 @@
             <button
               type="button"
               :disabled="!enableMonthArrow"
-              :class="{
-                'q-picker-panel__icon-btn_disabled': !enableMonthArrow
-              }"
               class="q-picker-panel__icon-btn q-icon-triangle-right"
               @click="handleLeftNextMonthClick"
             />
             <button
               type="button"
               :disabled="!enableYearArrow"
-              :class="{ 'q-picker-panel__icon-btn_disabled': !enableYearArrow }"
               class="q-picker-panel__icon-btn q-icon-double-triangle-right"
               @click="handleLeftNextYearClick"
             />
@@ -65,6 +61,7 @@
           />
         </div>
         <div
+          v-if="!isMobileView"
           ref="rightPanel"
           :class="rightPanelClasses"
         >
@@ -248,6 +245,7 @@ export default defineComponent({
 
     const rightYear = computed<number>(() => state.rightDate.getFullYear());
     const enableMonthArrow = computed<boolean>(() => {
+      if (picker.isMobileView.value) return true;
       const nextMonth = (leftMonth.value + 1) % 12;
       const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0;
       return (
@@ -257,6 +255,7 @@ export default defineComponent({
     });
 
     const enableYearArrow = computed<boolean>(() => {
+      if (picker.isMobileView.value) return true;
       return Boolean(
         rightYear.value * MONTHS_COUNT +
           rightMonth.value -
@@ -488,7 +487,8 @@ export default defineComponent({
       handleRightPrevMonthClick,
       handleRangeSelecting,
       navigateDropdown,
-      shortcuts: picker.shortcuts
+      shortcuts: picker.shortcuts,
+      isMobileView: picker.isMobileView
     };
   }
 });

src/qComponents/QDatePicker/src/panel/DateRange/types.ts

@@ -43,6 +43,7 @@ interface DateRangePanelInstance {
   leftMonth: ComputedRef<number>;
   rightMonth: ComputedRef<number>;
   shortcuts: Ref<Nullable<QDatePickerPropShortcuts>>;
+  isMobileView: Ref<boolean>;
   handleRangePick: (val: RangePickValue, close?: boolean) => void;
   handleShortcutClick: (shortcut: Date) => void;
   handleClear: () => void;

src/qComponents/QDatePicker/src/panel/MonthRange/MonthRange.vue

@@ -33,7 +33,6 @@
             <button
               type="button"
               :disabled="!enableYearArrow"
-              :class="{ 'q-picker-panel__icon-btn_disabled': !enableYearArrow }"
               class="q-picker-panel__icon-btn q-icon-double-triangle-right"
               @click="handleLeftNextYearClick"
             />
@@ -50,6 +49,7 @@
           />
         </div>
         <div
+          v-if="!isMobileView"
           ref="rightPanel"
           :class="rightPanelClasses"
         >
@@ -176,7 +176,7 @@ export default defineComponent({
       'q-picker-panel__content_focused': state.panelInFocus === 'right'
     }));
 
-    const rightYear = computed(() => {
+    const rightYear = computed<number>(() => {
       if (isDate(state.rightDate) && isDate(state.leftDate)) {
         return state.rightDate.getFullYear() === state.leftDate.getFullYear()
           ? state.leftDate.getFullYear() + 1
@@ -192,9 +192,10 @@ export default defineComponent({
       getActualMonth(state.rightDate, 1)
     );
 
-    const enableYearArrow = computed<boolean>(
-      () => rightYear.value > leftYear.value + 1
-    );
+    const enableYearArrow = computed<boolean>(() => {
+      if (picker.isMobileView.value) return true;
+      return rightYear.value > leftYear.value + 1;
+    });
 
     const handleRangeSelecting = (value: RangeState): void => {
       state.rangeState = value;
@@ -224,7 +225,6 @@ export default defineComponent({
       state.maxDate = null;
       state.leftDate = new Date();
       state.rightDate = addYears(new Date(), 1);
-      ctx.emit('pick', null);
     };
 
     const handleLeftPrevYearClick = (): void => {
@@ -342,7 +342,8 @@ export default defineComponent({
       handleRightNextYearClick,
       handleRightPrevYearClick,
       navigateDropdown,
-      shortcuts: picker.shortcuts
+      shortcuts: picker.shortcuts,
+      isMobileView: picker.isMobileView
     };
   }
 });

src/qComponents/QDatePicker/src/panel/MonthRange/types.ts

@@ -28,6 +28,7 @@ interface MonthRangePanelInstance {
   leftPanel: Ref<Nullable<HTMLElement>>;
   rightPanel: Ref<Nullable<HTMLElement>>;
   shortcuts: Ref<Nullable<QDatePickerPropShortcuts>>;
+  isMobileView: Ref<boolean>;
   state: MonthRangeState;
   leftPanelClasses: ComputedRef<Record<string, boolean>>;
   rightPanelClasses: ComputedRef<Record<string, boolean>>;