I'm using angular-ui datepicker and currently have the settings declared in a controller, eg:
$scope.date = new Date();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
In order to be DRY, I want to declare this in one place, so that the datepicker can be used anywhere, without having to declare the settings each time.
I've tried putting them into a factory that would be injected into a controller, but with no success. I'm quite new to building factories/services.
I found this SO question that mentions declaring the settings under the config method, like this:
.config(['datepickerConfig', function(datepickerConfig) {
datepickerConfig.showWeeks = false;
}]);
But this doesn't work for me for some reason.
How can I declare the datepicker settings in once place to be used globally, or for injection?
To declare datepicker in 'one place' for easy re-use, I built a factory for the data/config:
.factory('datepickerService', function() {
var factory = {};
factory.date = new Date();
factory.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
this.opened = true;
};
return factory;
});
Then a datepicker controller that injects the datepickerService, hooking the $scope up with the factory config.
.controller('datepickerCtrl', function ($scope, datepickerService) {
$scope.date = datepickerService.date;
$scope.open = datepickerService.open;
});
A directive:
.directive('supermanDatepicker', function () {
return {
templateUrl:'views/partials/datepicker.html'
};
});
HTML partial template with the standard ui-boostrap datepicker (but declaring the controller)
<div class="input-group" ng-controller="datepickerCtrl">
<input type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="shortDate"
placeholder="dd-mm-yyyy"
is-open="opened"
min-date="minDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button type="button"
class="btn"
ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
Then finally, it can be plugged into any view:
<div superman-datepicker></div>
Related
I have come across what seems like a very simple issue, but I cannot figure out how to fix it. I posted this question originally, but it seems the issue is with the scope.
So basically, this is what is happening:
I have a datepicker inside a form. When the user selects a date, ng-change will trigger and it calls the function setDate(date).
In debug mode, I confirmed that the selected data indeed is passed to the function.
Inside the function, $scope.simStartDate variable is assigned this value and I can see its value changing.
However, when I later go to submit the form, $scope.simStartDate is back with its original initialized value.
I have put a breakpoint at the initialization $scope.simStartDate = new Date(), but it does not hit. Meaning that the variable is not initialized again.
I have tried using a $scope variable in the ng-model, but still the same issue.
This makes me think that ng-change creates a local scope and updates a local variable, which I cannot access later. Is my understanding correct? If not how can I fix this?
This is my HTML:
<div class="row" ng-controller="DashboardParamsFormCtrl">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">Simulation start date</label>
<p class="input-group">
<input type="text" class="form-control"
uib-datepicker-popup="{{format}}"
datepicker-options="options"
ng-model="date"
ng-change="setDate(date)"
is-open="opened" ng-required="true"
close-text="Close"
alt-input-formats="altInputFormats"
show-button-bar="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
This is the JS:
angular.module('BlurAdmin.pages.dashboard')
.controller('DashboardParamsFormCtrl', DashboardParamsFormCtrl);
/** #ngInject */
function DashboardParamsFormCtrl(baConfig, layoutPaths, baUtil, $scope)
{
$scope.ParamsFormBtnClicked = function()
{
console.log("Date: " + $scope.simStartDate);
}
$scope.open = open;
$scope.opened = false;
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.options = {
showWeeks: false
};
function open() {
$scope.opened = true;
}
$scope.simStartDate = new Date();
$scope.date = new Date();
$scope.setDate = function(startDate)
{
$scope.simStartDate = startDate;
}
}
})();
Thank you.
your passing new date(); without value, it will get current date. you should pass ng-model value inside new date();
like this.
$scope.simStartDate = new Date(date);
$scope.date = new Date(date);
hope this link will help you too plnkr
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?
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.
I'm lost about define default values in my form : http://1ffa3ba638.url-de-test.ws/zombieReport/partials/popup.html
validation doesnt'work too...
/*********************************** SubmitCtrl ***********************************/
app.controller('SubmitCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
/* data pre-define : date & url for test */
$scope.myForm = {};
$scope.myForm.date = new Date();
$scope.myForm.url = "prout";
/* ng-show things */
$scope.successMailZR = false;
$scope.errorMailZR = false;
$scope.send = function() {
if ($scope.myForm.$valid) {
alert('ok');
}
};
}]);
What is the correct way for define default values ?
edit :
for url i do it like this :
<input type="text" class="form-control" name="url" placeholder="{{myForm.url}}" value="{{myForm.url}}" ng-model="myForm.url" readonly="readonly" />
it's not working
There is a conflict between a binding model $scope.myForm and the form name <form name="myForm".
Angular will assign the form's controller into the $scope as its name i.e. $scope.myForm and that override what you have initialized.
Change your form name or the binding variable to have a different name.
In HTML:
<input value="default">
Or using Angular's ng-model:
<div ng-controller="YourCtrl">
<input ng-model="value">
</div>
function YourCtrl($scope) {
$scope.value = 'default';
}
I'm trying to use datepicker component from angular-ui bootstrap lib as descibed here: http://angular-ui.github.io/bootstrap/
And I try to set options for the popup picker and accoriding to the documentation I should pass options for datepicker as JSON using the datepicker-options attribute.
In my view I have:
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
And in my controller I have:
$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.showWeeks = false;
$scope.clear = function () {
$scope.dt = null;
};
$scope.toggleMin = function() {
$scope.minDate = ( $scope.minDate ) ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.format = 'dd/MM/yyyy'
As you can see at the beginning I try to set the options:
$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};
however, it doesn't seem to work, the datepicker does not change.
Any ideas what I'm doing wrong?
I found the solution to this, I put the options as attributes, e.g.:
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2014-12-31'" datepickerOptions="dateOptions" ng-required="true" show-button-bar="false"/>
so I put show-button-bar as the attribute and not as a part of object passed to datepickerOptions.
You are using dash-cased option names. These dash-cased names are only required when using them as single attributes on an element. i.e.
<input type="text" datepicker-popup="{{format}}" starting-day="1" ng-model="dt" >
However datepicker-options expects named options in json with camelCased format as following:
datepicker-options="{startingDay: 1, yearFormat: 'yy'}"
<input type="text" datepicker-popup="{{format}}"
datepicker-options="{startingDay: 1, yearFormat: 'yy'}" ng-model="dt" >
or
$scope.options = {
'startingDay': 1,
'yearFormat': 'yy'
}
<input type="text" datepicker-popup="{{format}}"
datepicker-options="{{options}}" ng-
The attribute starting-day="1" should also work on the datepicker input, as told at https://angular-ui.github.io/bootstrap/#/datepicker, but I can't seem to get that working (using version 0.12.1)
I know this an old question but thought I'd point out where you were probably having trouble.
In your controller you are assigning to $scope.dateOptions twice and therefore overwriting your first assignment.
So your initial assignment of:
$scope.dateOptions = {'show-button-bar': 'false', 'close-text':'SomeText'};
Is overwritten when you do this towards the end:
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
According to datePicker documentation, popup setting can be globally configured through the datepickerPopupConfig, so you have to add it into you controller.
yourApp.controller('YourController', function ($scope, datepickerPopupConfig) {
datepickerPopupConfig.showButtonBar = true;
datepickerPopupConfig.closeText = 'I am done';
datepickerPopupConfig.clearText = 'Wipe it out';
}
Setting closeText doesn't work for some reason. I don't know why.
Example on Plunker for playing.
datepicker-options was introduced in version 0.11 so make sure you are using angular-ui-bootstrap version 0.11 or higher
Looks like your dateOptions object keys are not camelCased. Try this:
$scope.dateOptions = {
'showButtonBar': 'false',
'closeText':'SomeText'
};
Html attributes should be dash-cased, like show-button-bar, or close-text, etc.
Notice the difference between the datepicker-options html attribute and the datepickerOptions javascript object.
Just provide close-text, current-text and clear-text attributes in the input :)
<input type="text" uib-datepicker-popup ng-model="dt" is-open="popup2.isopen" datepicker-options="dateOptions" ng-required="true" close-text="your close text here" current-text="Your current text here (today for example)" clear-text="Your clear-text here"/>
The site is pretty lite on examples. For me, with version 1.1.1, I passed in the config object as an attrib:
datepicker-options="datepickerOptions"
And in the controller, was able to set some options:
$scope.datepickerOptions = {
formatYear: 'yy',
startingDay: 0,
showWeeks: false
};
But 'showButtonBar' doesn't cooperate, so looking through the code I saw 'uibDatepickerPopupConfig'. I pass that in and and set it separately and it works:
.controller('DatepickerCtrl', function ($scope, uibDatepickerPopupConfig){
uibDatepickerPopupConfig.showButtonBar = false;
With 'datepickerPopupConfig' I get the provider error:
Unknown provider: datepickerPopupConfigProvider <- datepickerPopupConfig