Skip to content

fix(material/datepicker): display datepicker inside a dialog example #29404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 11, 2024
Merged

fix(material/datepicker): display datepicker inside a dialog example #29404

merged 1 commit into from
Jul 11, 2024

Conversation

GiftLanga
Copy link
Contributor

Adds an example that demonstrates how to display a datepicker inside a matDialog component.

Fixes #28186

@GiftLanga GiftLanga requested a review from a team as a code owner July 9, 2024 18:28
@GiftLanga GiftLanga requested review from crisbeto and andrewseguin and removed request for a team July 9, 2024 18:28
@Totati
Copy link
Contributor

Totati commented Jul 10, 2024

Maybe it would worth mentioning that the the open method accetps an injector, so it can use the providers of the opening component as well. 🙂

@GiftLanga GiftLanga force-pushed the calendar-dialog branch 2 times, most recently from c50c7cd to 69156c9 Compare July 10, 2024 07:58
crisbeto
crisbeto reviewed Jul 10, 2024
View reviewed changes
...ponents-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html Outdated
<h2 mat-dialog-title>Calendar in a Dialog</h2>
<mat-dialog-content align="center">
<div class="example-calendar-container">
<mat-calendar [(selected)]="data.selectedDate"></mat-calendar>
Copy link
Member

Choose a reason for hiding this comment

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

This is only showing a calendar inside the dialog, not a full datepicker. Should we rename the example?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I updated it to use the datepicker instead.

src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.css Outdated
@@ -0,0 +1,4 @@
.example-calendar-container {
Copy link
Member

Choose a reason for hiding this comment

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

Could you avoid these styles by passing the width/height into the dialog open call?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated

Totati
Totati reviewed Jul 10, 2024
View reviewed changes
src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts Outdated
MatButtonModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
FormsModule,

It's unnecessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated

Totati
Totati reviewed Jul 10, 2024
View reviewed changes
...ponents-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html Outdated
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onClear()">Clear</button>
Copy link
Contributor

Choose a reason for hiding this comment

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

I see that this example is based on the "Dialog Overview", however using mat-dialog-close should reduce the unrelated code even more.

Suggested change
<button mat-button (click)="onClear()">Clear</button>
<button mat-button mat-dialog-close>Clear</button>

This would eliminate the need for the onClear method.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, I updated it.

crisbeto
crisbeto approved these changes Jul 11, 2024
View reviewed changes
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

LGTM, but there's a lint warning that's failing the CI.

@GiftLanga
fix(material/datepicker): display datepicker inside a dialog example
13daaea 
Adds an example that demonstrates how to display a
datepicker inside a matDialog component.

Fixes angular#28186
@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release merge: fix commit message When the PR is merged, rewrites/fixups of the commit messages are needed labels Jul 11, 2024
@crisbeto crisbeto removed the request for review from andrewseguin July 11, 2024 09:08
@crisbeto crisbeto merged commit e57c6aa into angular:main Jul 11, 2024
26 of 28 checks passed
crisbeto pushed a commit that referenced this pull request Jul 11, 2024
@GiftLanga @crisbeto
docs(material/datepicker): display datepicker inside a dialog example (…
243f8e5 
…#29404)

Adds an example that demonstrates how to display a
datepicker inside a matDialog component.

(cherry picked from commit e57c6aa)
DBowen33 pushed a commit to DBowen33/components that referenced this pull request Jul 12, 2024
@GiftLanga @DBowen33
docs(material/datepicker): display datepicker inside a dialog example (…
f7964e4 
…angular#29404)

Adds an example that demonstrates how to display a
datepicker inside a matDialog component.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 12, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Totati Totati Totati left review comments

@crisbeto crisbeto crisbeto approved these changes

Assignees
No one assigned
Labels
action: merge The PR is ready for merge by the caretaker merge: fix commit message When the PR is merged, rewrites/fixups of the commit messages are needed target: patch This PR is targeted for the next patch release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

bug(angular material datepicker): datepicker throws an NullInjectorError: No provider for DateAdapter! that is not documented in any example
3 participants
@GiftLanga @Totati @crisbeto