Commit Graph

64 Commits

Author SHA1 Message Date
Sean Perkins
e886e3ff2f fix(datetime): prefer wheel sets working value on confirmation (#28520)
Issue number: resolves #25839

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Confirming the working day when a datetime using a wheel picker without
an initial value will result in a value of `undefined` instead of the
displayed working day the user sees.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `preferWheel` uses the working value on confirmation

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.5.7-dev.11701896424.13d40ac9`

Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>
2023-12-08 19:34:49 +00:00
Liam DeBeasi
597bc3f085 feat(datetime): add support for h11 and h24 hour formats (#28219)
Issue number: resolves #23750

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Datetime does not support h11 and h24 hour formats

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Datetime supports h11 and h24 formats

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Implementation Notes:

1. I broke up the `is24Hour` function into two functions:
- The first function, `is24Hour`, accepts an hour cycle and returns true
if the hourCycle preference uses a 24 hour format
- The second function, getHourCycle, accepts a locale and an optional
hour cycle and returns the computed hour cycle. I found that the hour
cycle is not always set via `hourCycle` (such as when we are using the
system default if it's specified in the `locale` prop using locale
extension tags). This was coupled to is24Hour, but I needed this
functionality elsewhere to add support for this feature, so I decided to
break the functions up.
2. We were using the hour cycle types in several places, so I decided to
create a shared `DatetimeHourCycle` to avoid accidental typos.
2023-09-28 11:40:46 -04:00
Liam DeBeasi
d0d9e35c37 refactor: remove extra typescript dependency (#28220) 2023-09-26 09:01:53 -04:00
Liam DeBeasi
b655067867 chore: sync with main 2023-08-29 09:58:37 -04:00
Liam DeBeasi
01fc9b4511 fix(datetime): gracefully handle invalid min/max (#28054)
Issue number: resolves #28041

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`parseDate` returns `undefined` when given an invalid value. However,
our min/max processing functions did not account for this. As a result,
we would attempt to destructure an undefined value which resulted in an
error.

Note regarding linked issue: The developer is calling
`setMin(undefined)`. However, this is triggering a React quirk with
Custom Elements where `undefined` is being set to `null` inside of
React. The type signature on min/max is `string | undefined`, so `null`
is being treated as an invalid date value.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Min/Max processing functions now return `undefined` if the input was
invalid.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.3.2-dev.11692887667.1614d10a`
2023-08-28 13:39:19 +00:00
Amanda Johnston
32244fbdd1 fix(datetime): scroll to newly selected date when value changes (#27806)
Issue number: Resolves #26391

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When updating the `value` programmatically on an `ion-datetime` after it
has already been created:
- With grid style: The selected date visually updates, but the calendar
does not scroll to the newly selected month.
- With wheel style: The selected date does not visually update, i.e. the
wheels do not move to show the newly selected date.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Grid style datetimes now scroll to the selected date using the same
animation as when clicking the next/prev month buttons.
- This animation mirrors the behavior in both MUI and native iOS. See
the [design
doc](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/datetime/0003-datetime-async-value.md)
for more information and screen recordings.
- The animation will not occur if the month/year did not change, or when
the datetime is hidden.
- Wheel style datetimes now visually update to the selected date. No
animation occurs, also mirroring native.
- The `parseDate` util has also had its type signatures updated to
account for returning `undefined` when the date string is improperly
formatted. This was missed when the util was refactored to support
multiple date selection.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

- Docs PR: https://github.com/ionic-team/ionic-docs/pull/3053
- While this can technically be considered a bug fix, we are merging it
into a feature branch for safety; it's a fairly significant change to
how datetime behaves, and may interfere with custom logic when updating
a datetime's value async.
- Jumping to the newly selected value is handled by replacing everything
[here](https://github.com/ionic-team/ionic-framework/pull/27806/files#diff-4a407530c60e3cf72bcc11acdd21c4803a94bf47ea81b99e757db1c93d2735b8L364-L407)
with `processValue()`. This covers both wheel and grid datetimes.
- `activePartsClone` as a whole was also removed. It was added in
https://github.com/ionic-team/ionic-framework/pull/24244 to enable
changing `activeParts` without triggering a rerender (and thus jumping
to the new value) but since we now want to do that jump, the clone is no
longer needed.
- The animation code might be tricky to follow, so I recorded going
through it:
https://github.com/ionic-team/ionic-framework/assets/90629384/1afa5762-f493-441a-b662-f0429f2d86a7
2023-08-23 13:49:19 -05:00
Liam DeBeasi
bd1910ba69 fix(datetime-button): render correct text when passing partial date values (#27816)
Issue number: resolves #27797

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Datetime Button passes a parsed value to one of the many text formatting
utilities we have, such as `getMonthAndYear`. However, developers can
pass partial date values such as `2022` or `2022-04` (April 2022).
According to
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format,
these are still valid date strings.

However, the `parseDate` utility does not add fallback values. So
passing `2022` will cause the `day` and `month` fields to be
`undefined`. This means that `getNormalizedDate` passes `'//2022'` to
the `Date` constructor.

Some browsers, such as Chrome, will automatically account for the stray
slashes and still return a valid date. Other browsers, such as Safari,
do not do this and will either return "Invalid Date" or throw an error.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Date normalizing utility now has fallback values so we always pass in
a valid date. In the example above, `getNormalizedDate` will now pass
`'1/1/2022'` instead of `'//2022'` to the `Date` constructor.
- Refactored other utils that use `new Date` to make use of
`getNormalizedDate` since they are also impacted.

Note: I added an E2E test instead of a spec test because I want to test
cross-browser behavior to ensure consistency.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-08-01 15:44:05 +00:00
Shawn Taylor
209880622a fix(datetime): ascending order for years (#27551)
resolves #27422

Co-authored-by: Jón Prüßmeier <jon-pruessmeier@users.noreply.github.com>

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Years in the date picker are displayed in descending order.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Years in the date picker are displayed in ascending order
- This matches the native behavior

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
This is not a breaking change, but it may be unexpected and also may
cause users' visual diff tests to fail. As such, we'll target this to
7.1

## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The updated snapshots show the change

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-05-26 13:12:41 -04:00
Sean Perkins
10d2c75f8d Merge remote-tracking branch 'origin/main' into chore/sync-with-main-5-3 2023-05-03 13:38:03 -04:00
Amanda Johnston
0385c0862c fix(datetime): clamp date between min and max when using month picker (#27185)
<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When using the dropdown month picker, the value is updated when the
month is changed, to follow native behavior. However, because only the
month is updated (the day remains the same), it's possible for the newly
chosen date to fall outside the min/max bounds of the datetime.

For example, if you have a datetime with `min="2021-01-15"
value="2021-02-01"`, then use the month picker to switch to January, the
new value will be `2021-01-01` which is earlier than the `min`.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: Resolves #27027


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

When updating the `activeParts` in any scenario, the date to set is now
clamped between the max and min.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-04-18 17:31:47 +00:00
Maria Hutt
0a0345a84a refactor(many): use utils import (#27160) 2023-04-12 13:25:14 -07:00
Liam DeBeasi
77b9e11c2b chore(): sync with main 2023-03-08 09:35:37 -05:00
Liam DeBeasi
48c45afdb6 fix(datetime): resolve import error in stencil apps (#26909)
resolves #26908
2023-03-06 12:04:07 -05:00
Liam DeBeasi
3f888c0928 chore(): sync with main 2023-03-03 12:00:21 -05:00
Liam DeBeasi
f54fc18884 fix(datetime-button): time-only values are parsed (#26852)
resolves #26851
2023-03-02 09:09:01 -05:00
Liam DeBeasi
708ccbf808 chore(): sync with main 2023-03-01 11:22:56 -05:00
Amanda Johnston
2a761afd5a feat(datetime): add ability to specify custom colors for specific dates (#26775) 2023-02-22 09:01:33 -06:00
Liam DeBeasi
b470a307e3 chore(): sync with main 2022-11-08 13:13:46 -05:00
Sean Perkins
526e4113d8 fix(datetime): min/max correctly display available day periods (#26241)
Resolves #26216
2022-11-07 23:09:50 -05:00
Liam DeBeasi
1d0e76d9ef chore(): sync with main 2022-11-01 10:31:18 -04:00
Liam DeBeasi
3fb4caf21f fix(datetime): do not report timezone in ionChange (#26183)
resolves #25577

BREAKING CHANGE:

Datetime no longer incorrectly reports the time zone when `value` is updated. Datetime does not manage time zones, so any time zone information provided is ignored.
2022-10-31 15:03:14 -04:00
Liam DeBeasi
3745083b7c fix(datetime): account for allowed values when setting default date (#26093)
resolves #24722
2022-10-26 10:54:26 -04:00
Liam DeBeasi
0548fe8588 fix(datetime): values are adjusted to be in bounds (#26125)
resolves #25894, resolves #25708
2022-10-17 14:19:02 -04:00
Liam DeBeasi
0aee328b4b fix(datetime): setting date async updates calendar grid (#26070)
resolves #25776
2022-10-10 12:59:05 -04:00
Sean Perkins
413ab3a1f0 Merge branch 'main' into chore/sync-with-main-09-23-22 2022-09-23 11:27:02 -04:00
Sean Perkins
a576b178ef Merge remote-tracking branch 'origin/main' into chore/sync-with-main-09-23-22 2022-09-23 11:19:03 -04:00
Liam DeBeasi
11f44e94f4 fix(datetime): switching month and year accounts for day (#25996)
resolves #25585
2022-09-23 09:31:39 -04:00
Liam DeBeasi
55ebd6cdf3 fix(datetime): account for 12AM with min times and 12 hour format (#25952)
resolves #25183
2022-09-19 11:51:09 -04:00
Liam DeBeasi
73a742bf5b chore(lint): resolve new lint errors 2022-09-19 15:08:28 +00:00
Liam DeBeasi
c0f287e525 chore(): sync with main 2022-09-16 15:24:24 -04:00
Liam DeBeasi
fb653ebe67 fix(datetime): correct year is set in wheel picker (#25896)
resolves #25895
2022-09-09 15:08:27 -04:00
Liam DeBeasi
1a1491df02 fix(datetime): hourCycle formats hour correctly (#25869)
resolves #25862
2022-09-06 10:24:50 -04:00
Liam DeBeasi
cbd1268a03 fix(datetime): calendar day and years are now localized (#25847)
resolves #25843
2022-09-01 12:54:10 -04:00
Liam DeBeasi
85af6ce436 fix(datetime): only log out of bounds warning if value set (#25835)
resolves #25833
2022-08-30 16:17:29 -04:00
Amanda Johnston
ae6aa0cb8e chore(eslint): add strict-boolean-expressions rule (#25768) 2022-08-23 11:50:02 -05:00
Liam DeBeasi
dee0f513ee fix(datetime): preferWheel respects column ordering by locale (#25726)
resolves #25722
2022-08-08 14:47:39 -04:00
Sean Perkins
11c69c8df5 fix(datetime): display time in user's timezone after selection (#25694)
Resolves #25693
2022-08-01 16:22:56 -04:00
Liam DeBeasi
499733105e feat(datetime-button): add button for displaying datetime in overlays (#25655)
resolves #24316
2022-07-27 09:47:02 -04:00
Amanda Johnston
9d31608f2d feat(datetime): add multiple date selection (#25514) 2022-07-20 13:44:30 -05:00
Liam DeBeasi
3a7f5f166e fix(datetime): account for previous years with preferWheel (#25656) 2022-07-19 16:41:27 -04:00
Liam DeBeasi
634f6e5f5b Merge remote-tracking branch 'origin/main' into sync-main-6.2-a 2022-07-12 15:49:10 -04:00
Sean Perkins
7b10fa6476 fix(datetime): datetime works within stencil apps (#25592)
Resolves #25591
2022-07-08 10:31:17 -04:00
Liam DeBeasi
f1f862dcc1 chore(): sync with main 2022-06-27 09:54:57 -04:00
Amanda Johnston
5dfaf63c65 fix(datetime): add dev warnings when setting out of bounds value (#25513) 2022-06-22 13:38:32 -05:00
Liam DeBeasi
3d19771185 feat(datetime): add wheel style picker for dates and times (#25468) 2022-06-14 16:35:47 -04:00
Sean Perkins
6bc0acc427 feat(datetime): localize am/pm labels in time picker (#25389)
Resolves #16279
2022-06-14 14:14:49 -04:00
Sean Perkins
866d4528ad fix(datetime): ensure that default month shown is always in bounds (#25351)
Resolves #25320
2022-06-02 22:27:25 -04:00
Sean Perkins
6946e09815 fix(datetime): arrow navigation respects min/max values (#25182)
Resolves #25073
2022-05-02 13:01:25 -04:00
Liam DeBeasi
46cd483aa1 chore(datetime): simpler way of doing timezone offsets (#25132) 2022-04-15 09:42:27 -04:00
Liam DeBeasi
96b2003b2b fix(datetime): account for 30 and 45 minute timezones when getting current date (#25120)
resolves #25112
2022-04-14 13:09:11 -04:00