I'm trying to configure the datepicker from angular-ui.bootstrap to have a starting point date when user pops up the datepicker.
I found out this line of code actually works.
$scope.date = new Date(1980-12-12);
It actually put the value at the input-box and also the picker. But I want my input-box to be empty initially. Instead I want the placeholder to be shown.
Please, try using the placeholder attribute.
Something like this
<input type="text" placeholder="{{date}}" ... />
Try to use placeholder attribute.
<input type="text" name="datepicker" placeholder="{{date}}" value="" ... />
Related
I use
https://code.angularjs.org/1.6.5/angular.min.js
https://code.angularjs.org/1.6.5/i18n/angular-locale_en-us.js
I need to obtain the current
DATETIME_FORMATS.shortDate
say
<input type="date" name="fromdate" id="fromdate"
placeholder="MM/DD/YYYY" ng-model="fromDate" />
something like this?
<input type="date" name="fromdate" id="fromdate"
placeholder="{{$locale.DATETIME_FORMATS.shortDate}}" ng-model="fromDate" />
Inside controller, inject $locale service & have scope variable to set the date format:
$scope.localDateFormat = $locale.DATETIME_FORMATS;
And in view as :
<input type="text" name="fromdate" id="fromdate"
placeholder="{{localDateFormat.shortDate}}" ng-model="fromDate" />
Again this will work only if you're having type='text' it'll fail for type='date' as date type is handled natively in all browsers. It's not even supported by Firefox & IE11. So better way is to have just text field & some generic datepicker library like ui-bootstrap or angular material datepickers which have support for all the browsers. In official docs they've not provided placeholder in usage if input type is date (for non-supporting browsers you can have the placeholder it says).
(It still can be achieved by using type as date but by unusual DOM manipulation like having text field & onfocus turning it into date & onblur back to text, just to show user defined placeholder)
Plunker
I am not able to type anything into the below input text, which has been created using reactjs
<input type="text" id="txtName" className= "form-control" value=""/>
and the equivalent html code in browser is as below
<input id="txtName" class="form-control" value="" data-reactid=".0.0.0.1.0.1.0.1.1" type="text">
I am not able to fix this for some time, finally I changed the data-reactid attribute manually in the browser.
After I changed the value of data-reactid manually in the browser, I am able to type characters into the input field.
I have many other screens with text input field, which has no such issues.
how to fix this issue? why this issue occurs, I mean what's the issue with data-reactid attribute?
When using "value" you're telling React this is a controlled component, that is, the input is set programatically.
Just remove the value field and you're good to go.
Reference
https://facebook.github.io/react/docs/forms.html
I use a bootstrap modal for a form in my code.
So, I need standard-values for two textfields, and I tried to simply use VALUE like
<input type="text" value="myStandardText" ng-model="something">
I think it's because of the ng-model, but why?
And do you know a way to get the same result as with value, too?
(For now, I use "placeholder" instead, but value would be better)
UPDATE: Ok, i got a step closer.
<input type="text" ng-model="e_uname" ng-init="e_uname = 'a std txt'">
does the trick, but i need now to set a saved value as init-value.
i added "uname" to my scope, but with input it doesn't work.
<input type="text" ng-model="e_uname" ng-init="e_uname = {{uname}}">
I tried also with different quote marks. Any ideas?
Ok guys, I found the answer.
Final solution is:
<input type="text" ng-model="e_uname" ng-value="uname">
I try to get the value of my input date html 5 component by binding it with ng-model like this:
<input type="date" id="dateFin" class="form-control" name="dateFin" ng-model="filtres.dateFin"
placeholder="dd/MM/yyyy" min="01/01/2014"/>
And with the model :
$scope.filtres.dateFin = null;
I think the binding is correct because when I change the initial value to
$scope.filtres.dateFin = new Date();
The initial value is set to current date.
But my problem occurs when i try to get the value on my form processing. When debugging I saw that the value of $scope.filtres.dateFin become undefined when the value is changed. Should I override an onchange method or getting the value by another way?
https://jsfiddle.net/u2vkzemh/
html
<div ng-app ng-controller="testCtrl">
<input type="date" id="dateFin" name="dateFin" ng-model="filtres.dateFin"/>
{{filtres.dateFin}}
<button type="button" ng-click="show()">Show it</button>
{{testDate}}
</div>
controller
function testCtrl($scope) {
$scope.show=function(){
$scope.testDate = $scope.filtres.dateFin;
}
}
It seems to work well.
Ok, so, a little thanks your example I managed to find the issue. In fact I had a min-value and a format like placeholder="dd/MM/yyyy" min="01/01/2014" and this was preventing my code which was similar to yours to work.
I think the problem was the format of the min parameter with the good format everything is ok :
min="2014-01-01"
My bad for removing for my code example on the question, I was juste trying to make it more readable.
so I am trying to bind value for input of type date..
Here is my AngularJS code that I am trying to bind the value to:
$scope.date = new Date();
$scope.dateString = dateFilter($scope.date,'dd-MM-yyyy');
And html:
<input class="date" type="date" ng-bind="dateString">
What I am trying to do, is I am trying to set default value to todays date. However, when I am loading my page, it just gives me following result:
<input class="date ng-binding" type="date" ng-bind="dateString">08-04-2015</input>
Any help will be more than welcome :)
Thanks,
uksz
You need to be using version 1.3 or higher for date support. you also want to use ng-model instead of ng-bind, because ng-bind is one way only