jQuery：如何从与 datepicker 插入日期的输入字段不同的元素中激活 datepicker？

Posted 2023-05-07

【中文标题】jQuery：如何从与 datepicker 插入日期的输入字段不同的元素中激活 datepicker？

【英文标题】：jQuery: how do I activate a datepicker from an element that is separate from the input field that the datepicker inserts the date into?

【发布时间】：2011-03-16 16:10:46

【问题描述】：

这不按我想要的方式工作。目前，文本字段激活日期选择器。但我想点击按钮来激活日期选择器：

  <script type="text/javascript">
        $j(function() 
            $j(".prop-expiry input").datepicker(
                showTrigger: '#exp-date-button'
            );
        );
    </script>

确实如此，但我希望能够为日期选择按钮使用悬停图像（目前，它同时显示 img 和悬停图像...因为 png 是精灵。）

<script type="text/javascript"> 
$(function() 
    $(".prop-expiry input").datepicker(
        showOn: 'button',
        buttonImage: '..images/btn_datepicker.png',
        buttonImageOnly: true
    );
);
</script> 

还有我希望显示日期选择器的字段/按钮：

<input class="input-field hasDatepicker" 
       id="object_expires_at" 
       name="object[expires_at]" 
       onclick="$j('.prop-expiry input').val(''); 
                $j('.prop-expiry input').css('color', 'black');" 
       size="30" type="text" 
       value="Enter or pick a date">
<a id="exp-date-button" class="date-picker">Expiration Date</a>

我想要什么：用户点击一个#exp-date-button

然后出现日期选择器。

想法？

【参考方案1】：

据我了解你的代码是做什么的，你应该这样做：

$("#exp-date-button").datepicker(
     /* your config */
);

对于悬停状态，我建议使用 CSS 解决方案。更少的 javascript 总是更好 ;) 你使用的是哪个 jQuery Datepicker？

【讨论】：

css 成功了。 jquery 插入了带有“ui-datepicker-trigger”类的按钮，所以我可以搞砸了。