Angular日期选择器指令需二次聚焦才触发问题求助

嘿，这个问题我之前也碰到过！你现在的代码是第一次聚焦输入框时才初始化datepicker，但初始化完成后这次的聚焦事件已经走完了，所以得等第二次点击才能触发插件的弹出逻辑。给你两个靠谱的解决方案：

方案1：初始化后主动唤起日期选择器 #

修改指令代码，用ElementRef定位当前绑定指令的元素（避免全局选择器干扰其他组件），初始化完成后手动调用show()方法弹出选择器，同时加个判断防止重复初始化：

import {Directive, HostListener, ElementRef} from '@angular/core';
declare const $: any;
@Directive({ selector: '[appDatePicker]' })
export class DatePickerDirective {
  constructor(private el: ElementRef) { }

  @HostListener('focus') onFocus() {
    const $currentPicker = $(this.el.nativeElement);
    // 仅当未初始化时才创建datepicker实例
    if (!$currentPicker.data('datepicker')) {
      $currentPicker.datepicker({ 
        autoclose: true, 
        todayHighlight: true 
      });
    }
    // 主动触发弹出
    $currentPicker.datepicker('show');
  }
}

方案2：在指令初始化阶段就绑定datepicker #

另一种更简洁的思路是，直接在指令的ngOnInit钩子中完成datepicker的初始化，这样页面加载后插件就已经绑定好事件，第一次点击输入框就能直接唤起：

import {Directive, ElementRef, OnInit} from '@angular/core';
declare const $: any;
@Directive({ selector: '[appDatePicker]' })
export class DatePickerDirective implements OnInit {
  constructor(private el: ElementRef) { }

  ngOnInit() {
    $(this.el.nativeElement).datepicker({ 
      autoclose: true, 
      todayHighlight: true 
    });
  }
}

额外注意事项 #

• 确保jQuery和datepicker的脚本已经正确引入到你的Angular项目中，比如在angular.json的scripts数组里配置好路径
• 尽量避免使用全局选择器（像你原来的$('.date-picker')），用ElementRef获取当前元素更符合Angular的组件隔离原则，也能避免多个日期选择器互相影响

内容的提问来源于stack exchange，提问作者Abhishek