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

Question

伙计们，

我正在尝试使用日期选择器在我的页面上输入各种文本，并将功能更改为：

<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">

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

Datepicker with multiples inputs

jquery

jquery-ui

jquery-ui-datepicker