Repository navigation
docs(datetime): add range selection playgrounds - #4824
OS-susmitabhowmik wants to merge 10 commits into
Conversation
…electionMode Add range and range styling playgrounds with presentation="date" selection-mode="range". Update multiple date selection to use the new selectionMode="multiple" property instead of the deprecated multiple prop.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Use passive voice and "Clicking" to match surrounding sections. Clarify that the range is the value (not "returned") and document disabled-date behavior.
…ules Border-radius rules break in RTL and the framework already handles start/end circles. The range-track pseudo-element is internal and should not be documented.
ShaneK
left a comment
ShaneK
left a comment
There was a problem hiding this comment.
Looks really good so far! Just a couple of things on how range selection behaves.
|
|
||
| ## Range Selection {/* #range-selection */} | ||
|
|
||
| If the `selectionMode` property is set to `"range"`, a range of dates can be selected from the calendar picker. Clicking a date sets the start of the range, and clicking another date sets the end. The `value` is an array of two ISO 8601 strings, `[start, end]`. A range can't include a disabled date, so clicking a date past one starts a new range instead. |
There was a problem hiding this comment.
I think this only holds for the first two clicks in order. Clicking a date before the start begins a new range, even on the second click, so the 15th then the 10th gives Jun 10 - End date. Once the range is complete, clicking inside or after it moves the end, so Jun 10 - 20 becomes Jun 10 - 25 after clicking the 25th. Could we cover those two cases? Otherwise most people would expect a third click to start over.
| ## Multiple Date Selection {/* #multiple-date-selection */} | ||
|
|
||
| If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. | ||
| If the `selectionMode` property is set to `"multiple"`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it. |
There was a problem hiding this comment.
Could we add a short note here that multiple is deprecated in favor of selectionMode="multiple"? It logs a warning in the framework, but someone already using multiple="true" wouldn't know to switch from this section alone. Up to you!
| ## Range Selection {/* #range-selection */} | ||
|
|
||
| If the `selectionMode` property is set to `"range"`, a range of dates can be selected from the calendar picker. Clicking a date sets the start of the range, and clicking another date sets the end. The `value` is an array of two ISO 8601 strings, `[start, end]`. A range can't include a disabled date, so clicking a date past one starts a new range instead. | ||
|
|
There was a problem hiding this comment.
Could we mention that value and ionChange don't update until both dates are picked? With showDefaultButtons the confirm button also stays disabled until then. I think that's the first thing someone listening for ionChange would trip over. Also, value accepts [start] as a partial range, which matches the framework's value doc, so "an array of two ISO 8601 strings" is a bit narrower than what it supports.
…ection Clarify range selection click behavior (before-start resets, after- complete moves end), note that value/ionChange update only after both dates are picked, accept partial [start] value, and add multiple property deprecation note.
Description
This PR adds the playgrounds for the
ion-datetimerange selection work done in ionic-team/ionic-framework#31581.The following changes were added:
selectionMode="range"feature onion-datetime, including basic usage and styling examples across all frameworks (JavaScript, Angular, React, Vue)selectionMode="multiple"instead of the deprecatedmultipleboolean prop--range-background,range-start,range-endCSS shadow partsTesting
9.0.11-dev.11793736984.1580a194from https://github.com/ionic-team/ionic-framework/actions/runs/41710956887npm startand verify the Range Selection playground renders correctly on the datetime docs pageselectionMode="multiple"