I'm trying to get an angular datepicker working like in the example seen in this fiddle - http://jsfiddle.net/uberspeck/4ht8y4nw/
However when I do I get the error 'TypeError: Cannot read property 'text' of undefined'
I know this is caused by the line datepicker-popup="" in,
<input
type="text"
id="popup"
class="form-control"
datepicker-popup=""
ng-model="today"
is-open="opened"
min-date="minDate"
ng-click="open()"/>
But I don't know how to get rid of this error and I can't see the difference between what I am doing and the example.
I have the following scripts included -
ui-bootstrap-tpls-0.13.0.js,
bootstrap.min.css V3.3.4,
angular.min.js V1.3.15
What you probably need is a format for the datepicker.
<input type="text" datepicker-popup="{{format}}">
Provide a format in the controller as:
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
What else i see in the fiddle is no method on the popup to start propagation.
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
The label what you have in the fiddle needs a click event to start propagation.
<label for="popup" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></label>
See the working fiddle: http://jsfiddle.net/4ht8y4nw/100/
Related
In this plunk I have an Angular UI datepicker that shows up below the input field. I want the calendar to be displayed on top of the field, so I tried with popup-placement="top-left" but it doesn't work. Any ideas?
HTML
<p class="input-group">
<input type="text" class="form-control" ng-model="dt" is-open="opened"
datepicker-popup="dd-MMM-yyyy" popup-placement="top-left"
datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {
$scope.opened = false;
$scope.dateOptions = {
showWeeks: false
};
$scope.open1 = function(event){
event.preventDefault();
event.stopPropagation();
$scope.opened = true;
};
});
popup-placement directive does not exist on ui-bootstrap version 0.13.
it seems like it's only been added since version 1.2.0.
Best thing would be to update your version, previous versions don't seem to support that option (you can always manipulate the css but that's quite dangerous).
Working plunker with updated ui-bootstrap and angular versions.
i have solved your problem and created a plunker: http://plnkr.co/edit/PsCjLBzWk5QRHO2EIPIe?p=preview.
your ui-bootstrap version should be updated.
you need to updated your angularjs version 1.5.0, ui-bootstrap version 1.2.4, bootstrap 3.3.6, and then add uib-datepicker-popup="{{format}}" to your datepicker input element.
I have below code snippet in which datepicker control is there.
<input type="text" name="startDate" class="form-control input-sm" datepicker-popup="dd-MMMM-yyyy" ng-model="startDate" required />
Here, i have to disable the past dates in the datepicker control and below is what i have configured but its not working. Am I missing something here?
App.config(['datepickerConfig', 'datepickerPopupConfig', function (datepickerConfig, datepickerPopupConfig) {
datepickerConfig.startingDay = 1;
datepickerConfig.showWeeks = true;
datepickerPopupConfig.datepickerPopup = "dd-MMMM-yyyy";
datepickerPopupConfig.currentText = "Now";
datepickerPopupConfig.clearText = "Erase";
datepickerPopupConfig.closeText = "Close";
}]);
If you want to narrow the range of possible dates add min-date or max-date just as in the example.
Here's the relevant part of documentation:
max-date (Default: null) - Defines the maximum available date.
min-date (Default: null) - Defines the minimum available date.
Since angular ui-bootstrap version 1.1.0 you need to use an attribute called datepicker-options to configure a datepicker:
<input type="text" class="form-control" datepicker-options="dateOptions" datepicker-popup="dd-MMMM-yyyy" is-open="popup.opened"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Now you only need to set the minDate property to the current date or any other date you like to be the minimum Date of the datepicker. Instead of writing the datepicker configuration in the .config block of your application, you should write it in a controller or a service:
$scope.dateOptions = {
minDate: new Date()
};
$scope.popup = {
opened: false
};
$scope.open = function() {
$scope.popup.opened = true;
};
For more information, please read the official documentation.
I have datepicker ,in which i want to configure initDate so that if model value is null then datepicker show default selected date.
Here is the HTML:
<span class="input-group">
<input type="text" id="input_empdob" ng-readonly="isEmployeeRelieved" readonly placeholder="mm/dd/yyyy" min="mindobDate" max="maxdobDate" ng-change="setYearOfPassing(); setJoiningDate();" class="form-control" datepicker-popup="{{format}}" ng-model="employee.dob" datepicker-options="dateOptions" is-open="emp_dob_opened" ng-required="true" close-text="Close" name="input_empdob"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event); emp_dob_opened = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
and in controller i have configured datepicker-options like:
$scope.dateOptions = {
'init-date': new Date(1991,01,02)
};
at first time while loading it behaves fine, but when on save, when i clear model value then it does not show initDate properly as configured.
Thanks for any help.
I tried to use it too, didn't work.
so, i am using the initialization with the model.
in my controller i set it like:
$scope.initialDate: $filter('date')(new Date(), 'dd/MM/yyyy');
I am trying to use the angular-ui bootstrap for dateranges.
http://angular-ui.github.io/bootstrap/#/datepicker
The link contains some good examples. However I want to use controller as syntax and not the scope as it shows in the link above.
I have attempted it as seen below. But its not showing the calendar box when its clicked on. Its not returning any errors either so im a bit lost as to what I need to do. I think my example is close.
Here is my attempt on fiddle
Code snippets below..
js_file.js
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {
self = this;
self.someProp = 'Check This value displays.. confirms controller initalised'
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'
});
index.html
<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
#dateFrom, #dateTo { width: 200px;}
</style>
{{ demo.someProp }}
<div class="form-group">
<div class="input-group">
<input type="text"
class="form-control date"
id="dateFrom"
placeholder="From"
ng-click="demo.open($event)"
datepicker-popup="{{demo.format}}"
ng-model="demo.dtFrom"
is-open="demo.dateFrom"
min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" >
<input type="text"
class="form-control date"
id="dateTo"
placeholder="To"
ng-click="demo.open($event)"
datepicker-popup="{{demo.format}}"
ng-model="demo.dtTo"
is-open="demo.dateTo"
min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" >
</div>
</div>
</div>
</body>
The problem here seems to be that since UI Bootstrap 0.11.0 they have removed the "open on focus". (see source)
The plunkr below shows one possible workaround using ng-click to open the date picker.
change your current ng-click from the dateFrom input to:
ng-click="demo.dateFrom=true"
and the input field for dateTo to:
ng-click="demo.dateTo=true"
Plunkr - Working Bootstrap Date-picker
The source below shows several other workarounds if you are looking for a solution which opens the date picker on focus, rather than using ng-click.
Source: UI Bootstrap Github
I have an issue that I believe is related to the isolate scope of my directive.
The Angular-UI popup date picker will not appear again in the directive once a date has been selected from the popup.
Outside the directive, the pop up continues to function correctly even when a date has been selected.
For demonstration purposes, I've used the exact same markup and property for displaying the popup so that the two will influence each other. The same [broken] behaviour in the blob directive can be seen even if the popup and date picker outside the blob are removed.
By having the same markup and is-open property, we see the popup appear outside the blob when the calendar icon is clicked inside the blob, so the open function appears to be working correctly. It seems the popup in the dialog cannot be re-created once it has been dismissed by selecting a date.
Markup:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<meta name="description" content="Directive Scope" />
<h1>Directive scope testing</h1>
<div ng-app="testApp" ng-controller="TestCtrl">
<blob show="isVisible">
This is the content. We need in the blob directive, <em>unrelated to the issue being demonstrated</em>.
<br/>dt in blob scope: {{dt}}
<hr>
<input type="text" datepicker-popup="d MMM yyyy" ng-model="$parent.dt" is-open="opened" />
<button type="button" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</blob>
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h3>Outside the dialog</h3>
<input type="text" datepicker-popup="d MMM yyyy" ng-model="dt" is-open="opened" />
<button type="button" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
Javascript:
var app = angular.module("testApp", ['ui.bootstrap']);
app.directive("blob", function(){
return {
restrict: "E",
scope: {
show:'='
},
transclude: true,
template: '<div ng-show="show"><input type="text" ng-model="test"><br/>{{test}}</div><div ng-transclude></div>'
};
});
app.controller("TestCtrl", function($scope) {
$scope.isVisible = true;
$scope.open = function($event){
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
});
Working demo: http://jsbin.com/viqem/5
How can I get the datepicker popup to work consistently inside the blob directive?
The solution, which I'm putting here in the hope it'll help someone else, was to also refer to the parent scope in the is-open attribute:
ng-model="$parent.dt" is-open="opened" />
became
ng-model="$parent.dt" is-open="$parent.opened" />