在Angular JS中使用日期選擇器的最快和最簡單的方法是什麼？

我是AngularJS的初學者，並試圖使用日期選擇器。我試圖使用簡單的jQuery UI基於日期選擇器。但它沒有按預期工作。那麼有人會幫助我使用一些代碼來實現角度js最簡單的方法嗎？我已經嘗試使用720kb角度日期選擇器，我遵循指示，沒有任何反應沒有錯誤沒有任何東西！在Angular JS中使用日期選擇器的最快和最簡單的方法是什麼？

app.js：

// Included in dependency injection. 
let app = angular.module('mainApp', [ 
    '720kb.datepicker', 'ngRoute', 'fetchModule' ]);

main.html中頁：

// Added stylesheet 
<!-- Angular Datepicker --> 
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.17/angular-datepicker.min.css"> 
// and the js file at the end of the main page. 
<!-- Angular Date Picker --> 
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.17/angular-datepicker.min.js"> 
</script>

模板：

// This is in the template that loads into view 
<datepicker> 
    <input ng-model="date" type="text"/> 
</datepicker>

最後檢查所有的.js的順序在main.html中：

<!-- jQuery --> 
<script src="/assets/vendor/jquery/jquery.min.js"></script> 
<!-- Bootstrap Core JavaScript --> 
<script src="/assets/vendor/bootstrap/bootstrap.min.js"></script> 
<!-- Angular --> 
<script src="/app/angular.min.js"></script> 
<!-- Angular Date Picker --> 
<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-datepicker/2.1.17/angular-datepicker.min.js"> 
</script> 
<!-- Angular Router --> 
<script src="/app/angular-route.min.js"></script> 

<!-- Angular App --> 
<script src="/app/app.js"></script> 
<!-- Fetch Module --> 
<script src="/app/fetch/fetchModule.js"></script> 
<script src="/app/fetch/controllers.js"></script>

來源

2017-05-02 John foo

使用datepicker從angular-ui-bootstrap這是寫的angular-ui團隊，你不需要jQuery的，這是所有的角。

（如果可能，嘗試，因爲這兩個角度& jQuery的是沉重的庫不使用jQuery和有幾乎所有可用的角度，可用於jQuery的，例如：日期選擇器）

來源

2017-05-02 13:04:40

var myDate = angular.module('myDate', []); 
 

 
myDate.directive("datepicker", function() { 
 
    return { 
 
    restrict: "A", 
 
    require: "ngModel", 
 
    link: function (scope, elem, attrs, ngModelCtrl) { 
 
     var updateModel = function (dateText) { 
 
     scope.$apply(function() { 
 
      ngModelCtrl.$setViewValue(dateText); 
 
     }); 
 
     }; 
 
     var options = { 
 
     dateFormat: "dd/mm/yy", 
 
     onSelect: function (dateText) { 
 
      updateModel(dateText); 
 
     } 
 
     }; 
 
     elem.datepicker(options); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>  
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<div id="main_continer" ng-app="myDate"> 
 
    <input type="text" ng-model="datePicker" datepicker /> 
 
</div>

來源

2017-05-02 13:18:27

如有任何問題，請回復我。 –

在Angular JS中使用日期選擇器的最快和最簡單的方法是什麼？

回答

相關問題