this may be a simple question, but I have looked and cannot find my answer...
I have an input box with an Angular-UI Bootstrap datepicker:
<input type="text" class="form-control"
id="id" name="id"
uib-datepicker-popup="MMddyyyy" ng-model="date"
is-open="isDatePickerOpen"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openFrom($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
This works fine for selecting dates. I can also enter free-form text, but it only binds properly when I enter a date in the format specified. If I enter something else like 'abcd', it binds to undefined. I suspect the datepicker itself is putting restrictions on what is allowed in the input box, but not sure how to remove those restrictions. I am open to using any datepicker that is supported by most browsers.
Related
I am working on a job-listing project that fetches jobs based on the selected country, now I am trying to create a search box that changes my text to tags just like StackOverflow's way of adding tags. I already have the figma design but implementing is the problem.
Here is the figma link: https://www.figma.com/proto/UE9D4alg1970WXIDnLAfVzHz/listing-by-country?node-id=96%3A0&scaling=min-zoom
<div class="input-group input-group-search">
<input id="search-text" value="" type="search" class="form-control" placeholder="Enter Job listing according to Countries">
<div class="input-group-btn">
<button class="btn btn-primary ml-2" id="search-submit" type="submit">Search</button>
</div>
</div>
I expect the result to produce tags immediately after or inside the search box. Thanks in advance
You could use something like: https://github.com/yairEO/tagify
or even:
https://selectize.github.io/selectize.js/
Google is your friend.
I am using input type="text" for entering date in my site for angular JS, while entering the text box, it is taking default value is 01/01/2001
below code I am using :
<p ng-controller="DatePickerController" class="input-group">
<input type="text" class="form-control" name="effectiveDate" ng-model="fieldValue" is-open="opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
{{fieldValue}} 01/01/2001
could you please help me out any one, Thanks in advance
You can use the date type in HTML5, then no need to do anything in AngularJS.
<input type="date" etc...
The FormController will only be $valid if a valid date is provided. You can make this necessary by Just adding a required attribute.
More info
I want dynamic text tool tip for input box and i have used bootstrap 3.1.1 here with angularjs 1.2.16
but i am getting value as undefined through ng-model of input box.
HTML
<div class="input-group">
<input type="text" class="form-control input-sm" ng-model="searchColumnOfDatagridQuery1" placeholder="Search {{columnData[0].text.toLowerCase()}} here" tooltip="Search {{columnData[0].text.toLowerCase()}} here" tooltip-trigger="mouseenter" tooltip-placement="bottom" tooltip-append-to-body="true">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="button" ng-click="searchColumnOfDatagrid(searchColumnOfDatagridQuery1,1)"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
JSFiddle
I have update my code here
Can any one tell me why i am not getting ng-model value here and how to resolve this issue?
How to get ng-model value of text-box because on click of button i am getting undefined value?
$.parent.Whatevermodel property you have is the solution. Please check following plunkr, it is working for me.
http://plnkr.co/edit/cnm0pGYXBHda4I5hpYYi?p=preview
Upvote and accept it as answer if it helps:)
I've found workaround for this here
you can change value of your ng-model attribute from searchColumnOfDatagridQuery1 to: $parent.searchColumnOfDatagridQuery1 and it should works just fine.
I am using AngularJS 1.2.12 and angular-strap 2.0.0-rc.2 (mgcrea.github.io/angular-strap/) and I can't find a way to open the datepicker/timepicker widget from within the controller. I want to use an input-group with a calendar-icon-button like this:
<div class="input-group">
<input class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
I now could easily provide an ng-click function for the button and open the calendar from my controller. I just can't find a way how to do this. Any ideas?
Another solution is to change the button to a label, and use the 'for' attribute. I like it because it eliminates extra javascript to open the datepicker, and also when tabbing the cursor won't stop on the icon anymore.
<div class="input-group">
<input id="createdDate" name="createdDate" class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text">
<span class="input-group-btn">
<label class="btn btn-default" for="createdDate">
<i class="glyphicon glyphicon-calendar"></i></label>
</span>
</div>
The documentation talks about opening the datepicker programmatically, but it doesn't give an easy way to get a reference to a datepicker that's already bound to an element.
In a project I'm working on I have a datepicker directive that wraps almost exactly the HTML you have into a myDatepicker directive. Inside that directive the ng-click method bound to the <button> element is essentially:
scope.openDatepicker = function() {
element.children('input').focus();
}
which worked well enough for me.
Since angular-strap has been rewritten to get rid of any bootstrap.js dependencies a lot of bugs and oddities have been introduced. I'm working on upgrading my project's codebase to the newer version of angular-strap, and I feel like going with UI Bootstrap would have been a better choice, since its codebase is a bit more mature.
I've started to learn angularjs not that much time ago. And I'm about to write some form application. The thing is that when I'm trying to output default value from select and some datepicker (got it from twitter bootstrap) into the table, it doesn't appear when page is loaded. Also, when I change date on datepicker it still doesn't appear in the table but if I change select options it appears. So how can I fix it? I need to output datepicker value when I change it + output default values when page is loaded.
Here's Datetimepicker
<label> <b> * Date and Time of Incident: </b> </label>
<div id="datetimepicker" class="input-append date">
<input type="datetime" ng-model="date" name="date" required></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
Here's random input:
<label> <b> * Reported By: </b> </label> <input type="text" name="report" ng- model="report" required / >
When I use: {{report}} - it shows what I've been entered, but if I use {{date}} it doesn't show anything, only If I write something manually, but I want disable this field for users so he can only choose dates\time.
You may want to check out this: https://github.com/angular-ui/ui-date. It's datepicker written as angular directive. You can find plenty of useful angular utils, modules and directives here: http://angular-ui.github.io/.
Ok. I think the problem is that Angular doesn't know about that change. For this you should call $scope.$digest() or make the change inside of $scope.$apply(function() { $()... }); But you need a controller for that.
Here are an example
Or you can use the "oficial" calendar for angular:
https://github.com/angular-ui/ui-calendar
Cheers!