如何在点击按钮时显示日期选择器？

我正在使用**角引导日期选择器**。我想单击按钮时显示日期选择器..但我的日期选择器显示当我运行我的plunker。如何显示日期选择器按钮单击。如果用户选择任何日期。它应该显示在按钮文本上？我如何设置按钮的文本为选定的日期.. 这里是我的代码 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>

来源

2016-01-20 user944513

下面是代码来解决该问题

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，它在点击按钮时切换日期控件，并将按钮文本更新为选定的日期。只是格式化日期，但它是必需的。

来源

2016-01-20 15:02:54

如何在点击按钮时显示日期选择器？

回答

相关问题