Angularjsを使用したjQuery UI Datepicker
AngularJSでjQuery UI datepickerを使用したい。
サンプルがありますが、コードが機能していません。
サンプル：
http://www.abequar.net/jquery-ui-datepicker-with-angularjs/
私のコード：
<input id="sDate" name="programStartDate" type="text" datepicker required/>
angular.module('elnApp')
.directive('datepicker', function () {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ngModelCtrl) {
$(function(){
element.datepicker({
dateFormat:'yy-mm-dd',
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
});
});
}
} });
エラーTypeError: Object [object Object] has no method 'datepicker'が表示されます。
私はあなたと私の作品とほぼ同じコードを持っています。
ページにjQueryUI.jsが含まれていますか？
フィドルがあります ここ
<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}
var datePicker = angular.module('app', []);
datePicker.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'DD, d MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});
HTMLのどこかにng-app = "app"も必要です。
angular.module('elnApp')
.directive('jqdatepicker', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
$(element).datepicker({
dateFormat: 'dd.mm.yy',
onSelect: function(date) {
ctrl.$setViewValue(date);
ctrl.$render();
scope.$apply();
}
});
}
};
});
ベストプラクティスとして、特に複数の日付ピッカーがある場合は、要素のスコープ変数名をハードコーディングしないでください。
代わりに、クリックされた入力のng-modelを取得し、onSelectメソッド内の対応するスコープ変数を更新する必要があります。
app.directive('jqdatepicker', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
var ngModelName = this.attributes['ng-model'].value;
// if value for the specified ngModel is a property of
// another object on the scope
if (ngModelName.indexOf(".") != -1) {
var objAttributes = ngModelName.split(".");
var lastAttribute = objAttributes.pop();
var partialObjString = objAttributes.join(".");
var partialObj = eval("scope." + partialObjString);
partialObj[lastAttribute] = date;
}
// if value for the specified ngModel is directly on the scope
else {
scope[ngModelName] = date;
}
scope.$apply();
}
});
}
};
});
編集
@Romainが提起した問題（ネストされた要素）に対処するために、答えを修正しました
最終的にangular jsでdatepickerディレクティブを実行できました。ここにポインターがあります
次のJSを順番に含める
- jquery.js
- jquery-ui.js
- angular-min.js
以下を追加しました
<script src="http://code.jquery.com/jquery-1.10.2.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>
hTMLコードで
<body ng-app="myApp" ng-controller="myController">
// some other html code
<input type="text" ng-model="date" mydatepicker />
<br/>
{{ date }}
//some other html code
</body>
jsでは、最初にディレクティブのコードを作成し、その後コントローラのコードを追加してください。そうしないと問題が発生します。
日付ピッカーディレクティブ：
var app = angular.module('myApp',[]);
app.directive('mydatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'DD, d MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});
上記の回答から参照されたディレクティブコード。
このディレクティブの後、コントローラーを記述します
app.controller('myController',function($scope){
//controller code
};
TRY THIS INSTEAD in angular js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
jquery.jsおよびjquery-ui.jsとともに
angular js datepickerを次のように実装できます。
<input type="date" ng-model="date" name="DOB">
これにより、組み込みの日付ピッカーが提供され、日付がng-modelで設定され、さらなる処理と検証に使用できます。
これは、以前のアプローチで多くの成功したヘッドバンギングの後に見つかりました。 :)
onSelectはng-repeatではうまく機能しないため、イベントバインドを使用して別のバージョンを作成しました
html
<tr ng-repeat="product in products">
<td>
<input type="text" ng-model="product.startDate" class="form-control date-picker" data-date-format="yyyy-mm-dd" datepicker/>
</td>
</tr>
脚本
angular.module('app', []).directive('datepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker();
element.bind('blur keyup change', function(){
var model = attrs.ngModel;
if (model.indexOf(".") > -1) scope[model.replace(/\.[^.]*/, "")][model.replace(/[^.]*\./, "")] = element.val();
else scope[model] = element.val();
});
}
};
});
残念ながら、vicontの答えは私にはうまくいきませんでしたので、ng-modelのネストされた属性に対しても同様にエレガントで機能する別のソリューションを探しました。それは$ parseを使用し、それを要求する代わりにリンク関数のattrsを通してngモデルにアクセスします：
myApp.directive('myDatepicker', function ($parse) {
return function (scope, element, attrs, controller) {
var ngModel = $parse(attrs.ngModel);
$(function(){
element.datepicker({
...
onSelect:function (dateText, inst) {
scope.$apply(function(scope){
// Change binded variable
ngModel.assign(scope, dateText);
});
}
});
});
}
});
コードを変更し、$ apply（）内でビューの更新をラップしました。
link: function (scope, elem, attrs, ngModelCtrl){
var updateModel = function(dateText){
// call $apply to update the model
scope.$apply(function(){
ngModelCtrl.$setViewValue(dateText);
});
};
var options = {
dateFormat: "dd/mm/yy",
// handle jquery date change
onSelect: function(dateText){
updateModel(dateText);
}
};
// jqueryfy the element
elem.datepicker(options);
}
私が見つけた最高の記事は次のとおりです： http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs
私のページと統合するのに20分かかりました。
AngularのメインIndex.htmlファイルは、ngタグとしてbodyタグを使用できます。あとは、AngularによってIndex.htmlに取り込まれるページの下部にスクリプトタグを含めるだけです。
<script type="text/javascript">
$( function() {
$( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true,
yearRange: '1930:'+new Date().getFullYear(), dateFormat: "yy-mm-dd"});
});
</script>
なぜ物事が複雑すぎるのですか??
これが私のコードです
var datePicker = angular.module('appointmentApp', []);
datePicker.directive('datepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function (date) {
scope.appoitmentScheduleDate = date;
scope.$apply();
}
});
}
};
});
var selectDate = element.datepicker({
dateFormat:'dd/mm/yy',
onSelect:function (date) {
ngModelCtrl.$setViewValue(date);
scope.$apply();
}
}).on('changeDate', function(ev) {
selectDate.hide();
ngModelCtrl.$setViewValue(element.val());
scope.$apply();
});
myModule.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function (date) {
var ar=date.split("/");
date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
ngModelCtrl.$setViewValue(date.getTime());
// scope.course.launchDate = date;
scope.$apply();
}
});
}
};
});
HTMLコード：
<input type="text" jqdatepicker ng-model="course.launchDate" required readonly />
私は同じ問題を抱えていましたが、参照とインクルードをこの順序で置くことで解決しました：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
var datePicker = angular.module('app', []);
datePicker.directive('jqdatepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
};
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<body ng-app="app">
<input type="text" ng-model="date" jqdatepicker />
<br/>
{{ date }}
</body>