如何使用焦点启动jquery datepicker [英] How to start jquery datepicker with focus

问题描述

我是jquery的新手，并且想重点关注datepicker.

I'm new to jquery and would like to start datepicker with focus.

我的第一个文本框是日期字段，我试图用javascript来使框焦点，但是除非我在页面上的其他位置单击然后在框内单击以使其焦点，否则不会出现datepicker.

My first textbox is a date field and I have tried to give the box focus with javascript but datepicker won't come up unless I click somewhere else on the page and then give it focus by clicking inside the box.

是否可以通过启动日期选择器来使焦点对准，或者让小部件在页面加载时立即启动，然后在用户离开包装盒时将焦点移开?

Is there a way to start datepicker with focus and maybe have the widget start immediately when the page loads then drop focus when the user leaves the box?

  $( "#date" ).datepicker({
    dateFormat: "mm-dd-yy"
  });

推荐答案

尝试一下- http://www.jsfiddle.net/wnUWQ/embedded/result

$(document).ready(function() {
    $("#datepick").datepicker({
        dateFormat: "mm-dd-yy"
    });
    $("#datepick").focus(function() {
        $("#datepick").datepicker("show");
    });
    $("#datepick").focus();
});

当DOM完全加载到浏览器中时，会触发$(document)对象的 .ready() 函数.首先，将datepicker附加到input，然后将 focus 事件处理程序附加显示日期选择器，最后我们将焦点设置在输入上.

The .ready() function of $(document) object is fired when the DOM is completely loaded in the browser. First we attach the datepicker to the input, and then we attach a focus eventhandler that shows the datepicker and last we set the focus on to the input.

这可以全部链接变成一行，如下所示:

This could all be chained into one line as in:

$(document).ready(function() {
    $("#datepick").datepicker({
        dateFormat: "mm-dd-yy"
    }).focus(function() {
        $("#datepick").datepicker("show");
    }).focus();
});

这篇关于如何使用焦点启动jquery datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！