表单中批量创建jQuery Datepicker的简化实现方案咨询

你不需要手动为每个ID单独初始化Datepicker，以下两种方案可以大幅简化代码：

方案1：使用共享类（推荐，更清晰易维护） #

修改HTML： #

给所有日期输入框添加一个统一的类，比如date-picker：

<input type="checkbox" id="Alabama" name="alabama" value="X">
<label for="Alabama"><b>Alabama</b></label><br>
Start <input type="text" name="AL_date_s" value="" id="datepicker2" class="date-picker" size="15" /> 
End <input type="text" name="AL_date_e" value="" id="datepicker3" class="date-picker" size="15" /><br><br>

<input type="checkbox" id="Alaska" name="alaska" value="X">
<label for="Alaska"><b>Alaska</b></label><br>
Start <input type="text" name="AK_date_s" value="" id="datepicker4" class="date-picker" size="15" /> 
End <input type="text" name="AK_date_e" value="" id="datepicker5" class="date-picker" size="15" /><br><br>

<!-- 其他100个州的输入框同样添加class="date-picker" -->

修改JavaScript： #

只需要一次初始化即可应用到所有带该类的元素，并且合并所有$(document).ready()为一个：

$(document).ready(function() {
  $(".date-picker").datepicker();
});

方案2：使用属性选择器（无需修改现有HTML） #

如果不想改动HTML，可以通过输入框的name属性后缀（_date_s和_date_e）来匹配所有日期输入框：

$(document).ready(function() {
  // 匹配所有name以_date_s或_date_e结尾的输入框
  $("input[name$='_date_s'], input[name$='_date_e']").datepicker();
});

额外优化说明 #

• 无需多次调用$(document).ready()，所有初始化逻辑放在一个里面即可，性能更优。
• 两种方案都能一次性完成102个Datepicker的初始化，避免重复代码。

内容的提问来源于stack exchange，提问作者RKwasi