带多个输入的日期选择器

时间:2018-07-14 16:35:48

标签: jquery jquery-ui jquery-ui-datepicker

嗨,

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

1 个答案:

答案 0 :(得分:0)

您是正确的,因为它是在聚焦后才初始化的,所以您需要在此之前找到一个位置(例如,当它们动态更改/添加到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">