Change datepicker library to fix iOS users.

src/components/date-picker.ts

@@ -1,9 +1,9 @@
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
-import 'lit-flatpickr';
-import { LitFlatpickr } from 'lit-flatpickr';
 import { customElement } from 'lit/decorators.js';
 import { createRef, ref, Ref } from 'lit/directives/ref.js';
+import { localize } from '../localize/localize';
 import datePickerStyle from '../scss/date-picker.scss';
+import { stopEventFromActivatingCardWideActions } from '../utils/action';
 import { dispatchFrigateCardEvent } from '../utils/basic';
 
 export interface DatePickerEvent {
@@ -12,24 +12,33 @@ export interface DatePickerEvent {
 
 @customElement('frigate-card-date-picker')
 export class FrigateCardDatePicker extends LitElement {
-  protected _refInput: Ref<LitFlatpickr> = createRef();
-
-  public open(): void {
-    this._refInput.value?.open();
-  }
+  protected _refInput: Ref<HTMLInputElement> = createRef();
 
   protected render(): TemplateResult {
-    return html` <lit-flatpickr
-      ${ref(this._refInput)}
-      .onChange=${(dates: Date[]) => {
-        if (dates.length) {
-          // This is a single date picker, there should be only a single date.
-          dispatchFrigateCardEvent<DatePickerEvent>(this, 'date-picker:change', {
-            date: dates[0],
-          });
-        }
-      }}
-    ></lit-flatpickr>`;
+    return html`<input
+        aria-label="${localize('timeline.select_date')}"
+        title="${localize('timeline.select_date')}"
+        ${ref(this._refInput)}
+        type="datetime-local"
+        @input=${() => {
+          const value = this._refInput.value?.value;
+          if (value) {
+            dispatchFrigateCardEvent<DatePickerEvent>(this, 'date-picker:change', {
+              date: new Date(value),
+            });
+          }
+        }}
+      />
+      <ha-icon
+        aria-label="${localize('timeline.select_date')}"
+        title="${localize('timeline.select_date')}"
+        .icon=${`mdi:calendar-search`}
+        @click=${(ev: Event) => {
+          stopEventFromActivatingCardWideActions(ev);
+          this._refInput.value?.showPicker();
+        }}
+      >
+      </ha-icon>`;
   }
 
   static get styles(): CSSResultGroup {

src/components/timeline-core.ts

@@ -334,22 +334,10 @@ export class FrigateCardTimelineCore extends LitElement {
                 >
                 </ha-icon>`
               : ''}
-            <ha-icon
-              .icon=${`mdi:calendar-search`}
-              aria-label="${localize('timeline.select_date')}"
-              title="${localize('timeline.select_date')}"
-              @click=${() => {
-                this._refDatePicker.value?.open();
-              }}
-            >
-            </ha-icon>
             <frigate-card-date-picker
               ${ref(this._refDatePicker)}
               @frigate-card:date-picker:change=${(ev: CustomEvent<DatePickerEvent>) => {
-                this._timeline?.setWindow(
-                  startOfDay(ev.detail.date),
-                  endOfDay(ev.detail.date),
-                );
+                this._timeline?.moveTo(ev.detail.date);
               }}
             >
             </frigate-card-date-picker>

src/scss/date-picker.scss

@@ -1,7 +1,51 @@
-// The lit-flatpickr element itself is hidden as we only want the popup
-// calender.
-lit-flatpickr {
-  visibility: hidden;
-  width: 0px;
-  height: 0px;
+:host {
+  display: inline-block;
+  position: relative;
+  width: var(--mdc-icon-size, 24px);
+  height: var(--mdc-icon-size, 24px);
+}
+
+input {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+
+  padding: 0px;
+  border: 0px;
+}
+
+/**
+ * Hack warning: Safari on iOS does not support showPicker with
+ * datetime-local:
+ * https://caniuse.com/mdn-api_htmlinputelement_showpicker_datetime_local_input
+ *
+ * The hack is to render the input element in front of the icon, with an
+ * opacity of 0. This only works if the underlying input element accepts the
+ * click at the exact place the user happens to click. From trial and error,
+ * this seems to work better than expected / quite reliably, but had the user
+ * manually changed icon sizes with Safari iOS their experience may vary.
+ */
+
+// webkit-touch-callout used to "detect" Safari on iOS. See:
+//  - https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices
+@supports (-webkit-touch-callout: none) {
+  input {
+    // Need it to be in "front" but not visible to the naked eye.
+    opacity: 0;
+    z-index: 1;
+  }
+}
+
+@supports not (-webkit-touch-callout: none) {
+  input {
+    visibility: hidden;
+  }
+}
+
+ha-icon {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
 }

src/scss/timeline-core.scss

@@ -170,6 +170,7 @@ div.vis-tooltip {
 }
 
 .timeline-tools {
+  display: inline-flex;
   position: absolute;
   right: 2px;
   bottom: 2px;