Skip to content
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.

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

Support for actions #163

Open
suryacyg opened this issue Dec 7, 2021 · 6 comments · May be fixed by #436
Open

Support for actions #163

suryacyg opened this issue Dec 7, 2021 · 6 comments · May be fixed by #436

Comments

@suryacyg
Copy link

suryacyg commented Dec 7, 2021

Is there any support for actions?

I was looking to add actions to date picker so that user can just change the date instead of selecting hour/minutes.

Does this control support mat-datepikcer-actions? (In below link please look for picker with actions)
Ref: https://material.angular.io/components/datepicker/examples

I see this PR is closed and I was looking for exactly this feature - #13

@bbortt
Copy link
Collaborator

bbortt commented Dec 27, 2021

did you look at the sample application? I think the "Date" input is what you're looking for, no?

  <mat-form-field>
    <mat-placeholder>Date</mat-placeholder>
    <mat-datetimepicker-toggle
      [for]="datePicker"
      matSuffix
    ></mat-datetimepicker-toggle>
    <mat-datetimepicker
      #datePicker
      openOnFocus="true"
      type="date"
    ></mat-datetimepicker>
    <input
      [matDatetimepicker]="datePicker"
      formControlName="date"
      matInput
      required
    />
    <mat-error *ngIf="group.get('date').errors?.required">required</mat-error>
  </mat-form-field>

@suryacyg
Copy link
Author

@bbortt I am looking a way to add actions to the popup so that user updates any one of the date parts and chooses to close the popup.

I want something like below which should work with datetime: mat-date-range-picker-actions

<mat-form-field appearance="fill" class="example-form-field">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="rangePicker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>
  <mat-date-range-picker #rangePicker>
    <mat-date-range-picker-actions>
      <button mat-button matDateRangePickerCancel>Cancel</button>
      <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
    </mat-date-range-picker-actions>
  </mat-date-range-picker>
</mat-form-field>

@bbortt
Copy link
Collaborator

bbortt commented Dec 27, 2021

I see, its about the actions, not the date picker. let me see what I can do.. but will probably take a while.

@bbortt
Copy link
Collaborator

bbortt commented Jan 11, 2022

I've started it here, also based on the original work in #13 - but trying to make it optional. not yet finished, tho!

bbortt added a commit that referenced this issue Mar 13, 2023
@bbortt
Copy link
Collaborator

bbortt commented Mar 13, 2023

It's been a year and I finally found some time to dig into this. the change goes a bit deeper as first suspected. I've the buttons available, but there is no "intermediate value" from the <input/> available. therefore, a click on "confirm" will have no impact whatsoever. I'll have to change that in the calendar itself as well.

image

bbortt added a commit that referenced this issue Mar 15, 2023
@bbortt bbortt linked a pull request Mar 15, 2023 that will close this issue
bbortt added a commit that referenced this issue Mar 15, 2023
as requested in issue #163. the datetime-picker does still close itself
if you reach "the end of the selection". e.g. when selecting the minutes
in the minutes-view. this is in contrary to the original material date
picker, but in my personal opinion more useful. I think it should be
possible to customize this behaviour too (via property).
bbortt added a commit that referenced this issue Mar 15, 2023
add an action button sample to the application.
also document its usage in `README.md`.
@bbortt bbortt added documentation open pr and removed wip Work in progress... labels Mar 15, 2023
@bbortt
Copy link
Collaborator

bbortt commented Mar 15, 2023

@suryacyg I don't know if you're still using this library, but may I ask you to review #436?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants