Add Multi-Value Date/DateTime Prop Support (UI)
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3576166. -->
Reported by: [vipin.mittal18](https://www.drupal.org/user/319716)
Related to !661
>>>
<h3>Summary</h3>
<p>This ticket introduces UI support for multi value <strong>Date</strong> and <strong>DateTime</strong> prop types in the Canvas component editor.</p>
<h3>IN Scope</h3>
<ul>
<li><strong>UI only</strong> — This ticket focuses only on front-end behavior and interactions.</li>
<li>No backend schema or storage changes are included in this ticket.</li>
</ul>
<p><strong>OUT OF SCOPE</strong><br>
Saving or persisting prop configuration will be handled at <a href="https://www.drupal.org/project/canvas/issues/3572553">https://www.drupal.org/project/canvas/issues/3572553</a><br>
Multi-value required field validation will be handled in <a href="https://www.drupal.org/project/canvas/issues/3576124">https://www.drupal.org/project/canvas/issues/3576124</a></p>
<h3>Approach</h3>
<h4>1. List Display & “Add new” Button</h4>
<ul>
<li>Example values render as a list.</li>
<li>When multi-value is enabled and below the max limit, show a <strong>“+ Add new”</strong> button.</li>
<li>If the number of values equals the defined limit:
<ul>
<li>The <strong>“+ Add new”</strong> button will not visible.</li>
</ul>
</li>
<li>If unlimited values are selected:
<ul>
<li>The <strong>“+ Add new”</strong> button remains enabled at all times.</li>
</ul>
</li>
</ul>
<h4>2. Editing & Data Sync</h4>
<ul>
<li>Clicking a list item opens an edit panel to modify the selected date or datetime.</li>
<li><del>Changes update both the UI list and the underlying data model.</del></li>
<li>Cancelling editing does not apply changes.</li>
</ul>
<h4>3. Item Removal Logic</h4>
<ul>
<li>Each list item includes a remove control.</li>
<li>If a maximum limit or required constraint exists, ensure the last required value cannot be removed.</li>
<li>Removing an item updates both UI <del>and data model</del>.</li>
</ul>
<h4>4. Drag-and-Drop Reordering</h4>
<ul>
<li>Users can reorder example values via drag-and-drop.</li>
<li><del>The underlying data model updates immediately after reordering.</del></li>
<li><del>Order persists on refresh.</del></li>
</ul>
<p><img src="https://www.drupal.org/files/issues/2026-02-27/date%20and%20datetime%20multi%20value%20prop%20type.png" alt="date and datetime multi value prop type" width="300"></p>
issue