使用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()方法获取elem并触发.focus()事件：

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

---

根据您的最新评论：

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

在这里你必须初始化datepicker。

FIND THIS IN FIDDLE

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