I have an ng-repeat with each row having multiple UI-Bootstrap Datepickers. I am trying to call a function in my controller when the date is selected and the picker closes. I have tried using UI-Event to capture the blur event but the model hasn't been updated when this gets called. My question is how can I get the selected date when the picker closes? Can I do something like ui-event="{ blur : 'myBlurFunction( $event, this.text)' }, or is there another way to get the data with an onClose event?
<li ng-repeat="....">
<div ng-click="openEditStartCal($event, ticket)">
<input ui-event="{ blur : 'blurredStartDate( $event, ticket, this.text)' }"
type="text"
starting-day="2"
show-button-bar="false"
show-weeks="false"
class="form-control addTicketDateInput"
datepicker-popup="dd MMM"
ng-model="ticket.StartDate"
is-open="startEditTicketOpened && currentTicketUpdating == ticket.TicketId"
min-date="{{today()}}"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" />
</div>
I have solved this by using: ng-change="myChangeFunction()".
This is possible using ng-change :
html/jsp file
<input type="text"
id="StartDate"
name="StartDate"
class="form-control input-sm"
uib-datepicker-popup="{{format}}"
ng-model="StartDateVal"
is-open="status.opened"
min-date="min"
max-date="max"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
readonly="true"
ng-change="select(StartDateVal)" />
.js Controller
$scope.select = function(date) {
// here you will get updated date
};
You can put a $watch in your controller for your date variable.
$scope.$watch('ticket.StartDate',function(){
var date = $scope.ticket.StartDate;
});
I was dealing with this as well and onChange won't do the job for me, so I went to ui bootstrap .js and added some things. Then I can set a function to be called in HTML via on-close attribute.
<input type="text" on-close="dateClosed()" ng-model="date" datepicker-popup="dd.MM.yyyy" is-open="dateOpened" ng-click="dateOpened=true" />
then you need to change the ui-bootstrap.js at
.directive('datepickerPopup' ... function(...) ... return { ...
scope: { ... , onClose: '&' }
there are 3 options how to close the picker - date selection, click elsewhere or done button. you can find it easily, its the only place where isOpen is set to false
scope.isOpen = false;
Then i just call a function at those 3 places, where i call the function from the attribute
scope.onClosing = function () {
if (angular.isDefined(attrs.onClose))
scope.onClose();
}
If you want the ui-bootstrap.js PM me, I did it in the tpls version only tho.
Related
How can I allow user to type date in input form in different formats? I see option alt-input-formats. I've tried to pass alternate formats with no result.
Controller:
vm.altInputFormats = ['M!/d!/yyyy'];
Markup:
<div class="calendar">
<label>END DATE</label>
<input type="text"
ng-click="vm.toggleCalendar('endDate')"
class="calendar-control"
uib-datepicker-popup="{{'MM/dd/yy'}}"
ng-model="vm.dateFilter.endDate"
is-open="vm.endDateOpened"
datepicker-options="vm.datePickerOptions"
min-date="vm.dateFilter.startDate"
max-date="vm.currentDate"
show-button-bar="false"
alt-input-formats="vm.altInputFormats"
close-text="Close" />
<i ng-click="vm.toggleCalendar('endDate')" class="glyphicon glyphicon-calendar calendar-btn"></i>
</div>
Now i'm able only to type date in such format: 01/01/16, but for 01/01/2016 I got undefined in model.
What's wrong with my code?
The altInputFormats should be provided not as attribute but as the part of the datepicker-options config object. In your case:
<input type="text"
ng-click="vm.toggleCalendar('endDate')"
class="calendar-control"
uib-datepicker-popup="{{'MM/dd/yy'}}"
ng-model="vm.dateFilter.endDate"
is-open="vm.endDateOpened"
datepicker-options="vm.datePickerOptions"
min-date="vm.dateFilter.startDate"
max-date="vm.currentDate"
show-button-bar="false"
close-text="Close" />
and then in controller
vm.datePickerOptions = {
altInputFormats: ['M!/d!/yyyy'],
// rest of options ...
}
alt-input-formats is defined as an attribute in directive uibDatepickerPopup so it can not take vm.altInputFormats as an array. One way to get around this is to insert the array directly into alt-input-formats
<input type="text"
ng-click="vm.toggleCalendar('endDate')"
class="calendar-control"
uib-datepicker-popup="{{'MM/dd/yy'}}"
ng-model="vm.dateFilter.endDate"
is-open="vm.endDateOpened"
datepicker-options="vm.datePickerOptions"
min-date="vm.dateFilter.startDate"
max-date="vm.currentDate"
show-button-bar="false"
alt-input-formats="['M!/d!/yyyy', 'yyyy-M!-d!']"
close-text="Close" />
try to change this line.
alt-input-formats="vm.altInputFormats[0]"
at the moment my datepicker works fine. But I need to fix something.
Saturdays and Sundays days are disabled, so they can't be selected.
As I know, the official documentaion says nothing about this feature. Maybe with template-url, but anyway dont know where to find it.
Any idea? I think it's really easy to solve it.
Since it's in spanish, I need to enable sab. and dom. columns.
Thanks.
If you refer the docs, disabled dates is achieved by:
JS:
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
HTML:
So, you can enable weekends by removing this chunk of code from your datepicker's code, i.e removing the date-disabled attribute passed to datepicker:
date-disabled="disabled(date, mode)"
Complete HTML:
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
You do not have to change any html. You can just put in dateOptions in controller:
$scope.dateOptions = {
dateDisabled: false
};
and remember to add datepicker-options="dateOptions" to your input in html (btw other specified in html options can be moved to controller, too):
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
I'm trying to get a date, which is displayed in an input of the bootstrap ui datepicker as pure text. Therefore I use a span.
Now I want to get the text of the span, but it doesn't work. Actually, I get an undefined. Do you have some tips for me?
HTML
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span ng-model="textDate">{{dt | date:'dd.MM.yyyy' }}</span>
JS
$scope.$watch('dt', function() {
var tD = $scope.textDate.value;
console.log(tD);
});
Inject $filter into your controller/service and extract the date as a string like so
$scope.getDate = function() {
return $filter('date')($scope.dt, 'dd.MM.yyyy');
}
Plunkr here
Side-note: Assuming that dt already has two-way binding, I don't think it's necessary to $watch for changes. Instead, you can directly use $filter('date')($scope.dt, 'dd.MM.yyyy') where you need the string value.
Angular's ngModel won't work on a span since it is read only. You need some kind of input for two-way-binding with a ng-model. For this you could use a binding to a getter/setter of the model used on the input field. Here is an example:
<input type="text" name="userName"
ng-model="vm.dt"
ng-model-options="{ getterSetter: true }" />
<span ng-bind="vm.dt()"></span>
By adding ng-model-options="{ getterSetter: true }" will expose the model to a getter/setter which is a function you can simply call on your span. Also I would recommend to use the controllerAs syntax to avoid problems with scopes. Notice the vm is the alias for the controller around the input and span.
For more information check the documentation on ngModel.
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