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.
Related
In this plunk I have an Angular UI date picker with an error message that is displayed when the date is invalid. Problem is that the error message is shown below the date instead of the same line. How to fix this?
HTML
<form name="form1" ng-submit="validate(form1)" novalidate>
<p class="input-group" style="width:160px;margin-bottom:0px;">
<input type="text" class="form-control" ng-model="dtFrom"
is-open="config1.opened" uib-datepicker-popup="MM-dd-yyyy"
close-text="Close" name="dtFrom" />
<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>
<div style="background-color:red;color:white;width:150px"
ng-show="!form1.dtFrom.$valid">Invalid Date</div>
</form>
Javascript
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {
$scope.dtFrom = new Date ();
$scope.config1 = {};
$scope.config1.opened = false;
$scope.open1 = function(event){
event.preventDefault();
event.stopPropagation();
$scope.config1.opened = true;
};
});
You can add class list-inline in it.
Here is plnkr
http://plnkr.co/edit/23CxCMDRK6DBiW115K7T?p=preview
The reason you are seeing this misalignment is because you are using bootstrap classes but are not correctly applying them to all the corresponding elements. When you use an input-group as you've applied to the <p> element, you are using a specific bootstrap class that adds styling to the components, like display:table. To have a correct behavior for the whole form, you need to keep using these classes on sibling elements. Namely input-group and form-control. Using these you will notice that its better aligned to its neighbor in both position and height. Additionally its best to wrap all these components in a valid row and column classes for parent elements. I've added an updated version of your plnkr showing how these changes behave:
plnkr
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'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/
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