[http://jsfiddle.net/shykwoh3/2/]
<span class="input-group">
<input type="text"
class="form-control"
ng-model="hole.date"
/>
<!--
datepicker-popup="yyyy-MM-dd"
show-button-bar="false"
is-open="opened"
-->
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="showDatePicker();">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</span>
I am trying to create a dynamic/on-demand date picker.
Explenation: I would like to have a single directive or controller function that can call or show a date picker but binding has to happen only on the fields which calander icons were clicked. I.E. It should not bind these input fields to a date picker etc. until the icon is clicked, the reson being, if I have lets say 1000 dates like these on a page, the page loads very slowly because of the date picker popup binding that is binded on page load.
The default popup datepicker works something like this:
Bootstrap.UI: angular-ui.github.io (Scroll down to Datepicker (ui.bootstrap.datepicker))
If anyone understands my problem and what I am trying to achieve please help me out: Something like Modal Date Picker but I don't want a Modal. The date picker should seem to work exactly like the popup date picker of http://angular-ui.github.io/bootstrap/ but the binding should not happen on page load, but on click only
Related
I'm building a small search app using Elasticsearch and AngularJS. I'm using AngularJS UI bootstrap typeahead to implement autocomplete and I'm using ES's edge_n_grams and highlight object to 1) generate the suggestions and 2) highlight the suggestions, respectively. ES highlight object wraps the suggestions in HTML <em></em> tags... which seems to be causing some issues with how I have things setup.
1) When I press Enter key instead of clicking on the search button - all that happens is the search terms are displayed wrapped in the <em></em> tags AND no search is performed... <em>search terms</em>
2) When I select a suggestion with the mouse, same thing happens.
The only time search performs is when I type a query in and click the search button...
Here is the search form that I'm using, I have ng-submit="search()" on the form element and on the button, not sure where I'm going wrong......?
<form name="q" ng-submit="search()" class="navbar-form" id="results-search" role="search">
<div class="input-group">
<input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="{{ searchTerms }}" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)">
<div class="input-group-btn">
<button type="submit" ng-submit="search()" class="btn btn-primary btn-md"><i class="fa fa-search fa-lg"></i></button>
</div>
</div>
</form>
Am I doing something wrong with the UI Bootstrap Typeahead?
More clarification
So basically what I'm asking is how do I get the tags stripped from the suggestions, on selection and for searching?
Similar kind of example already asked in Stackoverflow: Click here
I have a form with many fields, including several datepickers (Angular UI Bootstrap).
<div name="mainForm" ng-form>
<div class="form-group">
<p class="input-group">
<input type="text" name="dt"
class="form-control"
ng-model="dt"
is-open="opened"
datepicker-popup="MM/dd/yyyy" />
<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>
</div>
<p class="text-danger" ng-show="mainForm.$invalid">Invalid!</p>
</div>
I'm using Angular validation w/ the form. We have some required fields, but the dates are not. If you enter a date and remove it, it marks the form invalid. I created a Plunkr to demonstrate this.
Is there a way around this?
Note: It also logs this error in the console when you clear the date out.
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
In the current version of the code there is a $datepickerSuppressError value that you can set to true which will hide the console error. You can see in the code that it checks if the date is NaN and then displays the console error if $datepickerSuppressError is still false.
However, having said that, there is still a way to work around the issue of the form being invalid. You will just need to add an additional check to see if mainForm.$error.date is set, or something similar to this.
For example you can change your button to have this instead:
ng-disabled="mainForm.$invalid && !mainForm.$error.date"
Which will leave your button enabled even though the directive has set an error on the date and it should disable if any other field is invalid.
I'm currently working on a angular datepicker. To do so, I use the UIBootstrap datepicker. But I'm facing a problem. I need to use the init-date attribute :
init-date : The initial date view when no model value is specified.
The attribute seems to be available only on the datepicker directive. The fact is that I sue the popup datepicker and not the datepicker himself. There is the html for the datepicker-popup
Html
<input type="text" class="form-control " datepicker-popup="dd/MM/yyyy" ng-model="date" is-open="opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
I want to know If there is something like the init-date for the popup-datepicker. I had thougth about the datepicker-options but I wasn't capable of doing something who works with this idea. Nevertheless, is it possible to make it works with this datepicker-options ?
Well It was definitely on the datepicker-options but it doesn't works because of a problem due to a bug in angular-ui-bootstrap 0.12.1.0. This problem is solve in the latest version of angular-ui-bootstrap (0.13.0)
I am using Angular Strap BS-Select and trying to update dropdown 2 data based on dropdown1. I am not sure on how to achieve this behavior . I tried the following code which didn't helped
<button type="button" ng-model="filters.selectedCategory" name="categoryFilter"
data-html="1" ng-options="category.CategoryId as category.Name for category in filterList.CategoryFilter" placeholder="Select Category" bs-select>
</button>
<button type="button" ng-model="filters.selectedSubCategory" name="subcategoryFilter"
data-html="1" ng-options="category.CategoryId as category.Name for category in filterList.SubCategoryFilter | filter: {ParentCategoryId:filters.selectedCategory}"
placeholder="Select Sub.Cat" bs-select>
</button>
In the above subcategoryFilter button if i use hardcoded filter, the list is filtering: {ParentCategoryId:11}".
So how do I populate the subcategoryFilter button dynamically whenever there is a change in Category dropdown. My assumption from the ng-repeat sample of Angular was that whenever the ng-model/Scope gets changed the list will be filterd. Looks like i misunderstood and missing something here
I would like to have a excel-like table. I have it for all my fields except for the datepicker (http://angular-ui.github.io/bootstrap/)
When I double-click the date-field to update it, the datepicker isn't shown even if there is the autofocus on the input-field.
When I choose the date the blur event is triggered but the datepicker doesn't change the value.
If I remove the ng-blur event from the input-field the autofocus works (so if I double click on the field the datepicker appears) and the date changes, but obviously I can't catch the blur event.
The doneEditing function is used to store the changes to the DB and to make the fields editable (showing a span or an input-text).
This is the code:
<div style="width: 70px; height:30px" ng-dblclick = "startEditing(item)" ng-hide="item.editing">
<span>{{item.date | date:"dd.MM.yyyy"}</span>
</div>
<form ng-show="item.editing" ng-submit="doneEditing(item)">
<input type="text" ng-focus="focusEditing(item)" ng-blur="doneEditing(item)" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="item.date" required autofocus readonly/>
</form>