How to set show some string in mat-datepicker input but in backend it is only the date that is sending

user_19828137 0
Viewed 64

enter image description hereHere is my code - I have a date input along with one Permanent button(having multiple rows added so it should index specific), Scenerio is I click on Permanent button, it should show as Permanent in input UI(nativeElements value) but the value that is sending to backend is 10yrs later date. Here is my piece of code

<ng-container matColumnDef="endsOn">
<mat-header-cell class="m-1" style="max-width: 15%;" *matHeaderCellDef>
    Ends On
</mat-header-cell>
<mat-cell class="m-1" *matCellDef="let element; let i=index">
    <mat-form-field appearance="outline">
        <input #dateInput placeholder="Select Date" matInput [matDatepicker]="picker" [value]="" [formControl]="element.get('END_TIME')" [min]="element.get('START_TIME').value" [max]="moment(element.get('START_TIME').value).add(10,'years').toDate()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker>
            <mat-datepicker-actions>
                <div class="datepicker-footer" #datepickerFooter>
                    <div class="slider-date__button mt-3">
                        <a mat-button="" style="background-color: #0062cc !important;" class="mat-focus-indicator btn btn-primary d-block w-100 text-white mat-flat-button mat-button-base" tabindex="0" aria-disabled="false" (click)="isPermanentClicked(moment(element.get('START_TIME').value).add(10,'years').toDate(), i)"><span class="mat-button-wrapper">Make Permanent</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a>
                    </div>
                </div>
                <!-- <button mat-button="" style="background-color: #0062cc !important;" class="mat-focus-indicator btn btn-primary d-block w-100 text-white mat-flat-button mat-button-base" tabindex="0" aria-disabled="false" (click)="isPermanentClicked(moment(element.get('START_TIME').value).add(10,'years').toDate(), i)"><span class="mat-button-wrapper">Make Permanent</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></button> -->

            </mat-datepicker-actions>
        </mat-datepicker>

    </mat-form-field>
</mat-cell>
</ng-container>

TS -

  isPermanentClicked(permanent , index){
    console.log(index);
    this.dataSource[index].controls['PERMANENT'] = true;
    this.dataSource[index].controls['END_TIME'].setValue(permanent);
    this.dateInput.nativeElement.value = "Permanent"; // only setting for 1st element, I need it to be index specific
    console.log(this.dateInput.nativeElement.value , this.dataSource[index].controls['END_TIME'] );
    this.datepicker.close(); // this is just closing for 1st element and not for others i'e not reachable
 }

Description in 2nd row native element value is not setting to permanent.

angular-material angular typescript javascript
1 Answers

You need to take viewChildren since there are multiple date inputs, then use the same index and perform the actions.

export TestComponent implements OnInit {
// define the viewchildren like so
@ViewChildren('dateInput') dateInputs: QueryList<any>;
@ViewChildren('picker') datePickers: QueryList<any>;

isPermanentClicked(permanent , index, dateInput: any, datePicker: any){
    console.log(index);
    this.dataSource[index].controls['PERMANENT'] = true;
    this.dataSource[index].controls['END_TIME'].setValue(permanent);
    this.dateInput.value = "Permanent"; // only setting for 1st element, I need it to be index specific
    console.log(this.dateInput.value, this.dataSource[index].controls['END_TIME'] );
    this.datePicker.close(); // this is just closing for 1st element and not for others i'e not reachable
 }
}

html

<ng-container matColumnDef="endsOn">
<mat-header-cell class="m-1" style="max-width: 15%;" *matHeaderCellDef>
    Ends On
</mat-header-cell>
<mat-cell class="m-1" *matCellDef="let element; let i=index">
    <mat-form-field appearance="outline">
        <input #dateInput placeholder="Select Date" matInput [matDatepicker]="picker" [value]="" [formControl]="element.get('END_TIME')" [min]="element.get('START_TIME').value" [max]="moment(element.get('START_TIME').value).add(10,'years').toDate()">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker>
            <mat-datepicker-actions>
                <div class="datepicker-footer" #datepickerFooter>
                    <div class="slider-date__button mt-3">
                        <a mat-button="" style="background-color: #0062cc !important;" class="mat-focus-indicator btn btn-primary d-block w-100 text-white mat-flat-button mat-button-base" tabindex="0" aria-disabled="false" (click)="isPermanentClicked(moment(element.get('START_TIME').value).add(10,'years').toDate(), i, dateInput, picker)"><span class="mat-button-wrapper">Make Permanent</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a>
                    </div>
                </div>
            </mat-datepicker-actions>
        </mat-datepicker>

    </mat-form-field>
</mat-cell>
</ng-container>
user_59245620
Related