Question

我正在使用** angular bootstap **的日期选择器。我想在点击按钮时显示datepicker ..但是当我运行我的plunker时显示我的datepicker。如何在按钮点击时显示日期选择器。如果用户选择任何日期。它应该显示在按钮文字上？我如何将按钮文本设置为选定日期.. 这是我的代码 http://plnkr.co/edit/dTaCRAzS7t21uKL2MQBF?p=preview

我正在使用它 https://angular-ui.github.io/bootstrap/

<body ng-app='app'>
    <div ng-controller='cntrl'>
      {{3+4}}
      <button ng-click='openDate()'>{{open_date_picker}}</button>
      <div style="display:inline-block; min-height:290px;">
      <uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
    </div>

    </div>


  </body>

</html>

Answer 1

以下是解决问题的代码

HTML

  <button ng-click='showDate=true'>{{dt | date:'fullDate' }}</button>
  <div style="display:inline-block; min-height:290px;">
  <uib-datepicker ng-show="showDate" ng-model="dt" min-date="minDate" 
  show-weeks="true" class="well well-sm" 
  custom-class="getDayClass(date, mode)"></uib-datepicker>

JS控制器代码

angular.module('app',['ui.bootstrap']).controller('cntrl',function($scope){
  $scope.dt = "opendate";
})

此代码仅显示单击按钮的日期。单击按钮后无法隐藏。要隐藏日历，只需设置showDate=false即可。

这是Plunker http://plnkr.co/edit/1ZYTUvMPoTOG4L09j34N?p=preview，它可以在点击按钮时切换日期控件，并将按钮文本更新为所选日期。只需格式化日期即可。

如何在点击按钮时显示datepicker？

1 个答案: