javascript - AngularJS - UI Bootstrap Datepicker

AngularJS新增功能。我想在我的項目中實現datepicker。我正在使用angular.min.js版本AngularJS v1.5.0-rc.1 ui-bootstrap-tpls-0.12.0.js版本0.12.0。我在網上遇到很多例子。如何在angularjs中實現datepicker。我在我的應用程序中使用了下面的代碼。javascript - AngularJS - UI Bootstrap Datepicker

app.directive('datepicker', function() { 
return { 
    restrict: 'A', 
    require : 'ngModel', 
    link : function (scope, element, attrs, ngModelCtrl) { 
     $(function(){ 
      element.datepicker({ 
       dateFormat:'dd/mm/yy', 
       onSelect:function (date) { 
        scope.$apply(function() { 
         ngModelCtrl.$setViewValue(date); 
        }); 
       } 
      }); 
     }); 
    } 
} 
});

並在我的HTML頁面中，我用這樣的。

<input type="text" ng-model="endDate" datepicker>

以下

的輸出正在逐漸

我怎樣才能解決這個問題？無言以對。請幫助我解決這個問題。

在此先感謝。

來源

2016-03-29 Kaushi

是否有你試圖使用此指令的原因，而不是僅僅使用由ui-bootstrap提供的datepicker？ –

這是用於ui-bootstrap的documentation。

以下是他們的plunkr演示了datepicker的多種用法，包括內聯日期選擇器和彈出式版本。

HTML內聯日期選擇應該是這個樣子

<div style="display:inline-block; min-height:290px;"> 
     <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="inlineOptions"></uib-datepicker> 
    </div>

確保正確裝入/引用UI，引導和角在您的項目。

來源

2016-03-29 14:28:18

問題與bootstrap和angular.min.js文件的排序有關。第一個jQuery，第二個jQuery-ui和第三個angular.min.js。通過這樣做，它開始工作。 – Kaushi

很高興你的工作。 –

plnkr鏈接已損壞。 –

javascript - AngularJS - UI Bootstrap Datepicker

回答

相關問題