如何在 angular.js 中设置日期？

Posted 2023-05-07

【中文标题】如何在 angular.js 中设置日期？

【英文标题】：How to set Date in angular.js?

【发布时间】：2021-08-30 23:25:12

【问题描述】：

我希望maxDate 最多可以选择今天，（过去应该可以点击，但明天不行） 我选择maxDay和minDay之间的天数最多应该是365天，不能选择超过365天，但是可以少选，

$scope.dateOptions = 
                    formatYear: "yy",
                    minDate: getMinDate(),
                    maxDate: new Date(),
                    startingDay: 1
                ;

                function getMinDate() 
                    var oldDay = new Date();
                    oldDay.setDate(oldDay.getDate() -  365);
                    return oldDay;
                ;

这还不够，我只能设置从今天到 365 天之间的天数， 但如果我选择maxDate 作为 2021 年 1 月 3 日，我希望它是可选的，那么 minDate 应该在 365 天前可以选择，比如 2020 年 1 月 4 日 ..

我想做一个像minDate 这样的验证，不能晚于maxDate。

这里是html的相关部分，

<div class="row">
                <div class="col-sm-3">
                    <label for="sel1"> 'LISTLOG_SEARCHSTARTDATE' | translate :
                        <!--             <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top"  -->
                        <!--                uib-tooltip="'TOOLTIP_DEVICELOG_SEARCHDATE' | translate"></a> -->
                    </label>
                    <p class="input-group">
                        <input type="text" class="form-control" uib-datepicker-popup="format" ng-model="logVariables.startDate"
                            ng-change="formatDateModal()" ng-model-options="timezone: 'UTC'" is-open="popup1.opened"
                            datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open1()"><i
                                    class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    </p>
                </div>
                <div class="col-sm-3">
                    <label for="sel1"> 'LISTLOG_SEARCHENDDATE' | translate :
                        <!--             <a class="ion-information-circled" tooltip-animation="true" tooltip-placement="top"  -->
                        <!--                uib-tooltip="'TOOLTIP_DEVICELOG_SEARCHDATE' | translate"></a> -->
                    </label>
                    <p class="input-group">
                        <input type="text" class="form-control" uib-datepicker-popup="format" ng-model="logVariables.endDate"
                            ng-change="formatDateModal()" ng-model-options="timezone: 'UTC'" is-open="popup2.opened"
                            datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" />
                        <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>

            </div>

【参考方案1】：

您需要在对象中传递引用。我更改了 mindate 函数的名称以使其更明确

function getMinDateFromEndDate(date)  //pass in the relative end date reference
    var oldDay = new Date(date);
    oldDay.setDate(oldDay.getDate() - 365);
    return getUTCDate(oldDay);
;

let endDate = getUTCDate(new Date('2021-01-03')); // set the arbitrary end date
let startDate = getMinDateFromEndDate(endDate)

$scope.logVariables = 
    startDate: startDate,
    endDate: endDate


$scope.dateOptions = 
    formatYear: "yyyy",
    minDate: startDate,
    maxDate: endDate,
    startingDay: 1
;

由于您使用的是 UTC 时间，我处理了这个 sn-p，展示了一种转换为 UTC 的方法，如何使用 UTC 设置最小和最大日期

function getUTCDate(date) 
   var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
   return new Date(now_utc);

angular.module('dateExample', ['ngSanitize', 'ui.bootstrap'])
  .controller('ExampleController', ['$scope', function($scope) 

    function getUTCDate(date) 
      var now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
        date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
      return new Date(now_utc);
    

    function getMinDateFromEndDate(date) 
      var oldDay = new Date(date);
      oldDay.setDate(oldDay.getDate() - 365);
      return getUTCDate(oldDay);
    ;

    $scope.popup1 = 
      opened: false
    ;
    $scope.popup2 = 
      opened: false
    ;
    $scope.open1 = function() 
      $scope.popup1.opened = true;
    ;

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

    let endDate = getUTCDate(new Date('2021-01-03'));
    let startDate = getMinDateFromEndDate(endDate)
    $scope.logVariables = 
      startDate: startDate,
      endDate: endDate
    
    $scope.format = 'dd-MM-yyyy';
    $scope.altInputFormats = ['M!/d!/yyyy'];


    $scope.dateOptions = 
      formatYear: "yyyy",
      minDate: startDate,
      maxDate: endDate,
      startingDay: 1
    ;


    $scope.formatDateModal = function() 
      console.log($scope.logVariables)
    


  ]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="dateExample">
  <div ng-controller="ExampleController">
    <div class="row">
      <div class="col-sm-3 col-md-3">
        <label for="sel1">Label 1</label>
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="format" ng-model="logVariables.startDate" ng-change="formatDateModal()" ng-model-options="timezone: 'UTC'" is-open="popup1.opened" datepicker-options="dateOptions" close-text="Close"
            alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
        </p>
      </div>
      <div class="col-sm-3 col-md-3">
        <label for="sel1">Label 2</label>
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="format" ng-model="logVariables.endDate" ng-change="formatDateModal()" ng-model-options="timezone: 'UTC'" is-open="popup2.opened" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats"
          />
          <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>
    </div>
  </div>
</div>