angular-ui datepicker max-date 无法正常工作 [英] angular-ui datepicker max-date doesn't work properly

查看：18 发布时间：2021/11/10 3:55:54 javascript angularjs datepicker angular-ui

本文介绍了angular-ui datepicker max-date 无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试从 datepicker-options 设置 min-date 和 max-date，但没有成功.附上代码片段.

有什么帮助吗?谢谢！

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {$scope.today = function() {$scope.dt = new Date();};$scope.today();$scope.dateOptions = {formatYear: 'yy',minDate: '05/01/2015',起始日:1};$scope.formats =['dd/MM/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];$scope.format = $scope.formats[0];var 明天 = 新日期();明天.setDate(tomorrow.getDate() + 1);var afterTomorrow = new Date();afterTomorrow.setDate(tomorrow.getDate() + 2);$scope.events =[{日期:明天，状态:'满'},{日期:明天之后，状态:'部分'}];$scope.getDayClass = 函数(日期，模式){如果(模式 === '天'){var dayToCheck = new Date(date).setHours(0,0,0,0);for (var i=0;i<$scope.events.length;i++){var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);if (dayToCheck === currentDay) {返回 $scope.events[i].status;}}}返回 '';};});

<html ng-app="ui.bootstrap.demo"><头><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script><script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script><link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="样式表"><身体><风格>.full 按钮跨度 {背景色:柠檬绿；边框半径:32px；颜色:黑色;}.部分按钮跨度{背景颜色:橙色；边框半径:32px；颜色:黑色;}</风格><div ng-controller="DatepickerDemoCtrl"><pre>选择的日期是:<em>{{dt |日期:'fullDate' }}</em></pre><h4>内联</h4><div style="display:inline-block; min-height:290px;"><datepicker ng-model="dt" datepicker-options="dateOptions" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>

</html>

解决方案

<datepicker ng-model="dt" minDate="'05/01/2015'" datepicker-options="dateOptions" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>试试这个，把minDate放在标记中

I am trying to get the min-date and max-date to be set from the datepicker-options, but have been unsuccessful. A code snippet is attached.

Any help? Thanks!

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.dateOptions = {
    formatYear: 'yy',
    minDate: '05/01/2015',
    startingDay: 1
  };

  $scope.formats =['dd/MM/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 2);
  $scope.events =
    [
      {
        date: tomorrow,
        status: 'full'
      },
      {
        date: afterTomorrow,
        status: 'partially'
      }
    ];

  $scope.getDayClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i=0;i<$scope.events.length;i++){
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>
<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

    <h4>Inline</h4>
    <div style="display:inline-block; min-height:290px;">
      <datepicker ng-model="dt" datepicker-options="dateOptions" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
    </div>
</div>
  </body>
</html>

解决方案

<datepicker ng-model="dt" minDate="'05/01/2015'" datepicker-options="dateOptions" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker> try this, put the minDate in the markup

这篇关于angular-ui datepicker max-date 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

angular-ui datepicker max-date 无法正常工作 [英] angular-ui datepicker max-date doesn't work properly

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

angular-ui datepicker max-date 无法正常工作 [英] angular-ui datepicker max-date doesn&#39;t work properly

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

angular-ui datepicker max-date 无法正常工作 [英] angular-ui datepicker max-date doesn't work properly

登录关闭