比较起始日期和截止日期angularjs

wvyml7n5  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(291)

当todate早于from date时,我必须在控件旁边显示错误消息。目前,我添加了min date,这有助于禁用to date早于from date,但如果未触及to date值,则它不会执行任何操作。当from date在to date之后时,它应该显示一些错误。
在plunk上添加了示例。http://plnkr.co/edit/sn9qwk5nkundnirylmhh?p=preview&preview

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function($scope) {

    $scope.datePicker = {};
    $scope.start = new Date();
    $scope.end = new Date();

    $scope.datePicker.minStartDate = new Date();
    // $scope.datePicker.maxStartDate = $scope.end; 
    $scope.datePicker.minEndDate = $scope.start;
    //   $scope.datePicker.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value

    // watcher to watch the "From" date and set the min date for 'To' datepicker 
    $scope.$watch('start', function(v) {
        $scope.datePicker.minEndDate = v;
        $scope.dateOptions2.minDate = v;
    });

    $scope.dateOptions1 = {
        //dateDisabled: disabled,
        formatYear: 'yyyy',
        //  maxDate: $scope.datePicker.maxStartDate,
        minDate: $scope.datePicker.minStartDate,
        startingDay: 1
    };

    $scope.dateOptions2 = {
        //dateDisabled: disabled,
        formatYear: 'yyyy',
        //  maxDate: $scope.datePicker.maxEndDate,
        minDate: $scope.datePicker.minEndDate,
        startingDay: 1
    };
    // Disable weekend selection
    function disabled(data) {
        var date = data.date,
            mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
    }
    $scope.open1 = function() {
        $scope.popup1.opened = true;
    };

    $scope.open2 = function() {
        $scope.popup2.opened = true;
    };

    $scope.formats = ['dd.MM.yyyy'];
    $scope.format = $scope.formats[0];
    $scope.altInputFormats = ['M!/d!/yyyy'];

    $scope.popup1 = {
        opened: false
    };

    $scope.popup2 = {
        opened: false
    };

});

html

div ng-controller="DatepickerPopupDemoCtrl">
    <h5>From Date</h5>
        <p class="input-group">
          <input type="text" 
                  class="form-control" 
                  uib-datepicker-popup="{{format}}" 
                  ng-model="start" 
                  is-open="popup1.opened" 
                  datepicker-options="dateOptions1" 
                  close-text="Close" 
                  readonly="true" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>

        <hr>
      <h5>To Date</h5>
        <p class="input-group">
          <input type="text" 
                  class="form-control" 
                  uib-datepicker-popup="{{format}}" 
                  ng-model="end" 
                  is-open="popup2.opened" 
                  datepicker-options="dateOptions2" 
                  close-text="Close" 
                  readonly="true"/>
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>

  </div>
xzlaal3s

xzlaal3s1#

只用 getTime() 在calendar ng模型变量上比较数字

$scope.$watch('start', function(v) {
        $scope.datePicker.minEndDate = v;
        $scope.dateOptions2.minDate = v;

        let toIsBeforeFrom = new Date($scope.start).getTime() - new Date($scope.end).getTime() >1

    });

相关问题