使用ng-repeat时datepicker无法正常工作 [英] datepicker not working fine when ng-repeat using

问题描述

我正在使用ng-repeat，因为一个字段需要使用datepicker.没有ng-repeat，我的日期选择器就可以以表格格式正常工作，但是当添加ng-repeat时，我的datepicker无法正常工作，得到"jquery-ui.js" :8044此日期选择器的未捕获的丢失实例数据".我尝试了以下代码

I am using ng-repeat in that one field need to have datepicker.without ng-repeat my date picker is working fine in table format but when ng-repeat added then my datepicker is not working getting "jquery-ui.js:8044 Uncaught Missing instance data for this datepicker".I tried below code

 <td><input type="text" class="inputhistint datepickershiva"  id="datepicker2" ></td>
     <tr id="copartnerTr10" name="0"    ng-repeat="Details in DetailsList track by $index">
                        <td><input type="text" class="inputhistint datepickershiva`enter code here`"  id="datepicker2" ></td>
    </tr>

<script>
     jQuery.datepicker.regional['es'] = {
                    closeText: "Cerrar",
                    prevText: "&#x3C;Ant",
                    nextText: "Sig&#x3E;",
                    currentText: "Hoy",
                    monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio",
                        "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
                    ],
                    monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun",
                        "jul", "ago", "sep", "oct", "nov", "dic"
                    ],
                    dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
                    dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
                    dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
                    weekHeader: "Sm",
                    dateFormat: "dd/mm/yy",
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    yearSuffix: ""
                };
                $.datepicker.setDefaults($.datepicker.regional['es']);


                $(function() {
                    $(".datepickershiva").datepicker({

                        buttonImage: "calendar.gif",
                    });

                });
</script>

我的指令是:

 .directive('datepicker', function() {
    return function($scope, element) {
      console.log(element);
      element.datepicker({
        minDate: 0,
        onSelect: function(y) {
          var edate = element.siblings('.edate');
          edate.datepicker();
          edate.datepicker('option', 'minDate', element.datepicker( "getDate" ));
        }
      });
    };
     });

推荐答案

它不起作用，因为id应该是唯一的，您可以尝试通过动态生成id来进行尝试，例如，而不是datepicker2 put $ index，那么您的id将会变得唯一并且必须使用for循环添加datepicker.

It won't work because id should be unique you can give a try by dynamically generating id's i.e instead of datepicker2 put $index, then your id's will become unique and you have to use a for loop add datepicker.

或创建指令

.directive('datepicker', function() {
return function($scope, element) {
  console.log(element);
  element.datepicker({
    minDate: 0,
    onSelect: function(y) {
      var edate = element.siblings('.edate');
      edate.datepicker();
      edate.datepicker('option', 'minDate', element.datepicker( "getDate" ));
    }
  });
};
 });

并在ng repeat中实现它

and implement it in ng repeat

<input type="text" class="inputhistint"  datepicker >

这篇关于使用ng-repeat时datepicker无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！