Custom Power BI visual (date picker slicer) not work with SELECTEDVALUE()

Thank you for answering me. I sincerely appreciate it. I developed the visual as a calendar picker to work with power query M parameter. It worked well with M parameter. Here is the code:

export class Visual implements IVisual {
    private target: HTMLElement;
    private host: IVisualHost;

    private selectionManager: ISelectionManager;

    private formattingSettingsService: FormattingSettingsService;
    private formattingSettings: VisualFormattingSettingsModel;

    private inputContainer: HTMLDivElement;
    private dateInput: HTMLInputElement;
    private currentDataView: DataView | null; // 用于存储最新的数据视图

    private dataPoint: Map<string, ISelectionId> = new Map();

    constructor(options: VisualConstructorOptions) {
        this.target = options.element;
        this.host = options.host;
        this.formattingSettingsService = new FormattingSettingsService();
        this.selectionManager = this.host.createSelectionManager();

        // Clear existing content
        this.target.innerHTML = '';

        // 创建UI元素 (输入框和图标)
        this.createUIElements();


    }

    private createUIElements(): void {
        const label = document.createElement('div');
        label.className = 'date-label';
        label.textContent = '日期';
        label.style.fontWeight = 'bold';
        label.style.marginBottom = '5px';
        this.target.appendChild(label);

        this.inputContainer = document.createElement('div');
        this.inputContainer.className = 'input-container';
        this.inputContainer.style.display = 'flex';
        this.inputContainer.style.alignItems = 'center';
        this.inputContainer.style.border = '1px solid #ccc';
        this.inputContainer.style.borderRadius = '4px';
        this.inputContainer.style.padding = '4px 8px';
        this.inputContainer.style.backgroundColor = 'white';
        this.target.appendChild(this.inputContainer);

        this.dateInput = document.createElement('input');
        this.dateInput.type = 'text';
        this.dateInput.readOnly = true;
        this.dateInput.placeholder = 'YYYY-MM-DD';
        this.dateInput.style.border = 'none';
        this.dateInput.style.outline = 'none';
        this.dateInput.style.width = '100%';
        this.dateInput.style.fontSize = '14px';
        this.inputContainer.appendChild(this.dateInput);

        const dateIcon = document.createElement('div');
        dateIcon.innerHTML = '📅';
        dateIcon.style.cursor = 'pointer';
        dateIcon.style.marginLeft = '4px';
        dateIcon.addEventListener('click', (event) => {
            event.stopPropagation();
            this.openCalendarDialog(); // 调用打开对话框的方法
        });
        this.inputContainer.appendChild(dateIcon);
    }

    private applyDateFilter(date: string): void {
        if (!this.host || !this.host.applyJsonFilter) return;
    
        // 获取或确定要筛选的表和列
        let tableName: string | undefined;
        let columnName: string | undefined;
        
        if (this.currentDataView?.metadata?.columns) {
            const dateColumn = this.currentDataView.metadata.columns.find(col => col.roles && col.roles['Date']);
            if (dateColumn?.queryName) {
                [tableName, columnName] = dateColumn.queryName.split('.');
            }
        }
    
        if (!tableName || !columnName) return;
        
        const filter = {
            $schema: "https://powerbi.com/product/schema#basic",
            target: {
                table: tableName,
                column: columnName
            },
            filterType: models.FilterType.Basic,
           operator: "In",
            values: [ new Date(date).toISOString()],
            requireSingleSelection : true
        };
        
       
        this.host.applyJsonFilter(filter, "general", "filter", powerbi.FilterAction.merge);
    }


    private getDateColumnRange(): { minDate: Date, maxDate: Date } {
        const defaultRange = {
            minDate: new Date(1990, 1, 1),
            maxDate: new Date()
        };

        if (!this.currentDataView || !this.currentDataView.categorical) {
            return defaultRange;
        }

        const dates = this.currentDataView.categorical.categories![0].values
            .map(row => {
                const value = row;
                // 处理不同类型的日期值
                if (typeof value === 'string') {
                    return new Date(value);
                } else if (typeof value === 'number') {
                    return new Date(value);
                } else if (value instanceof Date) {
                    return value;
                }
                return null;
            })
            .filter((date): date is Date => date !== null && !isNaN(date.getTime()));

        if (dates.length === 0) {
            return defaultRange;
        }

        dates.sort((a, b) => a.getTime() - b.getTime());
        return {
            minDate: dates[0],
            maxDate: dates[dates.length - 1]
        };
    }

    private handleDialogResult(result: ModalDialogResult, targetElement: HTMLElement, sManager: ISelectionManager, dataPoint: Map<string, ISelectionId>) {
        if (result.actionId === DialogAction.OK) {
            const resultState = <DatePickerDialogResult>result.resultState;
            const selectedDate = new Date(resultState.date);
    
            let formatted_date = formatDate(selectedDate);
            if (targetElement instanceof HTMLInputElement) {
                targetElement.value = formatted_date;
            } else {
                targetElement.textContent = formatted_date;
            }
            
        
            this.applyDateFilter(formatted_date);
            
       
            // let selectedId = dataPoint.get(formatted_date);
            // if (selectedId) {
            //     sManager.select(selectedId);
            // }
        }
    
    }

    private openCalendarDialog(): void {
        const dateRange = this.getDateColumnRange();

        let startDate = new Date();
        if (startDate < dateRange.minDate) {
            startDate = dateRange.minDate;
        } else if (startDate > dateRange.maxDate) {
            startDate = dateRange.maxDate
        }

        const initialDialogState = {
            startDate: startDate,
            minDate: dateRange.minDate,
            maxDate: dateRange.maxDate
        };
        const position = {
            type: VisualDialogPositionType.RelativeToVisual,
            left: 0,
            top: 60
        };

        const size = { width: 360, height: 300 };
        const dialogOptions = {
            actionButtons: dialogActionsButtons,
            size: size,
            position: position,
            title: ""
        };


        // const initialState: { selectedDate?: string } = {};
        if (this.dateInput.value) {
            // 如果输入框有日期，作为初始值传给对话框
            initialDialogState.startDate = new Date(this.dateInput.value); // this.formatDate(selectedDate) -> YYYY/MM/DD
        }

        this.host.openModalDialog(
            DatePickerDialog.id,
            dialogOptions,
            initialDialogState // 传递初始日期给对话框
        ).then(result => {
            console.log("Dialog closed with result:", result);
            this.handleDialogResult(result, this.dateInput, this.selectionManager, this.dataPoint);
        }).catch(error => {
            console.error("Error opening date picker dialog:", error);
        });
    }



    public destroy(): void {

    }

    public update(options: VisualUpdateOptions) {
        console.log("filter: " + JSON.stringify(options.jsonFilters, null, 4));
        this.handleDataView(options.dataViews);
    }

    private handleDataView(dataViews: DataView[]) {
        if (!dataViews || dataViews.length == 0) {
            this.currentDataView = null;
            return;
        }

      
        //update the current date view
        this.currentDataView = dataViews[0];

        if (this.currentDataView.categorical && this.currentDataView.categorical.categories && this.currentDataView.categorical.categories.length > 0) {
            this.updateSelection(this.currentDataView.categorical);
        } else {
            this.dataPoint.clear();
            this.dateInput.value = '';
        }


        //sync the formattingSettings
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(
            VisualFormattingSettingsModel,
            this.currentDataView
        );

        this.updateFormatting();



    }

    private updateSelection(currentCategorical: powerbi.DataViewCategorical) {

        const categories = currentCategorical.categories;
        // get count of category elements
        const categoriesCount = categories![0].values.length;

        // iterate all categories to generate selection and create button elements to use selections
        for (let categoryIndex = 0; categoryIndex < categoriesCount; categoryIndex++) {
            const categoryValue: powerbi.PrimitiveValue = categories![0].values[categoryIndex];

            const categorySelectionId = this.host.createSelectionIdBuilder()
                .withCategory(categories![0], categoryIndex) // we have only one category (only one `Manufacturer` column)
                .createSelectionId();

       
            //console.log(categorySelectionId);

            let pearl: Date | null = null;

           
            if (typeof categoryValue === 'string') {
                pearl = new Date(categoryValue);
            } else if (typeof categoryValue === 'number') {
                pearl = new Date(categoryValue);
            } else if (categoryValue instanceof Date) {
                pearl = categoryValue;
            }

            let key: string = 'null';
            if (pearl !== null && !isNaN(pearl.getTime())) {
                key = formatDate(pearl);
            }

            this.dataPoint.set(key, categorySelectionId);

        }



    }


    private updateFormatting(): void {
        const labelSettings = this.formattingSettings.labelCard;
        const inputSettings = this.formattingSettings.inputCard;

        // 更新标签样式
        const label = this.target.querySelector('.date-label') as HTMLElement;
        if (label) {
            if (labelSettings.show.value) {
                label.style.display = "block";
                label.textContent = labelSettings.text.value;
                label.style.fontFamily = labelSettings.fontFamily.value;
                label.style.fontSize = `${labelSettings.fontSize.value}px`;
                label.style.color = labelSettings.fontColor.value.value;
            } else {
                label.style.display = "none";
            }
        }

       
        if (this.dateInput) {
            this.dateInput.style.fontFamily = inputSettings.fontFamily.value;
            this.dateInput.style.fontSize = `${inputSettings.fontSize.value}px`;
            this.dateInput.style.color = inputSettings.fontColor.value.value;
        }
    }

    public getFormattingModel(): powerbi.visuals.FormattingModel {
        return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
    }
}

{
  "dataRoles": [
    {
      "name": "Date",
      "displayName": "field",
      "kind": "Grouping"
    }
  ],
  "dataViewMappings": [
    {
      "conditions": [
        {
          "Date": {
            "max": 1
          }
        }
      ],
      "categorical": {
        "categories": {
          "for": {
            "in": "Date"
          }
        }
      }
    }
  ],
  "objects": {
    "general": {
      "displayName": "General",
      "displayNameKey": "formattingGeneral",
      "properties": {
        "filter": {
          "type": {
            "filter": true
          }
        }
      }
    },
    "labelFormatting": {
      "displayName": "Slicer header",
      "properties": {
        "show": {
          "type": {
            "bool": true
          }
        },
        "text": {
          "displayName": "Text",
          "type": {
            "text": true
          }
        },
        "fontFamily": {
          "displayName": "Font",
          "type": {
            "formatting": {
              "fontFamily": true
            }
          }
        },
        "fontSize": {
          "displayName": "Font size",
          "type": {
            "numeric": true
          }
        },
        "fontColor": {
          "displayName": "Font color",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        }
      }
    },
    "inputFormatting": {
      "displayName": "Values",
      "properties": {
        "fontFamily": {
          "displayName": "Font",
          "type": {
            "formatting": {
              "fontFamily": true
            }
          }
        },
        "fontSize": {
          "displayName": "Font size",
          "type": {
            "numeric": true
          }
        },
        "fontColor": {
          "displayName": "Font color",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        }
      }
    }
  },
  "sorting": {
    "default": {}
  },
  "privileges": [],
  "supportsEmptyDataView": true
}

Both dim start_date and dim end_date are individual tables without relationship to any table.