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]"
Related
I am using simple angularjs input type = date for displaying date picker.
How to disable the previous dates means dates before the current dates.
html is like
<input class="form-control" type="date" name="sevadate" ng-model="sevadate" min-date="" placeholder="yyyy-MM-dd" ng-required="true" /> //What do i write in min-date..
change min-date="" to min="2017-12-30"
or you can do something like this min="{{minDate | date:'yyyy-MM-dd'}} " and on the controller
$scope.minDate = new Date();
<input class="form-control" type="date" name="sevadate" ng-model="sevadate" min="2017-04-12" placeholder="yyyy-MM-dd" ng-required="true" /> //What do i write in min-date..
Being very new to Angular I have a kinda unusual request.
I have a bunch of input fields
<div class="blurb" ng:repeat="item in fieldData.postData">
<input type="text" class="form-control" ng-model="item.key" />
<input type="text" class="form-control" ng-model="item.operator" />
<input type="text" class="form-control" ng-model="item.value" />
</div>
The values of these fields inturn are bound to another field
<input name="finalVal" type="text" ng-model="fieldData.postData" />
All works fine and I get an object inside finalVal, but I want the object in string format. Is there a way to achieve it without any changes in my controller? The reason being finalVal is basically stored as a string in DB and I cannot modify the data type.
Appreciate the help
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 am having trouble formatting a date in a read-only field using AngularJS. This is my html code -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="datetime" name="dateLastLogin" class="form-control" data-ng-model="loginDate" readonly />
</div>
</div>
I have tried to format it using this code in my controller -
$scope.$watch('vm.account.dateLastLogin', function(newValue) {
$scope.loginDate = $filter('date')(newValue, 'MM/DD/yyyy');
});
Putting a break point in the controller, I see the function being called but nothing is displayed.
If I leave my html like this -
<div class="row">
<label class="col-md-2">Date Last Login:</label>
<div class="col-md-3">
<input type="text" name="dateLastLogin" class="form-control" data-ng-model="vm.account.dateLastLogin" readonly />
</div>
</div>
I get a displayed value that includes the date and time but not formatted as I need it. What am I missing?
According to this answer, the W3C removed the datetime input type from the HTML5 Specification. date and datetime-local are still valid.
In your example, throw out the formatting filter and simply use the ng-model="vm.account.dateLastLogin" on a valid date input, like:
<input type="date" ng-model="vm.account.dateLastLogin" />
or
<input type="datetime-local" ng-model="vm.account.dateLastLogin" />
These date formats are formatted correctly to the client browsers locale.
Or, if you actually just want it in some text field, put the filter directly in the ng-model but still use a valid Date object, like:
<input type="text" ng-model="vm.account.dateLastLogin | date:'MM/dd/yyyy'" readonly />
See this jsBin for some examples
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.