How to change date format in date filter?

In my Angular frontend I am using agDateColumnFilter for Date filter. When I change the user locale my code logic translates the column value in respective locale's date format, but the date format of Date picker is always dd-mm-yyyy, Like in Canadian French the date format is yyyy-mm-dd but the filter shows selected date in dd-mm-yyyy.

How can i configure the locale's date format in date picker code -

private logsColDef(): ColDef[] {
        return [
            {
               headerName: this.translate.instant('loguploadtime_name_label'),
               field: 'uploadTime',
               colId: 'uploadTime',
               type: ['Date', 'DateISO'],
               tooltipField: '',
               filter: 'agDateColumnFilter',
            },

I tried to looking for way to change date format of Date picker but found that it uses date format as per browser's locale. When i changes the language of browser then i do see changes in date format of date picker,

But i expect that without changing browser's language, the date picker should use the date format which i provide from the user's locale policy. How can i fix this?

As you have already figured out Ag grid will use the browser-provided date pickers for Date selection in the date filters. So with this default date picker it is not possible to set the input date format that is uniform across all the browsers and devices.

So the only solution is to use a custom date selection component. You can use any JS/Angular date pickers which provide the option to customize the input date format. The advantage is you will have the same UI interface in all the browsers and devices.

  ...
  components: {
    [p: string]: any;
  } = {
    agDateInput: CustomDateComponent,
  };
  ...

Checkout this CodeSandbox demo. In this demo Flatpickr is used as the custom date picker and I've implemented a function to get the users local date format which is set as the input format for the Flatpickr.