AngularJS - 引导材料日期时间选择器不工作

Question

我将这个datetimepicker 用于我的 angularjs 项目。在 head 标签中包含 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);

Answer 1

直接从 angularjs 材料组件中检查此代码笔 https://codepen.io/anon/pen/rvQojz

文档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;
});