JQuery ui datepicker с Angularjs
Я хочу использовать jQuery UI datepicker с помощью AngularJS.
У меня есть образец, но мой код не работает.
Пример:
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'.
Ответы
Ответ 1
У меня почти такой же код, как вы и мои работы.
У вас есть 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();
}
});
}
};
});
Вам также понадобится приложение ng-app = "где-то в вашем HTML
Ответ 2
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();
}
});
}
};
});
Ответ 3
Как наилучшая практика, особенно если у вас есть несколько механизмов выбора даты, вы не должны жестко указывать имя переменной области элемента.
Вместо этого вы должны получить нажатый вход 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 (Вложенные элементы), я изменил свой ответ
Ответ 4
Наконец, я смог запустить директиву datepicker в angular js, вот указатели
включают следующие 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
};
ПРОЧИТАЙТЕ ЭТО ВМЕСТО в 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">
Это дает встроенный datepicker, а дата устанавливается в ng-модели и может использоваться для дальнейшей обработки и проверки.
Обнаружил это после много успешной борьбы с предыдущим подходом.:)
Ответ 5
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>
script
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();
});
}
};
});
Ответ 6
К сожалению, ответ виконта не работал у меня, поэтому я искал другое решение, которое так же изящно и работает для вложенных атрибутов в ng-модели. Он использует $parse и обращается к ng-модели через attrs в функции привязки, а не требует:
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);
});
}
});
});
}
});
Источник: ANGULAR.JS BINDING TO JQUERY UI (пример DATEPICKER)
Ответ 7
Я изменил код и завернул обновление обновления внутри $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://jsfiddle.net/hsfid/SrDV2/1/embedded/result/
Ответ 8
Лучшая статья, которую я нашел, следующая:
http://www.abequar.net/posts/jquery-ui-datepicker-with-angularjs
Потребовалось 20 минут, чтобы интегрировать его с моей страницей.
Ответ 9
Вот мой код -
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();
}
});
}
};
});
Ответ 10
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 />
Ответ 11
Основной файл Index.html для Angular может использовать тег body как ng-view. Тогда все, что вам нужно сделать, это включить тег script в нижней части любой страницы, которая втягивается в Index.html с помощью Angular следующим образом:
<script type="text/javascript">
$( function() {
$( "#mydatepickerid" ).datepicker({changeMonth: true, changeYear: true,
yearRange: '1930:'+new Date().getFullYear(), dateFormat: "yy-mm-dd"});
});
</script>
Зачем компрометировать вещи?
Ответ 12
У меня была та же проблема, и она была решена путем размещения ссылок и включений в следующем порядке:
<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>
Ответ 13
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();
});
Ответ 14
Я думаю, что в объявлении модуля отсутствует Angular ust bootstrap зависимость, например:
angular.module('elnApp', ['ui.bootstrap'])
Смотрите doc для Angular -ui-bootstrap.
