I am having an issue with the angular ui datepicker. I have this value stored in the database: 2014-12-21T05:00:00.000Z and if I just have a plain text box bound to I get the output below. But when I add the data-picker directive it decrements a day off the value and displays 12-20-2014 instead of the correct 12-21-2014. What am I doing wrong? Thank you!
<input type="text" ng-model="incident.createdDate" /><p />
output is: 2014-12-21T05:00:00.000Z
<input type="text" ng-model="incident.createdDate" datepicker-popup="{{format}}" /><p />
output is: 12-20-2014
Related
I would like to enable save button only when form validation returns no error. Everything works fine until I put date input field, and I have no idea what is bothering him.
This is an example of such field:
<div ng-class="{ 'fg-toggled': openCalendar.ppDateClosing == true }">
<input name="dateClosing"
ng-click="openDatePicker($event, 'ppDateClosing')"
ng-model="pp.dateClosing"
ng-readonly="true"
placeholder="{{pp.dateClosing}}"
is-open="openCalendar.ppDateClosing"
data-date-format="dd.MM.yyyy"
datepicker-popup="dd.MM.yyyy"
datepicker-options="dateOptions"
show-weeks="false"
type="text">
</div>
If I remove the datepicker-popup="dd.MM.yyyy" line, then validation works ok, but date-picker doesn't.
Did anybody have similar problem or has an idea how to solve this?
(I'm using angular boostrap)
I am using angular 2 forms in my application and i have created the input based on my model. I have binded my input field with ngmodel and now I want to do a dirty check on this input field. So i have added input with # variable. Here is my code:-
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}" class="form-control" name="query3" id="query3" [(ngModel)]="sampledetails.rules[0].query3" #query3="ngModel">
But I am getting an error something like:-
There is no directive with "exportAs" set to "ngModel" ("="form-control" name="query3" id="query3" [(ngModel)]="sampledetails.rules[0].query3" [ERROR ->]#query3="ngModel">
Can anybody help me here..
You dont need to use #query3="ngModel" for angular.js 2,
so change
from
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}"
class="form-control" name="query3" id="query3"
[(ngModel)]="sampledetails.rules[0].query3" #query3="ngModel">
to (this will work)
<input type="text" [ngClass]="{red: sampledetails.rules[0].query3.dirty}"
class="form-control" name="query3" id="query3"
[(ngModel)]="sampledetails.rules[0].query3" >
I am using Angular bootstrap datepicker, only problem i have with translate, because I am using multilanguage application.
The problem I have is with button translate, i know i can easy translate CLOSE, and Reset button, but Today always stay the same, if I try somthing like this
<input type="text" class="form-control" value="22-22-2222"
uib-datepicker-popup="{{model.dateFormat}}"
ng-model="model.project.startDate"
is-open="model.startDateProjectPickerOpened"
close-text="Zatvori"
today-text="Danas"
clear-text="Obrisi"
alt-input-formats="altInputFormats"
name="projectStartDate"
required
ng-class="{'error':submitted && addNewProjectForm.projectStartDate.$invalid}" />
I got this
Only blue button didnt change value, even if i have tried today-text="Danas"
Use current-text insted of today-text
<input type="text" class="form-control" value="22-22-2222"
uib-datepicker-popup="{{model.dateFormat}}"
ng-model="model.project.startDate"
is-open="model.startDateProjectPickerOpened"
close-text="Zatvori"
current-text="Danas"
clear-text="Obrisi"
alt-input-formats="altInputFormats"
name="projectStartDate"
required
ng-class="{'error':submitted && addNewProjectForm.projectStartDate.$invalid}" />
When using angularjs to retrieve a value for a text input field with ng-value, the label the overlays the field doesn't transition above the field after the value is retrieved. I can only see the value in the input field after clicking on that field.
I'm using material's md-input-container:
<md-input-container>
<label>Name</label>
<input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name" id="providerName" name="providerName" />
</md-input-container>
Here's the Inspect Element code:
<md-input-container class="">
<label for="providerName">Name</label>
<input type="text" ng-value="profileInfo.name" ng-model="savedProfileInfo.name" class="provider-name ng-pristine ng-untouched ng-valid md-input" id="providerName" name="providerName" aria-invalid="false" value="a"><div class="md-errors-spacer"></div>
</md-input-container>
You can clearly see that value="a" which was pulled after the page loaded using ng-value. But, the field still looks like this:
Only after I click on the field does it look how I would expect:
Is this a bug? Am I missing something? I though AngularJS and Material were supposed to play nice.
Available plunker here
In a roundabout way troig's comment helped me figure this out.
This form is used to display and update a user's profile information. I was using ng-model to update the user's profile and ng-value to display any existing user profile info from the database.
ng-value spits back the value="" attribute which does not play nice with md-input-container. To get this to work properly, I removed ng-value, replaced ng-model's value with profileInfo.name, and modified my controller to allow me to save profileInfo.name instead of savedProfileInfo.name.
Code translation:
<form ng-submit="saveProfile(profileInfo)">
<md-input-container>
<label>Name</label>
<input type="text" ng-model="profileInfo.name" class="provider-name" id="providerName" name="providerName" />
</md-input-container>
Moral of the story, ng-value does not play nice with md-input-container and form labels.
I have a search field and i want that the binding of search textbox reflected after some time.Thanks in advance.
Here is my code
<div ng-controller="appointment as vm">
Search By Description : <input class="form-control" placeholder="search by description" type="text" ng-model="vm.filterText" />
{{vm.filterText}} </div>
You could use ng-model-options on your input field
<input type="text" ng-model="vm.filterText" ng-model-options="{debounce: { 'default': 10000}"/>
the ng-model-options directive will surely help you. You can update the binding after specified time or on blur event.
try this code
Search By Description : <input class="form-control" placeholder="search by description" type="text" ng-model="vm.filterText" ng-model-options={ debounce: 1000 } />
See example of ng-model-options http://learnit.visrosoftware.com/try/kfPWlU4N
Try using $interval in your directive. If you can share your directive as well, that will help.