I'm trying to avoid having to initialize datepickers in every controller of my application. I would like to have a central place where I initialize my datepickers.
I tried initializing datepickers in my base controller, but it doesn't work - I'm guessing the DOM isn't rendered at that point.
Where should this piece of code be put?
I also tried (in base ctrl)
angular.element(document).ready(function() {
$('.date-picker').datepicker({
autoclose: true,
format: "yyyy-mm-dd",
setDate: new Date(),
});
});
but to no avail.
You can attach a datePicker directive to your datepicker elements:
app.directive("datePickerInit", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
$(elem).datepicker({
autoclose: true,
format: "yyyy-mm-dd",
setDate: new Date(),
});
}
}
}]);
Then just attach:
<input type="date" date-picker-init />
Related
Plunker link of my usecase.
I am using Eternicode's Bootstrap Datepicker in my app. I have created a datepicker directive and same is used in Angular form.
Datepicker directive :
angular.module('MyApp', [])
.directive('myDatePicker', function($compile) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
$(element[0]).datepicker().on("change", function(e) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(element.val());
});
});
}
};
});
When the Angular form is initially loaded, following are its properties:
$pristine : false
$dirty : true
When i watch the form model and print them on console, i understood form model had property that was set by datepicker and this is how it looks :
On same Plunker link , if i comment date section in form following are its properties:
$pristine : true
$dirty : false
This is how form model looks now :
How do i keep my form model free from being corrupted, which is causing problems by setting $pristine to false and $dirty to true, despite of using Date directive ?
PS : This is the abstraction of the bigger use-case that is in our current application.
Thanks in advance.
I have investigated you code and observed that, you should write you following code in compile function of directive.
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
it will resolve your problem.
so your directive looks like as follow :
.directive('myDatePicker', function($compile) {
return {
restrict: 'A',
require: 'ngModel',
compile: function(scope, element, attrs) {
$(element[0]).datepicker({
autoclose: true,
format: "dd/mm/yyyy"
});
},
link: function(scope, element, attrs, ngModelCtrl) {
$(element[0]).datepicker().on("change", function(e) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(element.val());
});
});
}
};
The compile function deals with transforming the template DOM. Since most directives do not do template transformation, it is not used often.
I don't completely understand your use case, but after you set your date selection, why don't you just do a programmatic
$scope.form.$setPristine();
I believe this was introduced in v1.1
Datepicker in my application is working fine but i am not able to change year directly. I have to go month by month to change year
Directive for datepicker
app.directive('adatepicker', function() {
return {
require: 'ngModel',
link: function(scope, el, attr, ngModel) {
$(el).datepicker({
onSelect: function(dateText) {
scope.$apply(function() {
ngModel.$setViewValue(dateText);
});
}
});
}
};
});
In HTML page
<input type="text" adatepicker="" ng-model="Date"/>
screenshot of datepicker
From the documentation, initialize the datepicker with the changeYear option specified:
$( ".selector" ).datepicker({
changeYear: true
});
Get or set the changeYear option, after initialization:
// Getter
var changeYear = $( ".selector" ).datepicker( "option", "changeYear" );
// Setter
$( ".selector" ).datepicker( "option", "changeYear", true );
I am trying to add $watch in my directive. The directive is for wizard creation , when I read an existing array and use ng-repeat in directive it works as expected but If I update my array the newly added items in array doesn't add in directive to create wizard.
Please refer This plunker to understand the issue. At this plunker script.js has array data which I will be updating on a button click and read them back in ng-repeat under wizard directive on html page.
the directive is
directive('wizard', function($timeout, $compile) {
var opts = {
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true,
enableAllSteps: true,
enableKeyNavigation: false,
enableCancelButton: true,
enableFinishButton: true,
showFinishButtonAlways: false
};
return {
restrict: 'E',
replace: true,
template: '<div class="mywizard"></div>',
compile: function (tEl) {
return function(scope, element, attrs, ngModel) {
var stepsEl;
element.wrapInner('<div class="steps-wrapper">');
element.children('.steps-wrapper').append(tEl.context.innerHTML);
var content = $compile(element.contents())(scope);
$timeout(function () {
element.children('.steps-wrapper').steps(opts);
})
}
}
};
});
Please share idea where should I apply the watch.
I have created an AngularJS directive using the bootstrap-datepicker which is based on jQuery and I want some stuff based on the ng-model which I'm sending to the directive. The problem is that on the datepicker init click events I don't have access to anything angular related. There is no scope, no ngModel nothing. All of these are undefined. Now, I might be missing something obvious, but I don't know what this is. Here is the code for the directive:
.directive('jqCalendar', function () {
return {
restrict: 'EA',
require: 'ngModel',
template: '<div></div>',
replace: true,
scope:{
ngModel: '='
},
link: function (scope, element, attrs, ngModelCtrl) {
var ngModel = scope.ngModel;
element.datepicker({
multidate: true,
beforeShowDay: function (date) {
var today = new Date();
var angularModel = ngModel; //ngModel is always undefined in here, why?!
if (date < today) return false;
},
format: 'dd MM yyyy',
weekStart: 1
})
.on('changeDate', function (e) {
//make server call for selected/deselected date
alert('asd');
});
}
}
})
Outside the element.datepicker({...}) I can see the value of my model, but once inside the said control, I cannot access anything. Any ideas?
I'm trying to use angular strap datepicker
When I select the date, it returns string like "2013-10-21T00:00:00.000Z"
But when I set this string to variable he doesn't react...
i tried this ways
$scope.var1="2013-10-14T00:00:00.000Z";
$scope.var1= {date: new Date("2013-10-14T00:00:00.000Z")};
$scope.var1="08/10/2012";
Here is plunker
How to send date to him?
And is there any way to interact with it? Or i must use only var1 assigned as his model?
The string like 2013-10-14T00:00:00.000Z represents by new Date().
To store form, you can do that by create custom directive:
directive
app.directive('datetimez', function() {
return {
restrict: 'A',
require : 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
element.datepicker({
dateFormat:'dd/MM/yyyy',
}).on('changeDate', function(e) {
console.log(e.date);
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
HTML
<input id="inputDatepicker" class="input-small" type="text" datetimez ng-model="var1" data-date-format="dd/mm/yyyy" >
See demo Plunker
Hopfully this is helpful to someone else... I just spent 20 min looking for this.
HTML:
<input type="date" id="date" ng-model="object.date">
CONTROLLER:
.controller('yourController', function($scope) {
$scope.object = {
date: new Date()
}
});