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
Related
I'm using Scala-Play with the Play-Bootstrap extension and AngularJS. Since the controlling of the application is managed by AngularJS I need the form to be submitted and the response managed by AngularJS and not by the Play controller.
As I understand and using pure AngularJS one can use ng-model to link each input to a specific $scope nested variable e.g.
<form name="userForm">
<label>
Name:
<input type="text" name="userName"
ng-model="user.name"/>
</label><br />
<label>
Other data:
<input type="text" ng-model="user.data" />
</label><br />
</form>
is it possible to accomplish the same by using ng-model on the form tag? instead of applying it to each input? the problem is that it is not possible injecting the needed ng-model to each input while using Play-Bootstrap i.e. this doesn't work:
#b3.text(computeInSampleForm("impliedVolSpread"), '_label -> messagesApi("myapp.impliedVolSpread"),
'_showConstraints -> false, 'ng-model -> "impliedVolSpread")
it fails with error value - is not a member of Symbol it would work if I only knew how to escape the - dash character.
Since I already created a customized version of the b3.form as b3.bgform it would be great if I could do bg-model at the form level ... is that possible?
You can fix this error by explicitly converting to a Symbol:
Symbol("ng-model") -> "impliedVolSpread"
Or by using an implicit conversion import:
#import views.html.helper.Implicits._
I have an input which uses typeahead but the placeholder is not being rendered. What should I do to make it show the placeholder?
I'm using "angular-bootstrap": "~0.14.0"
<input type="text" name="scheduler_name"
ng-model="appointment.scheduler_name" uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
typeahead-loading="loadingSchedulers" typeahead-no-results="noResults"
typeahead-on-select="setSchedulerAttributes($item, $model, $label)" class="form-control input-lg"
placeholder="(Name, Carrier, Broker or Phone)" server-error>
Screenshot:
I'd recommend stripping down your typeahead to see where the problem lies. Start with the barebones typeahead:
<input type="text" name="scheduler_name" ng-model="appointment.scheduler_name"
placeholder="(Name, Carrier, Broker or Phone)"
uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
See if the placeholder displays as it should. If not check to make sure you actually have a falsy value for the ng-model value.
If it does display then chances are some of the other typeahead-related directives are overwriting it. My best guess is that typeahead-no-results="noResults" or something related is triggering and causing it to set the placeholder to "".
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="" ... />
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
I have a situation where I need to escape the following string to be used as the preloaded value for an input field. I would usually use data-bind-html but this doesn't show in the input box.
Here is my string:
"Website Design & Development"
and currently my input field is as follows:
<input class="form-control" type="text" ng-model="group.name" required>
When I use mg-model, it populates the input form value fine, but when I use the following:
<input class="form-control" type="text" ng-bind-html="group.name" required>
Am I doing this correctly or can someone see where I am going wrong? I would ideally like a way to escape the html entities in the controller before it gets shown in the view but I am not sure if this is possible?
Thanks