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

Question

我有几个与 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>

我已经尝试了一些这样的事情，但无济于事：

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

我在这里想念什么？

Answer 1

尝试

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

Answer 2

而不是这个：

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

尝试通过.siblings()方法获取元素并将.focus()事件触发：

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

---

根据您的最新评论：

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

在这里，您也必须初始化日期选择器。

在小提琴中找到这个

Answer 3

上面的答案更适合使用 jquery UI datepicker 来解决它，但如果有人想使用datepicker.js，这终于奏效了：

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)
                    }
                });