How to use datepicker options for material datepicker

[siddheshpdy]

How to use date picker option for material date picker

Hello,
I want to use the following material date picker options:

1. dateChange
2. want to disable input field of date picker so that date picker will only be opened when a user clicks on the icon
3. change min and max date values - there are 2 date pickers to get date range.

Following is angular material date picker example that I want to generate using formly:

     <mat-form-field>
          <input matInput [(ngModel)]="configuration.parameters.fromDate"     
               [max]="getMaxDate(configuration.parameters.toDate,today)"
               [matDatepicker]="fromDate" placeholder="from Date" 
               (dateChange)="changeEvent('changeFromDate')" disabled>
          <mat-datepicker-toggle matSuffix [for]="fromDate"></mat-datepicker-toggle>
          <mat-datepicker #fromDate disabled="false"></mat-datepicker>
     </mat-form-field>
     <mat-form-field style="margin-left: 10px;">
          <input matInput [(ngModel)]="configuration.parameters.toDate" 
               [min]="getMinDate(configuration.parameters.fromDate)" [max]="today"
               [matDatepicker]="toDate" placeholder="to Date"                    
               (dateChange)="changeEvent('changeToDate')" disabled>
          <mat-datepicker-toggle matSuffix [for]="toDate"></mat-datepicker-toggle>
          <mat-datepicker #toDate disabled="false"></mat-datepicker>
     </mat-form-field>

I want to use highlighted options:

<input matInput [(ngModel)]="configuration.parameters.fromDate"
[max]="getMaxDate(configuration.parameters.toDate,today)"
[matDatepicker]="fromDate" placeholder="from Date"
(dateChange)="changeEvent('changeFromDate')" disabled>
<mat-datepicker-toggle matSuffix [for]="fromDate">
<mat-datepicker #fromDate disabled="false">

is there any way to use these parameters with formly?

[siddheshpdy]

@aitboudad I have created my custom type for date picker and used it in JSON, it is working fine.

I can get the date-change event in JSON and invoke the function for it (currently, the schema is in TS file but have to move it to JSON file). now the issues are:

1. that how to write that function call into JSON file.
2. how to assign variables value to maxDate when the variable is in TS file and ref is in JSON file

{
          key: 'dateOn',
          id: 'dateOn',
          type: 'date',
          templateOptions: {
                    label: 'on Date',
                    placeholder: 'on Date',
                    dateChange: ($event) =>this.changeEvent($event),
                    changeEventName:"changeOnDate",
                    maxDate : this.today
          },
 },

[aitboudad]

1. that how to write that function call into JSON file.

#1819 (comment)

2. how to assign variables value to maxDate when the variable is in TS file and ref is in JSON file

use formState

[aitboudad]

added dateInput and dateChange option in v5.6.0 release.

[shinde-prasad]

@aitboudad I am using mat-datepicker with custom header. Where I want to use (click) method events on next and previous button click. So that I want to get which is current month in the view when I click next and previous navigation. So how can I get that method response in json as a custom method in templateOptions:{}.