使用jquery在链接之前设置字段的焦点

我在pickadate.js中使用了几个日期字段。当您聚焦该字段时，会弹出日期选择器。效果很好

客户端希望在每个字段旁边有一个图形图标，该图标应将焦点设置为该字段（并因此弹出选择器），如下所示：

<div class="date-picker">
    <label for="start-date">Start Date</label>
    <input id="start-date" class="datepicker" type="text" readonly="">
    <div class="date-button"><img src="/images/icon-datefield.png" alt=""></div>
</div>

我对每个字段的代码如下所示：

<div class="date-picker">
    <label for="start-date">Start Date</label>
    <input id="start-date" class="datepicker" type="text" readonly="">
    <div class="date-button"><img src="/images/icon-datefield.png" alt=""></div>
</div>

我错过了什么？

试试看

$('.date-button').click(function(){
$(this).prev().click();
})

与此相反：

$(this).prev().focus();

尝试通过

.sides（）

方法获取元素，并触发

.focus（）

事件：

$(this).siblings('input').focus();

---

根据你最近的评论：

$('.date-button').click(function () {
    $(this).siblings(".datepicker").datepicker().focus();
});

这里您还必须初始化日期选择器

---

使用jquery UI datepicker，上面的答案更适合解决此问题，但如果有人想使用，这最终起到了作用：

var start_date_open = $( '#start-date' ).pickadate(),
    start_calendar_open = start_date_open.data( 'pickadate' ),
    start_button_open = $( '.date-button' ).on({
                    click: function() {
                        setTimeout( function() {
                            start_calendar_open.open()
                        }, 0)
                    }
                });

---

这确实将焦点放在了场上，但不幸的是没有激活pickadate。我试着按@jibran khan的建议点击，但也没有触发。我甚至尝试了

$（this）.sibbines（'input'）.pickadate（）这根本没什么作用。@Steve刚刚添加了另一个解决方案。非常好，谢谢。也许我会改用jqueryui。如果有人发现了这一点并对使用datepicker.js感兴趣，我想我现在可以使用它的API了。看看我的答案。谢谢。请看我下面的评论：这确实会像点击一样突出显示该字段，但不会像“真正”点击一样激活插件。