kuhnroyal / mat-datetimepicker

Material datetimepicker for @angular/material
MIT License
153 stars 84 forks source link

Support for actions #163

Open suryacyg opened 2 years ago

suryacyg commented 2 years ago

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

bbortt commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

bbortt commented 2 years ago

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

bbortt commented 1 year ago

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 commented 1 year ago

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