Develop Reference

Set input with datepicker to any string in AngularJS 1.5.8

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.

How can i add tag to text in search box

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.

while entering value into text box, it automatically taking full date default angular js

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

Issue on Updating Custom Attribute Data of Popover Dynamically

I am trying to add dynamically text into Bootstrap 3 Popover data-content="" at this demo. Basically what I want to do is updating the data-content="" text buy clicking different buttons. I tried to do this by adding:
$("#poper").('[data-content="City"]');
but this is not doing the job! Here is the jquery I have
$("#show-content-one").click(function(){
$("#poper").popover('show');
$("#poper").('[data-content="City"]');
$("#poper").popover('show');
});
$("#show-content-two").click(function(){
$("#poper").('[data-content="Country"]');
$("#poper").popover('show');
});
and HTML is:
Dynamic Content Popover
<input type="button" class="btn btn-info" id="show-content-one" value="content One" />
<input type="button" class="btn btn-info" id="show-content-two" value="content Two" />
Can you please help me to fix this? Thanks

To update a custom attribute use the method data().
$("#poper").data('content', 'city');
What you've written is a selector, not an updater.

Opening the angular-strap datepicker programmatically

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.