Я пытаюсь сделать директиву для datepicker, потому что у меня есть несколько полей ввода даты в форме и поэтому хотелось бы повторно использовать код. Я пробовал много версий, которые я видел во всем Интернете, но у меня проблемы. Мне бы хотелось, чтобы при входе/клике пользователя в поле им был представлен календарь, в котором они могут выбрать дату.Угловая и Datepicker как директива
Ниже приведена последняя версия того, что я пытаюсь.
Моя директива:
var app = angular.module('myApp.directives', []);
app.directive('ngDate', function() {
return {
restrict: 'A',
require : 'ngModel',
link : function (scope, element, attrs, ctrl) {
element.datepicker({
changeYear:true,
changeMonth:true,
dateFormat:'dd/M/yy',
onSelect:function (date) {
ctrl.$setViewValue(date);
scope.$apply();
}
});
}
};
});
Мой HTML для одного поля:
<input type='text' data-ng-model='programDetails.requestDate' data-ng-date=''>
Что происходит с этим, я получаю сообщение об ошибке сказав:
TypeError: element.datepicker is not a function
Любые идеи относительно того, что Мне не хватает? Я попробовал немало, и большинство из них дают мне ошибку, которая очень похожа. Моя цель - добавить еще 4 строки HTML для 4 других полей даты.
EDIT: я в конечном итоге получить DatePicker Bootstrap работать .... НО ... У меня есть четыре из них на экране в течение 4 разных дат. Проблема в том, что когда кто-то открывается, все они открываются ... Мне нужно, чтобы он открывался одновременно. Я предполагаю, что мне как-то нужно каким-то образом связать открытие/закрытие с каждой датой.
Вот новый HTML для одного из полой даты (каждый выглядят одинаково, просто разные нг-модель):
<span class="input-group" >
<input type="text" class="input-sm " datepicker-popup="{{format}}" ng-model="programDetails.startDate" is-open="opened" datepicker-options="dateOptions" ng-focus="open($event)" ng-click="open($event)" close-text="Close" ng-change="updateDate(programDetails.startDate)" />
<span class=" input-sm" >
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</span>
Controller:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
Как связать открытый для каждого конкретного поля даты?
спасибо. Я попытался использовать angular-datepicker (я загрузил js-файлы) и думаю, что сделал изменения HTML ... теперь, по крайней мере, я не получаю ошибок, но он не появляется с календарем. думаю, я все еще не делаю это правильно. – user3861284