Question

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

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

我尝试在ng-change上附加此功能，但意识到它不会起作用，因为datepicker不允许它。

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

如果需要，我无法找到如何覆盖指令。此外，我希望当输入字段不在焦点上时，日期选择器应该隐藏。

Answer 1

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

$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中的下拉指令。我没有把它包含在小提琴中，但是使用dropdown和datepicker的组合应该是可行的。

Answer 2

回答迟到但是如果你只想比较使用angular ui datetime picker的日期，你可以使用我创建的以下指令，使用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>

这一行的关键是

数据日期更大和 - 等于=＆＃34; {{Model.ProcedureDateFrom}}＆＃34;它被传递给指令进行比较。

比较angularjs datepicker中的日期字段

2 个答案: