AngularJS data binding not working with ui-date component - angularjs

I'm using the ui-date component as a dropdown datepicker in an AngularJS project. The problem I'm having is that the data binding between the model and the datepicker is only one-way, not two-way as I expect it to be.
My HTML has a Prev and Next button to allow the user to adjust the date backwards and fowards one day at a time. Or they can click in the date box itself to show the dropdown datepicker and specify any date they want.
Plunker here.
HTML:
ThisDate: {{ ThisDate }}
<p>
<button ng-click="PrevDay()">< Prev</button>
<button ng-click="NextDay()">Next ></button>
<p>
Set Date: <input ui-date ng-model="ThisDate" id="ThisDate">
Javascript:
var app = angular.module('app', ['ui.date']);
app.controller('MyController', function($scope) {
$scope.ThisDate = new Date();
$scope.PrevDay = function() {
$scope.ThisDate = DateOffset($scope.ThisDate, -1);
};
$scope.NextDay = function() {
$scope.ThisDate = DateOffset($scope.ThisDate, 1);
};
function DateOffset(ThisDate, NumDays) {
var d = ThisDate;
d.setDate(d.getDate() + NumDays);
return d
}
});
Problem:
If you change the date using the dropdown datepicker, the date box will change and {{ ThisDate }} will update properly. But if you click the Prev or Next buttons, only the bound {{ ThisDate }} will change... not the date box which is bound to "ThisDate" in the model.
Steps to Reproduce:
Run the Plunker. Notice that if you click in the date box, you can change the date from the dropdown and the date box will change accordingly AND the text area at the top which is bound to ThisDate will also change. Now click the Next or Prev button. Notice that ONLY the bound ThisDate text will change, NOT the date box. The date box should also change since it is bound to ThisDate.
Any ideas on why the ui-date datepicker isn't registering the changes in the model to ThisDate?
Plunker here.

It's not seeing the date object change. If you assign a new date object it works:
function DateOffset(ThisDate, NumDays) {
var d = new Date();
d.setTime(ThisDate.getTime() + (NumDays * 1000 * 60 * 60 * 24));
return d
}

Related

Angular Bootstrap UI Datepicker update minDate

This should be simple and I believed all my code is correct, but I suppose it is not.
I have two Datepickers. Datepicker 2 should be setting it's minDate to the value of datepicker 1. This works, as I can see the min-date attr updating when I select a date on Datepicker 1, but Datepicker 2 does not re-render the disabled dates. I feel like I should be refreshing the Datepicker somehow, but unsure how.
// Datepicker Controller
app.controller('datepickerController', ['$scope', function($scope) {
// open depart date
$scope.openDepartDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open depart datepicker
$scope.departDatepickerOpen = true;
}
// open return date
$scope.openReturnDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
// open return datepicker
$scope.returnDatepickerOpen = true;
}
$scope.$watch('search.searchparams.journeys[0].departuredate',function(value){
$scope.returnMinDate = value;
});
// minDate set intiitally
$scope.departMinDate = new Date();
$scope.returnMinDate = new Date();
// date options
$scope.departDateOptions = {};
$scope.returnDateOptions = {};
// date format
$scope.dateFormat = 'EEE dd/MM/yyyy';
}]);
And here is the actual input
<input id="returnDate" placeholder="Returning" type="text" class="form-control" data-ng-model="search.searchparams.journeys[1].departuredate" datepicker-popup="{{dateFormat}}" data-ng-focus="openReturnDatepicker($event)" show-button-bar="false" min-date="{{returnMinDate}}" is-open="returnDatepickerOpen" datepicker-options="returnDateOptions" readonly=""/>
Nothing I have tried has made a difference. The new minDate is updating, but just not being applied to the Datepicker. I can actually see the updated min-date attribute in my inspector, so all values are updating as expected.
Any help appreciated
The issue is so simple and so silly.
min-date="{{returnMinDate}}"
needs to be
min-date="returnMinDate"
It smacked me right in the face this morning.

Angularjs datepicker - how to set mutually dependent dates

I am working on a feature that requires me to inactivate an entity for a given period. So, I show two date pickers : 1) Starting date and 2) Ending date.
The two dates are interdependent in a manner where the starting date limits the min date for ending date and the ending date limits the max date for starting date.
<input type="text" ui-date="inactive.datePicker" ui-date-format="mm/dd/yy" ng-model="inactive.details.fromDate" id="fromDate" ng-change="error.dueDate=false" value="inactive.details.fromDate}}"/>
<img ng-click="showFromDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >
<input type="text" ui-date="inactive.datePicker" ui-date-ormat="mm/dd/yy" ng-model="inactive.details.toDate" id="toDate" ng-change="error.dueDate=false" value="{{inactive.details.toDate}}"/>
<img ng-click="showToDatePicker($event)" class="ui-datepicker-trigger" src="../design/calendar3.gif" >
$scope.showFromDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.inactive.fromDatepicker = {
max : $scope.inactive.details.toDate;
}
angular.element("#fromDate").focus();
};
$scope.showToDatePicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.inactive.toDatepicker = {
max : $scope.inactive.details.fromDate;
}
angular.element("#toDate").focus();
};
But right now this piece of snippet isn't exactly working properly. The min date is setting properly but let's kind of disabling the datepicker so I couldn't select a date. Also how do I reinitialize or refresh the datepicker in AngularJS like we could do in Jquery by
$("#myDatepicker").datepicker("refresh");
In angular-ui-bootstrap 0.14.3 I managed to achieve this just by binding min and max to the other model. I use a wrapper directive around datepicker but it shouldn't make any difference:
Begin datepicker: max-date="myobject.endDate"
End datepicker: min-date="myobject.beginDate" max-date="today"

