jQuery DateTimePicker maxDate不更新

时间:2019-11-15 12:43:46

标签: jquery angularjs datetimepicker

我正在编写一个简单的datepicker,并尝试动态更新maxDate属性。为此,我在datepicker指令中设置了一个手表,并且当我的手表变量更改时,只需更新maxDate即可。但是,它似乎实际上并没有更新maxDate。下面是我的代码。

HTML

    <div class="modal-body" date-picker-purge-queue>
        ...
        Select an expiry date: 
        <div class="input-group date" id='datetimepicker-expiry'>

          <input type='text' class="form-control"
                 id="expiryDate"name="expiryDate"
                 ng-model="purgeQueueForm.expiryDate" ng-required="true">

           <div class="input-group-addon">                                                                                               
               <div class="glyphicon glyphicon-calendar"></div>                                                                                            
           </div>                                                                                        
        </div>

Javascript指令

    app.directive("datePickerPurgeQueue", [function () {
        return {
            restrict: 'A',
            scope: true,
            link: function (scope, element, attrs) {
                var minExpiryDate = new Date();

                scope.$watch("purgeQueueForm.maxExpiryDate", (function (newValue) {
                    if (newValue) {
                        $( "#datetimepicker-expiry" ).datepicker( "option", "maxDate", newValue );
                    }
                }), true);

                $('#datetimepicker-expiry').datetimepicker({
                    format: 'YYYY-MM-DD',
                    defaultDate: scope.expiryDate,
                    minDate: minExpiryDate,
                    allowInputToggle: true,
                    ignoreReadonly: true
                });

                angular.element('#datetimepicker-expiry').on("dp.change dp.update dp.show dp.hide focusout", function (e) {
                    scope.$parent.purgeQueueItem.expiryDate = this.firstElementChild.value;

                });
                angular.element('#expiryDate').focusout(function () {
                    scope.$parent.purgeQueueItem.expiryDate = this.value;
                });
            }
        };
    }]);

我要在其中更新watch变量的Javascript控制器。

    $scope.purgeQueueForm.expiryDate = "";
    $scope.purgeQueueForm.maxExpiryDate = "";

    // Intialize functions
    initialize();

    //******************** JS functions ********************/

    // Initialize data
    function initialize() {
        getSiteData().then(function (data) {
            $scope.siteData = data;
            $scope.selectedSite = data[0];
            getActiveIssuer().then(function (data) {
                $scope.issuerData = data;
                $scope.loading = true;

                // Intialize expiry date
                var expiryDate = new Date();
                var endDate = expiryDate.getDate() + data.purgeQueueExpiryDuration;
                expiryDate.setDate(endDate);
                $scope.purgeQueueForm.expiryDate = expiryDate.getFullYear() + "-" + (expiryDate.getMonth() + 1) + "-" + expiryDate.getDate();
                $scope.purgeQueueForm.maxExpiryDate = expiryDate;

                getPurgeQueue().then(function (data) {
                    $scope.purgeQueueResults = data;
                    $scope.purgeQueueResultsDisplay = [].concat($scope.purgeQueueResults);
                    $scope.loading = false;
                })
            })
        })
    }

    function getSiteData() {
        var deferred = $q.defer();
        var appServer = $rootScope.url + 'SEPM/REST/loadMasterData/getActiveSites';
        $http(
                {
                    method: 'Get',
                    url: '/REST/Generic/Get?url=' + appServer,
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).success(function (data) {
            deferred.resolve(data);
        }).error(function () {
            deferred.reject();
        });
        return deferred.promise;
    }

    function getPurgeQueue() {
        var deferred = $q.defer();
        var appServer = $rootScope.url + 'SEPM/REST/PurgeQueue/getPurgeQueue/' + $scope.issuerData.id;
        $http(
                {
                    method: 'Get',
                    url: '/REST/Generic/Get?url=' + appServer,
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).success(function (data) {
            deferred.resolve(data);
        }).error(function () {
            deferred.reject();
        });
        return deferred.promise;
    }

当我调试它时,我看到范围变量正在使用日期对象进行更新,但是将其分配给datetimepicker的maxDate属性的语句没有执行任何操作。感谢您的帮助,谢谢!

0 个答案:

没有答案