复用页面datepicker：点击同页div「abc」触发该组件的实现方案咨询

嘿，我懂你碰到的问题了——给div「abc」加datepicker的类名没唤起组件，对吧？这很正常，因为绝大多数datepicker组件（比如jQuery UI、Bootstrap Datepicker这类）都是绑定到特定元素（一般是input）上的，光套类名不会自动触发它的弹出逻辑。下面给你几个亲测可行的实现方案：

方法一：手动调用datepicker的显示方法（最通用） #

假设你的datepicker原本是绑定在一个input元素上的，比如：

<input type="text" id="targetDatepicker">
<div id="abc">点击我选择日期</div>

你只需要给div「abc」绑定点击事件，在事件里直接调用datepicker的显示方法就行。以jQuery UI Datepicker为例：

// 先初始化你的datepicker
$('#targetDatepicker').datepicker();

// 给abc div添加点击触发逻辑
$('#abc').on('click', function() {
  // 调用datepicker的show方法唤起组件
  $('#targetDatepicker').datepicker('show');
});

如果用的是Bootstrap Datepicker，逻辑完全一样，调用的方法也是datepicker('show')；要是用的是其他小众库，你可以查下它的文档，核心都是找到手动显示组件的API来调用。

方法二：配置组件指定触发元素（组件支持的话更简洁） #

有些datepicker组件支持直接指定触发元素，比如jQuery UI Datepicker就可以通过配置项来关联你的div：

$('#targetDatepicker').datepicker({
  showOn: 'both', // 允许点击input或者触发元素都唤起组件
  button: '#abc' // 把你的div设为触发按钮
});

这个方法更优雅，但前提是你用的datepicker库支持类似的配置项，如果文档里找不到相关设置，就用方法一准没错。

方法三：模拟绑定元素的点击事件（兜底方案） #

要是上面两种方法都不适用，还可以用“曲线救国”的方式——在div点击时，模拟触发datepicker绑定的那个input的点击事件：

$('#abc').on('click', function() {
  // 模拟input被点击，间接唤起datepicker
  $('#targetDatepicker').click();
});

这个方案兼容性拉满，只要你的datepicker是通过点击绑定元素（比如input）来唤起的，这个方法就一定能生效。

⚠️ 小提醒：记得确保你的选择器（比如#abc、#targetDatepicker）能准确选中页面上的元素，要是用类选择器的话，注意不要选到多个重复元素哦～

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