具有多个输入的日期选择器

Question

大家好，

我正在尝试使用 datepicker 在我的页面上放置各种文本输入，我将函数更改为：

<script language="JavaScript">
function calendario(id_calendario, DataMin, DataMax) {
var DataMin;
var DataMax;

  $(id_calendario).datepicker({
    dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
    monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: true,
    maxDate: DataMax,
    minDate: DataMin,
    navigationAsDateFormat: false,
  });
}
</script>

我的输入如下所示：

<input type="text" name="data_c" id="data_inicial" onfocus="return calendario(data_inicial,10,30);">

问题是为了显示日历框，我需要在每个输入上单击两次。 （我猜一个是激活功能，另一个是处理请求）。

任何人都知道我如何只需单击一下（或聚焦时）即可使其工作。我需要通过函数发送 DataMin 和 DataMin 因为它们是动态的并且它们在每个输入上都会改变。

我尝试将 onfocus 更改为任何其他功能，但没有任何改变。先感谢您。

我在http://api.jqueryui.com/datepicker/ 上找不到任何东西来解决它。

Answer 1

你是正确的，它在你聚焦后初始化，所以你需要在之前找到一个地方（例如，当它们被动态更改/添加到 dom/其他时）

您通常可以通过使用类名和数据属性来一次初始化所有选择器来传递动态数据，例如：

<script language="JavaScript">

function myDynamicChange() {

  // ...

  $('.calendario').each(function(i,val){
    var min = $(val).attr('data-min');
    var max = $(val).attr('data-max');
    $(val).datepicker({
      dayNamesMin: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
      monthNamesShort: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
      dateFormat: "dd/mm/yy",
      changeMonth: true,
      changeYear: true,
      maxDate: max,
      minDate: min,
      navigationAsDateFormat: false,
    });
  });
}
</script>

然后生成的输入可能看起来像

<input type="text" name="data_c" class="calendario" data-min="10" data-max="20">