Problem Question - I am trying to build a directive for the datepicker. But somehow it is not showing the calender popup box. I have tried and looked into most of the post out there. I know it something simple but can't figure this out. Below is my directive
angular.module('App').directive('myDatePicker',function(){
return{
restrict: 'AE',
template:'<input is-open="opened" type="text" datepicker-popup="d/m/yyyy" ng-model="Date" ng-required="true" />'+
'<button type="button" ng-click="open()"></button>',
controller: function($scope){
$scope.open = function () {
$scope.opened = true;
console.log('I am working');
};
}
};
});
HTML
<div my-date-picker></div>
Please guide me where I am making mistake.
Related
could you please tell me how to open bootstrap datepicker in angular js .I have two field name and data.I want to open datepicker on click of date field .here is my code
http://plnkr.co/edit/elrOTfEOMmUkPYGmKTdW?p=preview
var app = angular.module('plunker', ['angularMoment']);
app.controller('MainCtrl', function($scope, moment) {
$scope.name = 'World';
console.log(moment)
var d = new Date(613938600000);
$scope.c = {
name: {
name: 'abc'
},
date: {
name: moment(d).format('DD-MMM-YYYY')
}
};
$scope.onclick = function() {
if (!moment($scope.c.date.name).isValid()) {
alert('Everything is wrong dude');
} else {
alert('Everything goood');
}
}
});
any update
Please replace the input field with this.
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="x.name" is-open="open" data-ng-click="open = true" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
I have added these directives at the input
<... is-open="open" data-ng-click="open = true" ...>
Add these to directives to your datepicker inputs.
This is should work. Try in your plunker
Not sure if you want to go this route, but my suggestion would be to leverage UI Bootstrap. Opening a datepicker is made fairly easy with this library, along with other bootstrap functionality without having to port bootstrap entirely.
In my app I make frequent use of a checkbox. Given the repetitiveness I wanted to make a custom directive out of it, but when I call the directive in my html it does not check the checkbox. I cannot figure out what I am missing. Any suggestions would be appreciated.
HTML
<div class="col-xs-12 col-sm-9 col-md-9">
<input type="checkbox"
class="form-control"
name="{{attrs.name}}"
id="{{attrs.id}}"
data-ng-model="model">
<label for="{{attrs.id}}">
<span>{{labelText}}</span>
</label>
</div>
JS
(function () {
'use strict';
angular
.module('app.directives')
.directive('ccCheckBox', checkbox);
checkbox.$inject = [];
/* #ngInject */
function checkbox() {
return {
restrict: 'E',
scope: {
model: '=',
labelText: '#'
},
templateUrl: './src/_directives/checkbox.html',
link: CheckBox
};
function CheckBox(scope, attrs){
activate();
function activate(){
scope.attrs = attrs;
}
}
}
})();
Called in my code as
..
<cc-check-box
data-label-text="Test CheckBox Label"
data-name="checkBoxGrp"
data-id="myCheckBox"
data-for="myCheckBox"
data-ng-model="vm.model.myCheckBoxValue">
</cc-check-box>
No errors in the dev tools console.
You cannot set data-ng-model to bind with model attr.
You should use model (as you defined into the isolated scope) or data-model.
<cc-check-box
data-label-text="Test CheckBox Label"
data-name="checkBoxGrp"
data-id="myCheckBox"
data-for="myCheckBox"
data-model="vm.model.myCheckBoxValue"
></cc-check-box>
I am new to Angular 1 and need to implement Angular date picker to allow only year picker (graduation year) it should be from current year till 1950.
I tried using jQuery but it did not work and it seems its not compatible with Angular.
Please suggest how to implement it in Angular 1.5. The current implementation is from hard coded JSON object.
I made this plnkr for you, hope that helps you.
Two inputs, with bootstrap.
<input type="text" class="form-control date" id="from" placeholder="From" ng-click="app.dateFrom=true" datepicker-popup="{{app.format}}" ng-model="app.dtFrom" is-open="app.dateFrom" min-date="1970-04-06" max-date="'2017-04-06'" datepicker-options="myapp.dateOptions"
date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
<input type="text" class="form-control date" id="to" placeholder="To" ng-click="app.dateTo=true" datepicker-popup="{{app.format}}" ng-model="myapp.dtTo" is-open="app.dateTo" min-date="1970-04-06" max-date="'2017-04-07'" datepicker-options="app.dateOptions"
date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
And the script
angular.module('myapp', ['ui.bootstrap']);
angular.module('myapp').controller('myappCtrl', function() {
self = this;
self.someProp = 'Calendar'
self.opened = {};
self.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
self.opened = {};
self.opened[$event.target.id] = true;
// log this to check if its setting the log
console.log(self.opened);
};
self.format = 'dd-MM-yyyy'
});
Regards!!
http://plnkr.co/edit/dphcFn4ghgCQqPqRxUhi?p=preview
You would need to make a directive as below
var app = angular.module('myApp', []);
app.directive('datepicker', function () {
return {
restrict: 'C',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
$(element).datepicker({
dateFormat: 'dd, MM, yy',
onSelect: function (date) {
scope.date = date;
scope.$apply();
}
});
}
Y};
});
Taken from How to use datepicker in AngularJS using custom directive as a class?
I created a simple directive wrapper around the HTML file input to make angular binding work. Here's my directive:
angular.module('myApp').directive('inputFile', InputFileDirective);
function InputFileDirective() {
var bindings = {
selectLabel: '#',
};
return {
restrict: 'E',
require: ['inputFile', 'ngModel'],
scope: true,
controllerAs: 'inputFileCtrl',
bindToController: bindings,
controller: function () {
},
template: `<input class="ng-hide" id="input-file-id" type="file" />
<label for="input-file-id" class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}</label>`,
link: link
};
function link(scope, element, attrs, controllers) {
if (angular.isDefined(attrs.multiple)) {
element.find('input').attr('multiple', 'multiple');
}
var inputFileCtrl = controllers[0];
var ngModelCtrl = controllers[1];
inputFileCtrl.getButtonLabel = function () {
if (ngModelCtrl.$viewValue == undefined || ngModelCtrl.$viewValue.length == 0) {
return inputFileCtrl.selectLabel;
}
else {
return ngModelCtrl.$viewValue.length + (ngModelCtrl.$viewValue.length == 1 ? " file" : " files") + " selected";
}
};
element.on('change', function (evt) {
ngModelCtrl.$setViewValue(element.find('input')[0].files);
ngModelCtrl.$render();
});
}
};
And here's the HTML
<body ng-app="myApp" ng-controller="MyController as ctrl">
<form name="ctrl.myForm">
<input-file select-label="Select Attachment" ng-model="ctrl.attachment1"></input-file>
<input-file select-label="Select Attachment" ng-model="ctrl.attachment2"></input-file>
</form>
</body>
It's pretty simple and it works - if only one is on the page. As soon as I add a second one, I notice that only the first one ever updates. If I select a file with the second one, the label updates on the first one. My suspicions are that the require ['inputFile'] is pulling in the controller for the first directive instance into the link function or something (which shouldn't happen). Even now as I type this, that doesn't really make sense to me. So what's going on here and how do I fix it?
Here's a codepen for you guys to play with and try to figure it out: http://codepen.io/astynax777/pen/PzzBRv
Your problem is not with your angular... is with you html.
You are assigning the same id twice.
Change your template to this:
template: `<label class="md-button md-raised md-primary">{{ inputFileCtrl.getButtonLabel() }}<input class="ng-hide" type="file" /></label>`
I am trying to learn how to work with angular directives and so far with success. I have only one minor issue I cannot figure out.
In my directive I got a for attribute set on the same value of the id of an input field. But clicking on the label doesn't give the input control the focus like it should work normally.
I got this issue worked out in some example code:
<div ng-app='test' ng-controller='testCtrl'>
<label for="test1">Testlabel 1</label><br>
<input id="test1" type="text"></input><br>
<my-input id="test2"
label="Testlabel 2"
placeholder="enter somthing"
text="testVar"></my-input><br>
<span>{{testVar}}</span>
</div>
and the javascript:
angular.module('test', [])
.directive('myInput', function() {
return {
restrict: 'E',
template: '<label for={{id}}>{{label}}</label><br>' +
'<input id={{id}} type="text" ' +
' placeholder={{placeholder}} ng-model="text" />',
scope: {
id: "#",
label: "#",
placeholder: "#",
text: "="
}
}
})
.controller('testCtrl', ['$scope', function($scope) {
$scope.testVar = 'testing';
}]);
Same code in jsfiddle: http://jsfiddle.net/U92em/
What mistake am I making which causes my problem and how do I fix it?
Your "wrapper" has the same id too and it is not good. You can remove it in a link function, this way:
link: function(scope,el,attrs){
el.removeAttr("id");
}
Working: http://jsfiddle.net/cherniv/5u4Xp/
Or in compile function (thanks to Florent):
compile: function(el){
el.removeAttr("id")
}
Example: http://jsfiddle.net/cherniv/7GG6k/