jQuery 日期时间选择器到动态字段

Question

与 angular 我像这样克隆我的字段

$scope.edu_rows = [0];
var edu_counter = 0;

$scope.cloneEduRow = function () {
    edu_counter++;

    if ($scope.edu_rows.length === 10)
        alert('Entry limit reached!');
    else {
        $scope.edu_rows.push(edu_counter);
    }

};

$scope.removeEduRow = function (rowIndex) {
    $scope.edu_rows.splice(rowIndex, 1);
};

通过 ng-repeat

<div data-ng-repeat="row in edu_rows">
                        <div class="col-md-15 form-group row">
                            <div class="col-sm-3">
                                <input type="text" class="form-control" name="edu[@{{ $index }}][school]"
                                       placeholder="School">
                            </div>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" name="edu[@{{ $index }}][teaching]"
                                       placeholder="Teaching">
                            </div>
                            <div class="col-md-2">
                                <div class="input-group date">
                                    <input type="text" class="form-control" name="edu[@{{ $index }}][start_date]"
                                           placeholder="Start Date">
                                    <span class="input-group-addon">
                                        <span class="fa fa-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group date">
                                    <input type="text" class="form-control" name="edu[@{{ $index }}][end_date]"
                                           placeholder="End Date">
                                    <span class="input-group-addon">
                                        <span class="fa fa-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeEduRow($index)">
                                <i class="fa fa-remove"></i>
                            </a>
                        </div>
                    </div>

在我的视图底部我启动了 datetimepicker

$(".date").datetimepicker({
        viewMode: 'years',
        format:   'MM/YYYY',
        icons:    {
            time:     'fa fa-clock-o',
            date:     'fa fa-calendar',
            up:       'fa fa-chevron-up',
            down:     'fa fa-chevron-down',
            previous: 'fa fa-chevron-left',
            next:     'fa fa-chevron-right',
            today:    'fa fa-screenshot',
            clear:    'fa fa-trash',
            close:    'fa fa-remove'
        }
    });

但这只适用于第一行，添加的行没有得到插件，我尝试使用焦点：$(document).on("focus", ".date", function () {

但这没有用，将它放在我的 angular 控制器中有点管用，它会在按下按钮后为之前添加的行启动它，但不会为当前添加的行启动它。

感谢帮助。

Answer 1

您可以像这样在 xyz.js 中创建指令：

app.directive("date", function () {
function link(scope, element, attrs, controller) {
    // CALL THE "datetimepicker()" METHOD USING THE "element" OBJECT.

    element.datetimepicker({
        format: 'DD-MM-YYYY', // here your need format is used i am just put here 
        icons: {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: 'fa fa-chevron-left',
            next: 'fa fa-chevron-right',
            today: 'fa fa-screenshot',
            clear: 'fa fa-trash',
            close: 'fa fa-remove'
        }
    }).on('dp.change', function (e) {
        var d = new Date(e.date);
        var day = d.getDate();
        var month = d.getMonth() + 1;
        var year = d.getFullYear();
        scope.$apply(function () {
            controller.$setViewValue(day + '-' + month + '-' + year);
        });
    });
}

return {
    require: 'ngModel',
    link: link
};
});

只是 "date" 是这样的文本框：

 <div class="col-md-2">
                            <div class="input-group">
                                <input type="text" date class="form-control" name="edu[@{{ $index }}][start_date]"
                                       placeholder="Start Date">
                                <span class="input-group-addon">
                                    <span class="fa fa-calendar"></span>
                                </span>
                            </div>
                        </div>

Answer 2

这个工作示例将帮助您解决问题。

 var app = angular.module('app1', []);

    app.controller('MainCtrl', function ( $scope, $timeout) {
        $scope.edu_rows = [0];
        var edu_counter = 0;

        $scope.cloneEduRow = function () {
            edu_counter++;

            if ($scope.edu_rows.length === 10)
                alert('Entry limit reached!');
            else {
                $scope.edu_rows.push(edu_counter);
            }
            $scope.bindDataTimePicker();
        };

        $scope.removeEduRow = function (rowIndex) {
            $scope.edu_rows.splice(rowIndex, 1);
        };

        $scope.bindDataTimePicker = function () {
            $timeout(function () {
                $(".date").datetimepicker({
                    viewMode: 'years',
                    format: 'MM/YYYY',
                    icons: {
                        time: 'fa fa-clock-o',
                        date: 'fa fa-calendar',
                        up: 'fa fa-chevron-up',
                        down: 'fa fa-chevron-down',
                        previous: 'fa fa-chevron-left',
                        next: 'fa fa-chevron-right',
                        today: 'fa fa-screenshot',
                        clear: 'fa fa-trash',
                        close: 'fa fa-remove'
                    }
                });
            }, 100);
        }
        $scope.bindDataTimePicker();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div ng-app="app1" ng-controller="MainCtrl">
    <div data-ng-repeat="row in edu_rows">
        <div class="col-md-15 form-group row">
            <div class="col-sm-3">
                <input type="text" class="form-control" name="edu[@{{ $index }}][school]"
                       placeholder="School">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="edu[@{{ $index }}][teaching]"
                       placeholder="Teaching">
            </div>
            <div class="col-md-2">
                <div class="input-group date">
                    <input type="text" class="form-control" name="edu[@{{ $index }}][start_date]"
                           placeholder="Start Date">
                    <span class="input-group-addon">
                        <span class="fa fa-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="col-md-2">
                <div class="input-group date">
                    <input type="text" class="form-control" name="edu[@{{ $index }}][end_date]"
                           placeholder="End Date">
                    <span class="input-group-addon">
                        <span class="fa fa-calendar"></span>
                    </span>
                </div>
            </div>
            <a class="btn btn-icon white col-sm-1 pull-right" data-ng-click="removeEduRow($index)">
                <i class="fa fa-remove"></i>
            </a>
        </div>
    </div>
    <button ng-click="cloneEduRow()">Add New</button>
</div>

jQuery 日期时间选择器到动态字段

jQuery datetimepicker to dynamic fields

javascript

jquery

datetimepicker

angularjs