Typeahead Value in Bootstrap UI

I'm working on an app using AngularJS and Bootstrap UI. I've been fumbling my way through using the Typeahead control in Bootstrap UI.
Here's my Plunker
My challenge is I want the user to have the option of choosing an item, but not required to do so. For instance, right now, if you type Test in the text field and press "Enter", Test will be replaced with Alpha. However, I really want to use Test. The only time I want the text to be replaced is when someone chooses the item from the drop down list. My markup looks like the following:
<input type="text" class="form-control" placeholder="Search..."
ng-model="query"
typeahead="result as result.name for result in getResults($viewValue)"
typeahead-template-url="result.html" />
How do I give the user the option of choosing an item, but allow them to still enter their own text?
The issue is that both Enter and Tab confirm the selection of the currently highlighted item and Typeahead automatically selects an item as soon as you start to type.
If you want, you can click off the control to lose focus or hit Esc to exit out of typeahead, but those might be difficult to communicate to your users.
There's an open request in Bootstrap Ui to not auto select / highlight the first item
One solution is to populate the first item with the contents of the query thus far, so tabbing or entering will only confirm selection of the current query:
JavaScript:
angular.module('plunker', ['ui.bootstrap'])
.filter('concat', function() {
return function(input, viewValue) {
if (input && input.length) {
if (input.indexOf(viewValue) === -1) {
input.unshift(viewValue);
}
return input;
} else {
return [];
}};})
HTML:
<input type="text"
ng-model="selected"
typeahead="state for state in states | filter:$viewValue | limitTo:8 | concat:$viewValue"
class="form-control">
Demo in Plunker
I came across this same situation and found no good answers so I implemented it myself in ui-bootstrap Here is the relevant answer. This is probably not the best route to take, but it does get the job done. It makes the first result in the typeahead to be what you're currently typing, so if you tab or enter off of it, it's selected -- you must arrow-down or select another option to get it.
Here is the modified ui-bootstrap-tpls.js file
I added a mustMouseDownToMatch property/attribute to the directive, like:
<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue" typeahead-arrow-down-to-match="true">
And the javascript:
var mustArrowDownToMatch = originalScope.$eval(attrs.typeaheadArrowDownToMatch) ? originalScope.$eval(attrs.typeaheadArrowDownToMatch) : false;
I also added this function which will put the current text into the first item of the typeahead list, and make it the selected item:
var setFirstResultToViewValue = function (inputValue) {
scope.matches.splice(0, 0, {
id: 0,
label: inputValue,
model: inputValue
});
}
And that is called in the getMatchesAsync call in the typeahead directive:
var getMatchesAsync = function(inputValue) {
// do stuff
$q.when(parserResult.source(originalScope, locals)).then(function(matches) {
// do stuff
if (matches.length > 0) {
// do stuff
}
if (mustArrowDownToMatch) {
setFirstResultToViewValue(inputValue);
scope.activeIdx = 0;
setTypeaheadPosition();
}
// do stuff
};

Filter options that were already selected

I have a form with an ng-repeat that loads a set of scheduled days a user has added. Lets say the user has added the first day to the collection and selected Monday from the dropdown. When the user adds a second day to the collection I would like the dropdown to filter out Monday because its already used, however not filter out Monday for the day that Monday was selected for. Does anyone have an example on how to accomplish this?
Edit:
$scope.schedule = {days: []};
Updated from Zacks example jsfiddle
* Updated with the edit to the question *
Here every time a choice is selected, it calls updateAvailability()
<div ng-repeat="schedDay in schedule.days">
<select ng-model="schedDay.day" ng-change="updateAvailability()">
<option ng-repeat="day in days|orderBy:value" ng-disabled="!day.selectable" value="{{day.day}}">{{day.display}}</option>
</select>
</div>
Which goes through and checks if it is already used elsewhere.
$scope.updateAvailability = function() {
var used = $scope.schedule.days.map(function(day) {
return parseInt(day.day || '-1');
});
angular.forEach($scope.days, function(day) {
day.selectable = used.indexOf(day.day) === -1 ? true : false;
});
}
Check out the demo JSFiddle

Can't set datepicker date from controller in AngularJS

I am trying to create an AngularJS datepicker on the push of a button. I am using this bootstrap-ui control. The control works (pops up on the click of a button, and I can select a date), but I can't seem to set the initial date back from the scope (so that when it is first opened, the designated date is already selected).
The error I get in the Chrome console is:
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
jade:
button(type="button" ng-model="date.from" btn-radio="'From'" ng-click="date.openFromPopup($event);" show-weeks="false" show-button-bar="false" datepicker-popup = "date.format" is-open = "date.fromOpened" min = "date.minDate" max = "date.today") From
Since I have a watch on $scope.date.from, I can confirm that the selected date is correct, but I can never set it from the controller. Any ideas?
AngularJS controller:
$scope.date = {};
$scope.date.format = "yyyy/MM/dd";
$scope.date.opened = false;
$scope.date.from = new Date();
$scope.date.today = new Date();
$scope.date.minDate = null;
$scope.date.fromOpened = false;
$scope.$watch('date.from', function(v) {
if(v){
alert(v);
}
});
In the example on the angular-ui page, it says to use it like this...
$scope.from = function() {
$scope.dt = new Date();
};
$scope.from();
Does that work?

Resources