【问题标题】:Compare from and to date angularJs比较从和至今的angularJs
【发布时间】:2021-06-03 12:51:02
【问题描述】:

当 ToDate 早于 From Date 时,我必须在控件旁边显示错误消息,目前我添加了 min date 这有助于禁用 To date before 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>

【问题讨论】:

    标签: html angularjs


    【解决方案1】:

    只需在日历 ng-model 变量上使用 getTime() 即可比较数字

    $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
    
        });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-08
      • 2020-05-09
      相关资源
      最近更新 更多