时间戳

首页 > 解决方案 > 具有多个输入的日期选择器

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

问题描述

嗨，伙计们，

我正在尝试使用 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/上找不到任何东西来整理它。

标签： jqueryjquery-uijquery-ui-datepicker

解决方案

你是正确的，它在你聚焦之后初始化，所以你需要在之前找到一个地方（例如，当它们被动态更改/添加到 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">

推荐阅读