日期時間選擇器是不是在角UI模式工作

我有一個模式，其利用的角度UI模式日期時間選擇器是不是在角UI模式工作

$scope.pdcPayment = function() { 


    var modalInstance = $modal.open({ 
     templateUrl: 'pdc.html', 
     windowClass: 'app-modal-window', 
     backdrop: true, 
     keyboard: false, 
     modalFade: true, 
     scope: $scope, 
     controller: function ($scope, $modalInstance, $http) { 
      $scope.submitMyForm = function (form) { 
       if (form.bookingForm.$valid) { 
        $modalInstance.dismiss('cancel'); 

       } 
       else { 

       } 
      }; 

      $scope.cancel = function() { 
       $modalInstance.dismiss('cancel'); 
      }; 
     } 
    }); 
};

這裏得到開放的是我的html：

<div class="col-xs-4 form-group"> 
         <label class="col-xs-12" for="pdcDatePicker">Date on Cheque: </label> 
         <div class="col-xs-12"> 
          <input type="text" id="pdcDatePicker" name="pdcDatePicker" class="form-control"/> 
         </div>

還請看看我用來調用日期時間選擇器的方法：

<script> 


    jQuery('#pdcDatePicker').datetimepicker();

出於某種原因，當我點擊文本框

來源

2017-10-16 Harish

您使用日期選擇哪個庫？ –

@ hame-dhib https://xdsoft.net/jqplugins/datetimepicker/#TimePicker – Harish

在你的情況下問題是角度執行jQuery（'＃pdcDatePicker'）。datetimepicker（）之前收取你的HTML模式。 –

這裏的日期時間選擇器是不是shwn是我用在UI模態一個datepicker，一旦你有正確的日期選擇器庫是會很容易。

我用這個原生角JS日期選擇器library
按照建立這個庫上使用this page列出的步驟，一旦設置了這一點，下面的代碼示例將幫助您展示日期時間選擇器上的UI模式，我希望你沒有使用UI模式本身的麻煩。

這是我的html代碼，把它放在你的pdc.html模板html裏面。

<div class="form-group col-md-6"> 
<label class="font-bold small">Date on Cheque:</label> 
<div class="dropdown"> 
    <a class="dropdown-toggle" id="dateModelId" role="button" data-toggle="dropdown" data-target="#" href="#"> 
     <div class="input-group dropdown"> 
      <input type="text" 
        name="date" 
        class="form-control" 
        data-ng-model="dateModel"> 
      <span class="input-group-addon"> <i class="fa fa-calendar"></i></span> 
     </div> 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     <datetimepicker 
       data-ng-model="dateModel" 
       data-datetimepicker-config="{startView:'day', minView:'day',dropdownSelector: '#dateModelId' }"> 
     </datetimepicker> 
    </ul> 
</div>

和你的角度代碼將不會有任何不同，因爲這個日期選擇器是原生角的js庫，沒有必要寫jQuery代碼，您可以通過訪問$獲取數據scope.dateModel。

如果你想知道我是如何從我的主控制器觸發UI模式的，在這裏。

$scope.onShowDialog = function (ev) { 
     $mdDialog.show({ 
      controller: 'dialogController', 
      templateUrl: 'pdc.html', 
      parent: angular.element(document.body), 
      targetEvent: ev, 
      clickOutsideToClose: false, 
      hasBackdrop: false, 
      escapeToClose: true, 
     }) 
      .then(function (answer) { 

      }, function() { 

      }); 
    }

控制器可以是嵌入式的，也可以是對項目內對話框控制器的調用，如上所示。

這是你如何調用該對話框然後，

<a class="btn btn-default" type="button" ng-click="onShowDialog('$event)"> 
      Show Dialog</a>

來源

2017-10-16 13:23:21 robivictor

我認爲你不明白這個問題 –

如果你想要實現的是在UI模式中顯示日期時間選擇器，那麼這應該工作得很好。不過這可能是一個不同的實現。 – robivictor

日期時間選擇器是不是在角UI模式工作

回答

相關問題