Skip to content

feat(datetime): formatOptions for time button and header - #29009

Merged
mapsandapps merged 22 commits into
format-optionsfrom
FW-5280
Feb 15, 2024
Merged

feat(datetime): formatOptions for time button and header#29009
mapsandapps merged 22 commits into
format-optionsfrom
FW-5280

Conversation

@mapsandapps

@mapsandapps mapsandapps commented Feb 9, 2024

Copy link
Copy Markdown
Contributor

Issue number: Internal


What is the current behavior?

The Datetime header and time button have default date formatting that cannot be set by the developer.

What is the new behavior?

  • The developer can customize the date and time formatting for the Datetime header and time button
  • A warning will appear in the console if they try to provide a time zone (the time zone will not get used)

Does this introduce a breaking change?

  • Yes
  • No

@github-actions github-actions Bot added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package labels Feb 9, 2024
@mapsandapps
mapsandapps marked this pull request as ready for review February 9, 2024 20:57
/**
* Formatting options, separated by date and time.
*/
@Prop() formatOptions?: DatetimeFormatOptions;

@averyrousseau averyrousseau Feb 12, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Optional: It would be cool to have a test HTML page to mess around with this ready to go. Maybe something with a text box that lets you enter a value for formatOptions dynamically, and a button to update the datetime with what you've entered? Definitely only do this if you have spare time though.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great to also improve the JSDoc comment here. This is the information that will show in the docs and intellisense.

Would be good to include what format it requires and maybe a link out to MDN for those rules.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i improved the comment

Comment thread core/src/components/datetime/datetime.tsx Outdated
Comment thread core/src/components/datetime/test/basic/datetime.e2e.ts Outdated
Comment thread core/src/components/datetime/test/basic/datetime.e2e.ts Outdated
Comment thread core/src/components/datetime/datetime.tsx Outdated
Comment thread core/src/components/datetime/test/basic/datetime.e2e.ts
Comment thread core/src/components/datetime/utils/format.ts Outdated
Comment thread core/src/components/datetime/utils/format.ts Outdated
/**
* Formatting options, separated by date and time.
*/
@Prop() formatOptions?: DatetimeFormatOptions;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great to also improve the JSDoc comment here. This is the information that will show in the docs and intellisense.

Would be good to include what format it requires and maybe a link out to MDN for those rules.

@liamdebeasi liamdebeasi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still looking into the type error we discussed on Slack

Comment thread core/src/components/datetime/datetime.tsx Outdated
Comment thread core/src/components/datetime/datetime.tsx Outdated
Comment thread core/src/components/datetime/datetime.tsx Outdated
Comment thread core/src/components/datetime/test/basic/datetime.e2e.ts Outdated
Comment thread core/src/components/datetime/test/basic/datetime.e2e.ts Outdated
Comment thread core/src/components/datetime/test/basic/datetime.e2e.ts Outdated

@averyrousseau averyrousseau left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work on this!

@liamdebeasi

liamdebeasi commented Feb 14, 2024

Copy link
Copy Markdown
Contributor

Can we point this towards a feature branch instead of main? Might need to create a feature-7.8 branch off main.

Also, it might be worth merging this into a branch and have that branch get merged into feature-7.8 too. That way only 1 feature entry shows up in the changelog.

@mapsandapps
mapsandapps changed the base branch from main to format-options February 14, 2024 17:03

@liamdebeasi liamdebeasi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Functionality is mostly good. I had one questions on some of the validation, and then a few suggestions for code cleanup.

Comment thread core/src/components/datetime/datetime.tsx Outdated
Comment thread core/src/components/datetime/datetime.tsx
Comment thread core/src/components/datetime/datetime.tsx Outdated
Comment thread core/src/components/datetime/utils/format.ts
Comment thread core/src/components/datetime/utils/format.ts Outdated
Comment thread core/src/components/datetime/datetime.tsx Outdated

@liamdebeasi liamdebeasi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implementation works well, just one question for my understanding.

printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`);
}
break;
case 'time':

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mainly for my understanding: This is still needed for the upcoming ion-datetime-button integration right? For presentation="time" there's nothing in the datetime UI that would need formatOptions:
image

However, this would be needed for the time display in datetime button. Am I understanding correctly?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's correct!

@mapsandapps
mapsandapps merged commit 7ac08bc into format-options Feb 15, 2024
@mapsandapps
mapsandapps deleted the FW-5280 branch February 15, 2024 14:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: angular @ionic/angular package package: core @ionic/core package package: vue @ionic/vue package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants