mobile improvement for datepcikers

Author: RafaelGB

docs/docs/changelog.md

@@ -1,4 +1,11 @@
-
+## 2.8.2
+### Visual
+- UX improvements for date picker and time picker
+- Checkbox design improvements [randomsnowflake](https://github.com/randomsnowflake)
+### No longer broken
+- Tags are now properly saved when it's a number with decimals with zero at the end (e.g. 1.0, 1.00, 1.000, etc.)
+- Datepicker clear button now works properly [ISSUE#564](https://github.com/RafaelGB/obsidian-db-folder/issues/564)
+- Vertical scroll on mobile improved [ISSUE#488](https://github.com/RafaelGB/obsidian-db-folder/issues/488)
 ## 2.8.1
 ### Shiny new things
 - New rollup functions: Count unique values,Truthy count, Falsy count, Percent empty, Percent filled, Task TODO, Task completed

src/components/cellTypes/CalendarCell.tsx

@@ -1,4 +1,9 @@
-import React, { useState } from "react";
+import React, {
+  DetailedHTMLProps,
+  forwardRef,
+  InputHTMLAttributes,
+  useState,
+} from "react";
 import { DateTime } from "luxon";
 import DatePicker from "react-datepicker";
 import { Portal } from "@mui/material";
@@ -7,6 +12,7 @@ import { CellComponentProps } from "cdm/ComponentsModel";
 import { TableColumn } from "cdm/FolderModel";
 import { ParseService } from "services/ParseService";
 import { InputType } from "helpers/Constants";
+import { Platform } from "obsidian";
 
 const CalendarCell = (calendarProps: CellComponentProps) => {
   const { defaultCell } = calendarProps;
@@ -66,6 +72,11 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
     }, 100);
   };
 
+  const ReactDatePickerInput = forwardRef<
+    HTMLInputElement,
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+  >((props, ref) => <input ref={ref} {...props} readOnly />);
+
   return showDatePicker ? (
     <DatePicker
       dateFormat={configInfo.getLocalSettings().date_format}
@@ -78,6 +89,7 @@ const CalendarCell = (calendarProps: CellComponentProps) => {
       popperContainer={CalendarContainer}
       onClickOutside={closeEditCalendarCell}
       onCalendarClose={closeEditCalendarCell}
+      customInput={Platform.isMobile ? <ReactDatePickerInput /> : null}
       autoFocus
       isClearable
       ariaLabelClose="Clear"

src/components/cellTypes/CalendarTimeCell.tsx

@@ -1,4 +1,9 @@
-import React, { useState } from "react";
+import React, {
+  DetailedHTMLProps,
+  forwardRef,
+  InputHTMLAttributes,
+  useState,
+} from "react";
 import { DateTime } from "luxon";
 import DatePicker from "react-datepicker";
 import { Portal } from "@mui/material";
@@ -7,6 +12,7 @@ import { TableColumn } from "cdm/FolderModel";
 import { ParseService } from "services/ParseService";
 import { InputType } from "helpers/Constants";
 import { c } from "helpers/StylesHelper";
+import { Platform } from "obsidian";
 
 const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
   const { defaultCell } = calendarTimeProps;
@@ -67,6 +73,11 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
     }, 100);
   };
 
+  const ReactDatePickerInput = forwardRef<
+    HTMLInputElement,
+    DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
+  >((props, ref) => <input ref={ref} {...props} readOnly />);
+
   return showDatePicker &&
     (tableColumn.isMetadata === undefined || !tableColumn.isMetadata) ? (
     <DatePicker
@@ -80,6 +91,7 @@ const CalendarTimeCell = (calendarTimeProps: CellComponentProps) => {
       popperContainer={CalendarContainer}
       onClickOutside={closeEditCalendarTimeCell}
       onCalendarClose={closeEditCalendarTimeCell}
+      customInput={Platform.isMobile ? <ReactDatePickerInput /> : null}
       timeFormat="HH:mm"
       timeCaption="time"
       showTimeSelect