mat-datetimepicker icon indicating copy to clipboard operation
mat-datetimepicker copied to clipboard

Support for actions

Open suryacyg opened this issue 3 years ago • 6 comments
trafficstars

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 - https://github.com/kuhnroyal/mat-datetimepicker/pull/13

suryacyg avatar Dec 07 '21 06:12 suryacyg

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>

bbortt avatar Dec 27 '21 10:12 bbortt

@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>

suryacyg avatar Dec 27 '21 10:12 suryacyg

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

bbortt avatar Dec 27 '21 11:12 bbortt

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

bbortt avatar Jan 11 '22 15:01 bbortt

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 avatar Mar 13 '23 21:03 bbortt

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

bbortt avatar Mar 15 '23 17:03 bbortt