使用 altFields 动态生成 jQuery Datepicker

Posted 2023-05-08

【中文标题】使用 altFields 动态生成 jQuery Datepicker

【英文标题】：Dynamically generating a jQuery Datepicker with altFields

【发布时间】：2011-04-09 02:56:36

【问题描述】：

我通过简单地将字段 html 附加到 div 来动态生成日期选择器：

<input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" tabindex="6" class="publication_date hasDatepicker">
<input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="">

由于我们存储日期的方式，我们有一个单独的字段 (altfield) 用于存储用户选择的数据库格式日期的日期选择器。

为了处理多个日期选择器的选择，我分配了一个类并使用 livequery 在页面加载后检测 onClicks：

$(".publication_date").livequery(function() 
                $(this).datepicker(
                    dateFormat: "dd M yy",
                    changeYear: true,
                    changeMonth: true,
                    onSelect: function(dateText, inst) 
                        console.log(inst);
                    
                );
            );

我有一个问题，日期选择器如何知道要填充哪个替代字段？在单个日期选择器上，通常包括：

altField: '#start_date_datepicker_altfield', 
altFormat: 'yy-mm-dd',

人口出现。

【参考方案1】：

我知道文档说它需要一个选择器，但它也可以带一个 jQuery 对象，所以只需使用 $(this).next() 来获取隐藏字段，如下所示：

$(".publication_date").livequery(function() 
   $(this).datepicker(
      altField: $(this).next(), 
      altFormat: 'yy-mm-dd',
      dateFormat: "dd M yy",
      changeYear: true,
      changeMonth: true,
      onSelect: function(dateText, inst) 
        console.log(inst);
      
   );
);

由于大多数插件归结为$(input)，输入可以是选择器或 jQuery 对象或DOM 元素，它仍然可以正常工作:)

【讨论】：

Tsk tsk，创建两个可以做的 jQuerys... ;-) （不过，不错的方法。）

@TJCrowder - 每次点击都会创建一个 jQuery 对象（任何一种方法）：$(altField).each(function() $(this).val(dateStr); );，成本低 + 更容易维护 IMO :)

对，但您的迭代器函数在每次点击时创建一个 两次：首先在函数的第一行 ($(this).datepicker)，然后在第二行 (altField: $(this).next(),) )。只是一个友好的挑剔（真的只是一个笑话），任何性能影响都大大被它是一个事件处理程序的事实所淹没...... :-)

@TJCrowder - 我想你错过了一些东西 :) .livequery() != .live() :) 性能下降实际上就是 .livequery() 寻找新元素 :)

【参考方案2】：

我没有使用过livequery，但是从外观上看，你可以从this.id获取匹配元素的id。在您的示例 HTML 中，这将是“publication_date_2”，从中可以相对容易地为 altfield“publication_date_db_2”创建必要的 ID（您可以通过更改命名字段的策略使其更容易）。

也许：

$(".publication_date").livequery(function() 
    $(this).datepicker(
        dateFormat: "dd M yy",
        changeYear: true,
        changeMonth: true,
        onSelect: function(dateText, inst) 
            console.log(inst);
        ,
        altField: "#" + this.id.replace("_date_", "_date_db_"),
        altFormat: 'yy-mm-dd'
    );
);

【讨论】：

谢谢，我才意识到这一点。

您建议如何更改字段的命名约定？

@user275074：实际上，你所拥有的很容易（见上文）。我可能会使用前缀，但没关系...