日期时间选择器是不是在角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();

出于某种原因，当我点击文本框

您使用日期选择哪个库？ –

@ 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>

我认为你不明白这个问题 –

如果你想要实现的是在UI模式中显示日期时间选择器，那么这应该工作得很好。不过这可能是一个不同的实现。 – robivictor

日期时间选择器是不是在角UI模式工作

相关推荐