Question

我在这里遇到了一些问题：

＆＃13;

<script>
    jQuery(document).ready(function($) {
        jQuery("#check_in").datepicker({
            dateFormat: "yy-m-dd",
            minDate: 0,
            showOtherMonths: true,
            firstDay: 1,
            onSelect: function( selectedDate ) {
                jQuery( "#check_out" ).datepicker( "option", "minDate", selectedDate );
            },
        });

        jQuery("#check_out").datepicker({
            dateFormat: "yy-m-dd",
            minDate: 0,
            showOtherMonths: true,
            firstDay: 1,
            onSelect: function( selectedDate ) {
                jQuery( "#check_in" ).datepicker( "option", "maxDate", selectedDate );
            },
        });
    });
    </script>';

＆＃13;

<div class="row_field field_text">
  <label class="label_title">'.__('Check Out','tfuse').'</label>
   <input type="text" name="check_out" value="" id="check_out">
    <span class="icon icon-calendar"></span>
  </div>

＆＃13;

问题是我想要的，当我点击跨度图标来调用函数时，就像输入字段中的剂量一样。如果有人有任何解决方案，请帮助抱歉，我不擅长Java＆amp;如果你能用HTML标签告诉我答案，jQuery很高兴。

提前致谢

Answer 1

正如@smerny的评论中所注意到的，jQuery UI datepicker有一个显示日历图标的选项。所以这就是你能做的。但是，datepicker代码的作用基本上是在这个图标上绑定一个click事件，它只是将焦点放入相应的输入文本字段。因此，您的第二个选择是：如果您仍想使用自己的图标（也许您想要不同的HTML结构），您只需将输入字段集中在图标点击上即可。也许是这样的：

$('.icon-calendar').click(function() {
    $(this).prev(':text').focus();
});

然而，我会更好地使用配置选项。

演示：http://jsfiddle.net/2g9ovncg/

Answer 2

最好通过它的id来获取输入，而不是在DOM中的位置。这样一来，如果将来有变化，你的javascript仍然可以保证工作（假设id不是被改变的东西）。

$(".icon-calendar").click(function() {
    $("#check_out").focus();
});

但我同意dfsq关于使用datepicker的内置配置是最佳选择。

通过图标调用功能

2 个答案:

演示：http://jsfiddle.net/2g9ovncg/