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

时间:2013-04-06 17:07:02

标签: jquery forms datepicker

我有几个与pickadate.js一起使用的日期字段。当您对该字段进行聚焦时,会弹出日期选择器。效果很好。

客户想要在每个字段旁边放置一个图形图标,该图标应将焦点设置为字段(因此弹出选择器),如下所示:

picker

我的每个字段的代码都是这样的:

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

我在这里缺少什么?

3 个答案:

答案 0 :(得分:1)

尝试

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

答案 1 :(得分:0)

而不是:

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

尝试通过.siblings()方法获取elem并触发.focus()事件:

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

根据您的最新评论:

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

在这里你必须初始化datepicker。

FIND THIS IN FIDDLE

答案 2 :(得分:0)

上面的答案更适合解决它,使用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)
                    }
                });