如何禁用json响应日期数组angularjs datepicker示例

时间:2017-10-02 12:35:27

标签: angularjs datepicker angular-ui-bootstrap

我想从日期数组(从json响应中检索)开始创建一个popupDatePicker但是在互联网上查找它我找不到任何尊重我的问题的简单示例。在我的代码中它不起作用......

这是我的例子.js:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
    $scope.myDisabledDates =  ['2017-09-22T09:13:00.000Z','2017-09-23T09:13:00.000Z']
  $scope.options = {
    dateDisabled: disabled,
    startingDay: 1
  };
  $scope.formats = ['yyyy-MM-ddTHH:mm:ssZ', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];  
 /*  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };
  $scope.popup1 = {
    opened: false
  };*/
  function disabled(data) {
    var date = data.date.toISOString().slice(0, 10), 
      mode = data.mode;

    return mode === 'day' && $scope.myDisabledDates.indexOf(date) > -1;
  }
});

和index.html:

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

<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

    <div style="display:inline-block; min-height:290px;">
      <div uib-datepicker ng-model="dt"  class="well well-sm" datepicker-options="options"></div>  
    </div>
</div>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

您当前代码的问题在于您正在针对24个字符的字符串评估10个字符的字符串。要解决此问题,请将disabled()的返回值更改为:

return mode === 'day' && $scope.myDisabledDates.some(function(x) {
  return x.slice(0, 10) === date;
});

或者在不支持箭头功能(IE)的浏览器中:

{{1}}