使用ng-repeat时,datepicker工作不正常

时间:2017-05-17 12:36:13

标签: angularjs jquery-ui

我正在使用ng-repeat,因为一个字段需要有datepicker.without ng-repeat我的日期选择器工作正常,但是当添加ng-repeat时,我的datepicker无法获得“jquery-ui.js :8044 Uncaught缺少此datepicker的实例数据“。我试过下面的代码

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

我的指示是:<​​/ p>

 .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" ));
        }
      });
    };
     });

1 个答案:

答案 0 :(得分:0)

它不起作用,因为id应该是唯一的你可以通过动态生成id来尝试,而不是datepicker2 put $ index,那么你的id将变得独一无二,你必须使用for循环添加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

中实施
<input type="text" class="inputhistint"  datepicker >