Repository: obsidian-tasks-group/obsidian-tasks
Pull request #3067 (2024-09-06 17:06:51)

fix: remove datepicker pending usability fixes
# Types of changes

Done by pairing with @claremacrae 

Changes visible to users:

- [x] **Bug fix** (prefix: `fix` - non-breaking change which fixes an issue)
- [x] **Sample vault** (prefix: `vault` - improvements to the [Tasks-Demo sample vault](https://github.com/obsidian-tasks-group/obsidian-tasks/tree/main/resources/sample_vaults/Tasks-Demo))

## Description

- disable and hide all references to the new date picker

## Motivation and Context

- enable release of #3060

## How has this been tested?

- manual test in demo vault

## Checklist

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [x] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).

## Terms

- [x] My contribution follows this project's [contributing guide](https://publish.obsidian.md/tasks-contributing)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)



Patch:
diff --git a/src/Renderer/TaskLineRenderer.ts b/src/Renderer/TaskLineRenderer.ts
index 844df950..78b34f41 100644
--- a/src/Renderer/TaskLineRenderer.ts
+++ b/src/Renderer/TaskLineRenderer.ts
@@ -11,7 +11,6 @@ import { TaskRegularExpressions } from '../Task/TaskRegularExpressions';
 import { StatusMenu } from '../ui/Menus/StatusMenu';
 import type { AllTaskDateFields } from '../DateTime/DateFieldTypes';
 import { defaultTaskSaver } from '../ui/Menus/TaskEditingMenu';
-import { promptForDate } from '../ui/Menus/DatePicker';
 import { splitDateText } from '../DateTime/Postponer';
 import { DateMenu } from '../ui/Menus/DateMenu';
 import { TaskFieldRenderer } from './TaskFieldRenderer';
@@ -216,11 +215,11 @@ export class TaskLineRenderer {
                     const componentDateField = component as AllTaskDateFields;
 
                     // Note: The more convenient span.onClickEvent() doesn't work here, as it is not available when tests are run.
-                    span.addEventListener('click', (ev: MouseEvent) => {
-                        ev.preventDefault(); // suppress the default click behavior
-                        ev.stopPropagation(); // suppress further event propagation
-                        promptForDate(span, task, componentDateField, defaultTaskSaver);
-                    });
+                    // span.addEventListener('click', (ev: MouseEvent) => {
+                    //     ev.preventDefault(); // suppress the default click behavior
+                    //     ev.stopPropagation(); // suppress further event propagation
+                    //     promptForDate(span, task, componentDateField, defaultTaskSaver);
+                    // });
 
                     span.addEventListener('contextmenu', (ev: MouseEvent) => {
                         ev.preventDefault(); // suppress the default context menu
@@ -230,7 +229,8 @@ export class TaskLineRenderer {
                     });
                     span.setAttribute(
                         'title',
-                        `Click to edit ${splitDateText(componentDateField)}, Right-click for more options`,
+                        // `Click to edit ${splitDateText(componentDateField)}, Right-click for more options`,
+                        `Right-click to edit ${splitDateText(componentDateField)}`,
                     );
                 }
             }
diff --git a/src/ui/DateEditor.svelte b/src/ui/DateEditor.svelte
index e573bb2d..048f0ea2 100644
--- a/src/ui/DateEditor.svelte
+++ b/src/ui/DateEditor.svelte
@@ -1,9 +1,4 @@
 <script lang="ts">
-    import flatpickr from 'flatpickr';
-    import { createEventDispatcher } from 'svelte';
-
-    import { setIcon } from 'obsidian';
-
     import { doAutocomplete } from '../DateTime/DateAbbreviations';
     import { parseTypedDateForDisplayUsingFutureDate } from '../DateTime/DateTools';
     import { labelContentWithAccessKey } from './EditTaskHelpers';
@@ -16,16 +11,16 @@
     export let accesskey: string | null;
 
     let parsedDate: string;
-    let inputElement: HTMLInputElement;
-    let flatpickrInstance: any;
-
-    const dispatch = createEventDispatcher();
-
-    const iconCalendarDays = (node: HTMLElement) => {
-        // For a more general implementation, see:
-        // https://github.com/joethei/obsidian-rss/blob/b600e2ead2505d58aa3e4c7898795bbf58fa3cdc/src/view/IconComponent.svelte
-        setIcon(node, 'calendar-days');
-    };
+    // let inputElement: HTMLInputElement;
+    // let flatpickrInstance: any;
+    //
+    // const dispatch = createEventDispatcher();
+    //
+    // const iconCalendarDays = (node: HTMLElement) => {
+    //     // For a more general implementation, see:
+    //     // https://github.com/joethei/obsidian-rss/blob/b600e2ead2505d58aa3e4c7898795bbf58fa3cdc/src/view/IconComponent.svelte
+    //     setIcon(node, 'calendar-days');
+    // };
 
     $: {
         date = doAutocomplete(date);
@@ -41,60 +36,59 @@
      *
      * See also {@link promptForDate}
      */
-    function openDatePicker() {
-        if (inputElement) {
-            if (flatpickrInstance) {
-                flatpickrInstance.destroy(); // Destroy any existing instance to avoid conflicts
-            }
-
-            const options: Record<string, any> = {
-                enableTime: false,
-                dateFormat: 'Y-m-d',
-                locale: {
-                    firstDayOfWeek: 1,
-                },
-                onClose: (selectedDates: Date[]) => {
-                    dispatch('close', { instance: flatpickrInstance }); // Notify parent about close
-
-                    if (selectedDates.length > 0) {
-                        const selectedDate = selectedDates[0];
-                        date = window.moment(selectedDate).format('YYYY-MM-DD');
-                    }
-
-                    flatpickrInstance.destroy(); // Destroy the instance after the date is selected
-                    flatpickrInstance = null;
-                },
-                allowInput: true, // Allow manual input to keep the field empty if no selection is made
-                defaultDate: undefined, // Explicitly define defaultDate with undefined
-            };
-
-            // We don't use parseDate() here as we want to strictly only match exact dates,
-            // and not words like 'today' or 'tomorrow', to make sure we really
-            // are using the already-parsed date in the Modal UI:
-            const dateMatcher = /^\d{4}-\d{2}-\d{2}$/;
-            if (parsedDate.match(dateMatcher)) {
-                // This is where the user had typed, for example, 'tomorrow' in the input
-                // field, and chrono has converted that to an exact date.
-                options.defaultDate = new Date(parsedDate);
-            } else if (date.match(dateMatcher)) {
-                // This is a precaution, for the unlikely event that the input field
-                // contains a parsed date, but the parsedDate does not.
-                // It's possible that it is unreachable, but we would need tests to confirm that.
-                options.defaultDate = new Date(date);
-            }
-
-            flatpickrInstance = flatpickr(inputElement, options);
-            dispatch('open', { instance: flatpickrInstance }); // Notify parent about open
-
-            flatpickrInstance.open(); // Directly open the date picker
-        }
-    }
+    // function openDatePicker() {
+    //     if (inputElement) {
+    //         if (flatpickrInstance) {
+    //             flatpickrInstance.destroy(); // Destroy any existing instance to avoid conflicts
+    //         }
+    //
+    //         const options: Record<string, any> = {
+    //             enableTime: false,
+    //             dateFormat: 'Y-m-d',
+    //             locale: {
+    //                 firstDayOfWeek: 1,
+    //             },
+    //             onClose: (selectedDates: Date[]) => {
+    //                 dispatch('close', { instance: flatpickrInstance }); // Notify parent about close
+    //
+    //                 if (selectedDates.length > 0) {
+    //                     const selectedDate = selectedDates[0];
+    //                     date = window.moment(selectedDate).format('YYYY-MM-DD');
+    //                 }
+    //
+    //                 flatpickrInstance.destroy(); // Destroy the instance after the date is selected
+    //                 flatpickrInstance = null;
+    //             },
+    //             allowInput: true, // Allow manual input to keep the field empty if no selection is made
+    //             defaultDate: undefined, // Explicitly define defaultDate with undefined
+    //         };
+    //
+    //         // We don't use parseDate() here as we want to strictly only match exact dates,
+    //         // and not words like 'today' or 'tomorrow', to make sure we really
+    //         // are using the already-parsed date in the Modal UI:
+    //         const dateMatcher = /^\d{4}-\d{2}-\d{2}$/;
+    //         if (parsedDate.match(dateMatcher)) {
+    //             // This is where the user had typed, for example, 'tomorrow' in the input
+    //             // field, and chrono has converted that to an exact date.
+    //             options.defaultDate = new Date(parsedDate);
+    //         } else if (date.match(dateMatcher)) {
+    //             // This is a precaution, for the unlikely event that the input field
+    //             // contains a parsed date, but the parsedDate does not.
+    //             // It's possible that it is unreachable, but we would need tests to confirm that.
+    //             options.defaultDate = new Date(date);
+    //         }
+    //
+    //         flatpickrInstance = flatpickr(inputElement, options);
+    //         dispatch('open', { instance: flatpickrInstance }); // Notify parent about open
+    //
+    //         flatpickrInstance.open(); // Directly open the date picker
+    //     }
+    // }
 </script>
 
 <label for={id}>{@html labelContentWithAccessKey(id, accesskey)}</label>
 <!-- svelte-ignore a11y-accesskey -->
 <input
-    bind:this={inputElement}
     bind:value={date}
     {id}
     type="text"
@@ -104,13 +98,13 @@
     {accesskey}
 />
 
-<button
-    class="tasks-modal-calendar-button"
-    use:iconCalendarDays
-    on:click={openDatePicker}
-    aria-label="Open date picker"
-    style="background: none; border: none; padding: 0; cursor: pointer;"
-/>
+<!--<button-->
+<!--    class="tasks-modal-calendar-button"-->
+<!--    use:iconCalendarDays-->
+<!--    on:click={openDatePicker}-->
+<!--    aria-label="Open date picker"-->
+<!--    style="background: none; border: none; padding: 0; cursor: pointer;"-->
+<!--/>-->
 
 <code class="tasks-modal-parsed-date">{dateSymbol} {@html parsedDate}</code>
 
diff --git a/src/ui/EditTask.scss b/src/ui/EditTask.scss
index 0c1d8f99..53b5da95 100644
--- a/src/ui/EditTask.scss
+++ b/src/ui/EditTask.scss
@@ -77,23 +77,23 @@
     }
 
     .tasks-modal-date-input {
-        grid-column: 2;
+        //grid-column: 2;
         min-width: 15em;
     }
 
-    .tasks-modal-calendar-button {
-        grid-column: 3;
-        color: var(--text-muted);
-    }
+    //.tasks-modal-calendar-button {
+    //    grid-column: 3;
+    //    color: var(--text-muted);
+    //}
 
     .tasks-modal-parsed-date {
-        grid-column: 4;
+        grid-column: 3;
         font-size: var(--font-ui-small);
     }
 
     .future-dates-only {
         grid-column-start: 1;
-        grid-column-end: 4;
+        grid-column-end: 3;
 
         input {
             margin-left: 0.67em;
@@ -149,7 +149,7 @@
     }
 }
 
-@media (max-width: 529px) {
+@media (max-width: 499px) {
     .tasks-modal-priority-section {
         grid-template-columns: 4em auto auto;
     }
@@ -162,12 +162,12 @@
             grid-column: 1;
         }
 
-        .tasks-modal-calendar-button {
-            grid-column: 2;
-        }
+        //.tasks-modal-calendar-button {
+        //    grid-column: 2;
+        //}
 
         .tasks-modal-parsed-date {
-            grid-column: 3;
+            grid-column: 2;
         }
 
         .status-editor-status-selector {
@@ -192,9 +192,9 @@
             grid-column: 1;
         }
 
-        .tasks-modal-calendar-button {
-            grid-column: 1;
-        }
+        //.tasks-modal-calendar-button {
+        //    grid-column: 1;
+        //}
 
         > .tasks-modal-parsed-date {
             grid-column: 1;


Test patch:
diff --git a/resources/sample_vaults/Tasks-Demo/Manual Testing/Smoke Testing the Tasks Plugin.md b/resources/sample_vaults/Tasks-Demo/Manual Testing/Smoke Testing the Tasks Plugin.md
index b609a388..f72cb2e3 100644
--- a/resources/sample_vaults/Tasks-Demo/Manual Testing/Smoke Testing the Tasks Plugin.md
+++ b/resources/sample_vaults/Tasks-Demo/Manual Testing/Smoke Testing the Tasks Plugin.md
@@ -127,13 +127,13 @@ heading includes Rendering of Task Blocks
 
 - View this file in **Reading mode**...
 - On the task line above:
-  - [ ] #task **left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.
-  - [ ] #task **left**-click on a date value, and click outside the date picker, to confirm that the picker closes.
+  - [ ] #task ~~**left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.~~
+  - [ ] #task ~~**left**-click on a date value, and click outside the date picker, to confirm that the picker closes.~~
   - [ ] #task **right**-click on a date value, and use the context menu to select and save a different date. Check that the date is updated.
   - [ ] #task **right**-click on a date value, and click outside the context menu, to confirm that the menu closes.
 - In the tasks search block below:
-  - [ ] #task **left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.
-  - [ ] #task **left**-click on a date value, and click outside the date picker, to confirm that the picker closes.
+  - [ ] #task ~~**left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.~~
+  - [ ] #task ~~**left**-click on a date value, and click outside the date picker, to confirm that the picker closes.~~
   - [ ] #task **right**-click on a date value, and use the context menu to select and save a different date. Check that the date is updated.
   - [ ] #task **right**-click on a date value, and click outside the context menu, to confirm that the menu closes.
 - [ ] #task **check**: Checked all above steps for **editing dates** worked
@@ -155,8 +155,8 @@ hide postpone button
     2. **Check** that the text in the list item is copied in to the Description field
     3. Type some values in to the fields
     4. In one of the date fields, type `tm` (including the space afterwards) and **Check** it is expanded in to `tomorrow`
-    5. In one of the date fields, left-click the calendar button, and use the context menu to select and save a date. Check that the date is saved.
-    6. In one of the date fields, left-click the calendar button, and click outside the date picker, to confirm that the picker closes and the modal is still usable.
+    5. ~~In one of the date fields, left-click the calendar button, and use the context menu to select and save a date. Check that the date is saved.~~
+    6. ~~In one of the date fields, left-click the calendar button, and click outside the date picker, to confirm that the picker closes and the modal is still usable.~~
     7. Hit Return or click **Apply**
     8. **Check** that the list item above is converted in to a task
     9. **Check** that values you entered in the modal have been copied in to the list item above
diff --git a/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html b/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html
index d9ad41d8..cf058098 100644
--- a/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html
+++ b/tests/Renderer/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html
@@ -21,34 +21,22 @@
         <span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
         <span class="task-recurring"><span>🔁 every day when done</span></span>
         <span class="task-onCompletion"><span>🏁 delete</span></span>
-        <span
-          class="task-created"
-          data-task-created="past-far"
-          title="Click to edit created date, Right-click for more options">
+        <span class="task-created" data-task-created="past-far" title="Right-click to edit created date">
           <span>➕ 2023-07-01</span>
         </span>
-        <span
-          class="task-start"
-          data-task-start="past-far"
-          title="Click to edit start date, Right-click for more options">
+        <span class="task-start" data-task-start="past-far" title="Right-click to edit start date">
           <span>🛫 2023-07-02</span>
         </span>
-        <span
-          class="task-scheduled"
-          data-task-scheduled="past-far"
-          title="Click to edit scheduled date, Right-click for more options">
+        <span class="task-scheduled" data-task-scheduled="past-far" title="Right-click to edit scheduled date">
           <span>⏳ 2023-07-03</span>
         </span>
-        <span class="task-due" data-task-due="past-far" title="Click to edit due date, Right-click for more options">
+        <span class="task-due" data-task-due="past-far" title="Right-click to edit due date">
           <span>📅 2023-07-04</span>
         </span>
-        <span
-          class="task-cancelled"
-          data-task-cancelled="past-far"
-          title="Click to edit cancelled date, Right-click for more options">
+        <span class="task-cancelled" data-task-cancelled="past-far" title="Right-click to edit cancelled date">
           <span>❌ 2023-07-06</span>
         </span>
-        <span class="task-done" data-task-done="past-far" title="Click to edit done date, Right-click for more options">
+        <span class="task-done" data-task-done="past-far" title="Right-click to edit done date">
           <span>✅ 2023-07-05</span>
         </span>
         <span class="task-block-link"><span>^dcf64c</span></span>
diff --git a/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_full_mode.approved.html b/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_full_mode.approved.html
index 5360594f..1d3200fe 100644
--- a/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_full_mode.approved.html
+++ b/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_full_mode.approved.html
@@ -23,31 +23,22 @@
     <span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
     <span class="task-recurring"><span>🔁 every day when done</span></span>
     <span class="task-onCompletion"><span>🏁 delete</span></span>
-    <span
-      class="task-created"
-      data-task-created="past-4d"
-      title="Click to edit created date, Right-click for more options">
+    <span class="task-created" data-task-created="past-4d" title="Right-click to edit created date">
       <span>➕ 2023-07-01</span>
     </span>
-    <span class="task-start" data-task-start="past-3d" title="Click to edit start date, Right-click for more options">
+    <span class="task-start" data-task-start="past-3d" title="Right-click to edit start date">
       <span>🛫 2023-07-02</span>
     </span>
-    <span
-      class="task-scheduled"
-      data-task-scheduled="past-2d"
-      title="Click to edit scheduled date, Right-click for more options">
+    <span class="task-scheduled" data-task-scheduled="past-2d" title="Right-click to edit scheduled date">
       <span>⏳ 2023-07-03</span>
     </span>
-    <span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
+    <span class="task-due" data-task-due="past-1d" title="Right-click to edit due date">
       <span>📅 2023-07-04</span>
     </span>
-    <span
-      class="task-cancelled"
-      data-task-cancelled="future-1d"
-      title="Click to edit cancelled date, Right-click for more options">
+    <span class="task-cancelled" data-task-cancelled="future-1d" title="Right-click to edit cancelled date">
       <span>❌ 2023-07-06</span>
     </span>
-    <span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
+    <span class="task-done" data-task-done="today" title="Right-click to edit done date">
       <span>✅ 2023-07-05</span>
     </span>
     <span class="task-block-link"><span>^dcf64c</span></span>
diff --git a/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_short_mode.approved.html b/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_short_mode.approved.html
index 378b57b8..cf2ac965 100644
--- a/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_short_mode.approved.html
+++ b/tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_short_mode.approved.html
@@ -23,33 +23,18 @@
     <span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
     <span class="task-recurring"><span>🔁</span></span>
     <span class="task-onCompletion"><span>🏁</span></span>
-    <span
-      class="task-created"
-      data-task-created="past-4d"
-      title="Click to edit created date, Right-click for more options">
+    <span class="task-created" data-task-created="past-4d" title="Right-click to edit created date">
       <span>➕</span>
     </span>
-    <span class="task-start" data-task-start="past-3d" title="Click to edit start date, Right-click for more options">
-      <span>🛫</span>
-    </span>
-    <span
-      class="task-scheduled"
-      data-task-scheduled="past-2d"
-      title="Click to edit scheduled date, Right-click for more options">
+    <span class="task-start" data-task-start="past-3d" title="Right-click to edit start date"><span>🛫</span></span>
+    <span class="task-scheduled" data-task-scheduled="past-2d" title="Right-click to edit scheduled date">
       <span>⏳</span>
     </span>
-    <span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
-      <span>📅</span>
-    </span>
-    <span
-      class="task-cancelled"
-      data-task-cancelled="future-1d"
-      title="Click to edit cancelled date, Right-click for more options">
+    <span class="task-due" data-task-due="past-1d" title="Right-click to edit due date"><span>📅</span></span>
+    <span class="task-cancelled" data-task-cancelled="future-1d" title="Right-click to edit cancelled date">
       <span>❌</span>
     </span>
-    <span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
-      <span>✅</span>
-    </span>
+    <span class="task-done" data-task-done="today" title="Right-click to edit done date"><span>✅</span></span>
     <span class="task-block-link"><span>^dcf64c</span></span>
   </span>
 </li>
diff --git a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
index d5e95626..7333f8b2 100644
--- a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
+++ b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
@@ -94,10 +94,6 @@
         class="tasks-modal-date-input"
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="d" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         📅
         <i>no due date</i>
@@ -112,10 +108,6 @@
         class="tasks-modal-date-input"
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="s" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ⏳
         <i>no scheduled date</i>
@@ -131,10 +123,6 @@
         class="tasks-modal-date-input"
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="a" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         🛫
         <i>no start date</i>
@@ -233,10 +221,6 @@
         class="tasks-modal-date-input"
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="c" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ➕
         <i>no created date</i>
@@ -252,10 +236,6 @@
         class="tasks-modal-date-input"
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="x" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ✅
         <i>no done date</i>
@@ -271,10 +251,6 @@
         class="tasks-modal-date-input"
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="-" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ❌
         <i>no cancelled date</i>
diff --git a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
index 8c67004b..e35d282d 100644
--- a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
+++ b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
@@ -56,30 +56,18 @@
       </code>
       <label for="due">Due</label>
       <input id="due" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         📅
         <i>no due date</i>
       </code>
       <label for="scheduled">Scheduled</label>
       <input id="scheduled" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ⏳
         <i>no scheduled date</i>
       </code>
       <label for="start">Start</label>
       <input id="start" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         🛫
         <i>no start date</i>
@@ -153,30 +141,18 @@
       </select>
       <label for="created">Created</label>
       <input id="created" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ➕
         <i>no created date</i>
       </code>
       <label for="done">Done</label>
       <input id="done" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ✅
         <i>no done date</i>
       </code>
       <label for="cancelled">Cancelled</label>
       <input id="cancelled" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
-      <button
-        class="tasks-modal-calendar-button"
-        aria-label="Open date picker"
-        style="background: none; padding: 0px; cursor: pointer"></button>
       <code class="tasks-modal-parsed-date">
         ❌
         <i>no cancelled date</i>