[英]AngularJS - Bootstrap Material Datetimepicker not working
我正在使用這個datetimepicker作為我的angularjs項目。 頭標記中包含jquery,moment,datetimepicker。 我的輸入是在ng-repeat中,我在控制器中初始化了datetimepicker。 但是,當我點擊輸入時,它仍然沒有顯示。 這是我的代碼 -
HTML
<div class="numeric-type" ng-show="f.type == 'dateBased_filter'">
<input type="text" id="date">
</div>
JS
setTimeout(function(){
$('#date').bootstrapMaterialDatePicker({
format: 'D MMM YYYY',
year: true,
date: true,
time: false,
clearButton: true,
maxDate: moment()._d,
change: function(event, date){
console.log(event);
console.log(date);
}
});
},2000);
直接從angularjs材料組件中檢查此codepen https://codepen.io/anon/pen/rvQojz
docs https://material.angularjs.org/latest/api/directive/mdDatepicker
HTML
<md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
<div layout-gt-xs="row">
<div flex-gt-xs="">
<h4>Standard date-picker</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"></md-datepicker>
</div>
<div flex-gt-xs="">
<h4>Disabled date-picker</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" disabled=""></md-datepicker>
</div>
</div>
<div layout-gt-xs="row">
<div flex-gt-xs="">
<h4>Opening the calendar when the input is focused</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-open-on-focus=""></md-datepicker>
</div>
<div flex-gt-xs="">
<h4>Date-picker that goes straight to the year view</h4>
<md-datepicker ng-model="ctrl.myDate" md-current-view="year" md-placeholder="Enter date"></md-datepicker>
</div>
</div>
<div layout-gt-xs="row">
<div flex-gt-xs="">
<h4>Custom calendar trigger</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-is-open="ctrl.isOpen"></md-datepicker>
<md-button class="md-primary md-raised" ng-click="ctrl.isOpen = true">Open</md-button>
</div>
<div flex-gt-xs="">
<h4>Date-picker that only allows for the month to be selected</h4>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-mode="month"></md-datepicker>
</div>
</div>
</md-content>
JavaScript的
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']).controller('AppCtrl', function() {
this.myDate = new Date();
this.isOpen = false;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.