uib-datepicker-popup不显示日历

本雅明·萨里格(BünyaminSarıgül)

我正在使用Express和AngularJS。我试图用ui-bootstrap模块添加日期选择器。当我添加uib-datepicker时,它可以正常工作。但是当我尝试添加uib-datepicker-popup时,结果是这样的

uib-datepicker-popup

当我单击日历按钮时,它会显示一个弹出窗口,但只有今天,清除和关闭按钮。它不显示日历。

这是我的html

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


  <div class="col-md-6">
    <p class="input-group">
      <input type="text" uib-datepicker-popup class="form-control" ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <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>

和控制器

app.controller('DatepickerPopupDemoCtrl', function ($scope) {


$scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function() {
    $scope.dt = null;
  };

    $scope.toggleMin = function() {
    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
  };


  $scope.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

  $scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
    maxDate: new Date(2020, 5, 22),
    minDate: new Date(),
    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.toggleMin();

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

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

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

  $scope.popup2 = {
    opened: false
  };

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

  function getDayClass(data) {
    var date = data.date,
      mode = data.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 '';
  }
});

这是我接受代码的文档:https : //angular-ui.github.io/bootstrap/

提前致谢。

萨达南德·帕特尔

您应该将玉与angularjs一起使用。如果要添加日期选择器弹出窗口,则可以将以下代码用于html

<input type="text" uib-datepicker-popup="" name="dob" placeholder="Please enter date in YYYY-mm-dd format" 
  ng-model="dob" is-open="popup2.opened" datepicker-options="dateOptions"
  ng-required="true" close-text="Close" class="form-control"/>
<span class="input-group-btn">
  <button type="button" ng-click="open2()" class="btn btn-default">
    <i class="glyphicon glyphicon-calendar"></i>
  </button>
</span>

并将其添加到您的控制器中

$scope.dateOptions = {
  formatYear: 'yy',
  maxDate: new Date(2020, 5, 22),
  minDate: new Date(1970, 1, 1),
  startingDay: 1
};
$scope.open = function() {
  $scope.popup.opened = true;
};
$scope.popup = {
  opened: false
};
function getDayClass(data) {
  var date = data.date,
  mode = data.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 '';
}

这在您的css文件中

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在uib-tab中的第一个打开/关闭事件后,AngularJS uib-datepicker不显示日历

来自分类Dev

jquery datepicker不显示日历

来自分类Dev

bootstrap 3 datepicker不显示日历

来自分类Dev

Bootstrap 3 Datepicker不显示日历

来自分类Dev

jQuery datepicker 在点击时不显示日历

来自分类Dev

如何打开第一年uib-datepicker-popup?[AngularJS]

来自分类Dev

ng-click 不适用于 uib-datepicker-popup

来自分类Dev

uib-datepicker动态最小日期angularjs

来自分类Dev

如何从uib-datepicker编辑datepicker / day.html

来自分类Dev

uib-datepicker 中的条件最小和最大日期

来自分类Dev

jQuery Datepicker不显示

来自分类Dev

如何在FXML中仅显示JavaFX DatePicker日历弹出窗口而不显示ComboBox?

来自分类Dev

显示隐藏jquery datepicker日历

来自分类Dev

显示隐藏jQuery Datepicker日历

来自分类Dev

我可以在不显示日历的情况下使用DatePicker吗?

来自分类Dev

Bootstrap-DatePicker不显示

来自分类Dev

JQUERY UI DatePicker日历未显示

来自分类Dev

修改的react-datepicker不显示值

来自分类Dev

使用材质设计的DatePicker不显示

来自分类Dev

Android DatePicker微调器不显示

来自分类Dev

Uib-popover应该显示有限的字符

来自分类Dev

选择的值未通过 uib-typeahead 显示

来自分类Dev

DatePicker作为只读日历

来自分类Dev

DatePicker作为只读日历

来自分类Dev

Angular Material DatePicker日历显示在Angular Modal后面

来自分类Dev

Bootstrap Datepicker 2.0在月视图中显示日历

来自分类Dev

JavaFX从DatePicker提取日历弹出窗口/仅显示弹出窗口

来自分类Dev

Boostrap datepicker显示IE中页面加载的日历

来自分类Dev

在jQuery中克隆后,Bootstrap Datepicker未显示日历

Related 相关文章

热门标签

归档