1

我正在尝试比较两个输入文本字段，并附加了 datepicker angular ui。

这两个字段是http://jsfiddle.net/iamkhush/8Rezs/23/的开始日期和结束日期。

我试图在 ng-change 上附加这个功能，但意识到它不会工作，因为 datepicker 不允许它。

 $scope.datechange = function(){
     if($scope.enddt < $scope.startdt){
        $scope.enddt = '';
    };

如果需要，我不知道如何覆盖指令。我还希望当输入字段不在焦点上时日期选择器应该隐藏。

4

2 回答 2

1

答案有点晚了，但是如果您只想使用角度 ui 日期时间选择器与日期进行比较，则可以使用我创建的以下指令将其与使用 moment.js 的日期值进行比较。该指令需要 moment.js 文件，但您甚至可以不使用它，但我个人认为 moment.js 非常适合 javascript 中的日期函数。有你比较日期的指令如下

mainApp.directive("dateGreaterAndEqual", function () {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel', // get a hold of NgModelController

        link: function (scope, elem, attrs, ngModel) {
            if (!ngModel) return; // do nothing if no ng-model

            // watch own value and re-validate on change
            scope.$watch(attrs.ngModel, function () {
                validate();
            });

            // observe the other value and re-validate on change
            attrs.$observe('dateGreaterAndEqual', function (val) {
                validate();
            });

            var validate = function () {
                // values
                var dateTo = angular.isDefined(ngModel.$viewValue) === true && !_.isNull(ngModel.$viewValue) ? moment(ngModel.$viewValue).toDate() : null;
                var dateFrom = attrs.dateGreaterAndEqual !== "" ? moment(attrs.dateGreaterAndEqual.replace('"', '').replace('\\', '').replace('"', '')).toDate() : null;
                //passing date with braces around it causes and issue therfore we need to use replace

            };
        }
    }

});

dateTo 和 dateFrom 是您需要的值。您需要以下 html 标记才能使用它

                         <p class="input-group">
                            <input type="text" class="form-control" data-datepicker-popup="{{Model.DateFormat}}"
                                   ng-model="Model.ProcedureDateTo"
                                   data-is-open="openedTo" data-min-date="Model.MinDate"
                                   data-max-date="Model.MaxDate"
                                   data-datepicker-options="dateOptions" data-date-disabled="disabled(date, mode)"
                                   ng-required="false" data-close-text="{{Close}}" data-date-greater-and-equal="{{Model.ProcedureDateFrom}}" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="openTo($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                        </p>

这一行的关键是

data-date-greater-and-equal="{{Model.ProcedureDateFrom}}" 传递给指令进行比较。

于 2014-11-20T01:05:29.040 回答
1

稍微修改了您的小提琴以比较日期。看看这个小提琴。这些变化是：

$scope.$watch('startdt', function(newval, oldval){
    if($scope.enddt < $scope.startdt) {
        $scope.enddt = '';
    };
});

$scope.$watch('enddt', function(newval, oldval){
    if($scope.enddt < $scope.startdt) {
        $scope.enddt = '';
    };
});

我冒昧地禁用了文本字段，否则用户可以在文本字段中输入无效日期。此外，逻辑是这样的，如果您输入的 startDate 低于 endDate 并随后将 startDate 更改为 endDate 之后，则 endDate 将被重置。IOW，开始日期控制着一切。请根据您的需要进行更改。

此外，要根据文本字段显示/隐藏，请查看 angular-ui 中的下拉指令。我没有将它包含在小提琴中，但使用下拉和日期选择器的组合应该是可行的。

于 2013-07-20T14:15:19.503 回答