Open bootstrap angular range date picker on click - javascript

I want to open Angular bootstrap range datepicker on click. The below code is working fine for normal datepicker. How do I open a bootstrap range datepicker?
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [displayMonths]="displayMonths" [navigation]="navigation" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="d .toggle()" type="button">
<img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
</button>
</div>

Probably already solved this.
You have access to dayTemplate when using the datepicker directive.
[dayTemplate]="t"
Your template start look like so ...
<ng-template #t let-date="date" let-focused="focused">
For this example I put the calendar click handler inside the ng template. But you can just as easily put it inside of the template. Remember with View child you can get hold of the datepicker methods that you would use such as open, close, and toggle.
https://stackblitz.com/edit/angular-skbpc8?file=app%2Fdatepicker-popup.html
A challenge that I have not figured out is getting both dates inside of the input field but you have to and from.
Much of this is taken from examples shared on the examples and api views.

Related

how to use jquery ui only datepicker with datemonth?

I'm using jquery ui datepicker but I'm not using another components of jquery ui (tab,accordion,autocomplete and other..) just datepicker that's why I choose custom download..everything is okey my datepicker is work very well but my month picker is not working I'm Monthpicker plugin for month my plugin give me a error but if I'm using full jquery ui with all components my monthPicker is working but I have to use only with datepicker
please click to see my demo
<div class="example">
<h1>This is example datepicker</h1>
<input type="text" placeholder="Chekin" id="checkin">
</div>
<div class="project">
<h1>And this is the project monthPicker</h1>
<input type="text" id="noIconDemo" />
</div>
It says in the alert that you need both Button and Datepicker, and you say you only have Datepicker. You should try downloading a custom build with both plugins.
https://jqueryui.com/download/#!version=1.12.1&components=100001011000000000011110000000000000000000000000

Several radio button groups in nested ng-repeat, but only last group shows the value

I have a page where I want to update a form with several radio buttons. I query an api, and use the returned array of objects to populate the current values for the radio buttons. The problem that I have is that only the last set of radio buttons actually shows the value. This is the code that I have (I am using [[ and ]] for the start and end symbols for angular):
<fieldset data-ng-repeat="s in sections">
<div class="form-group">
<div class="col-md-12">
<h2>[[ s.section.name ]]</h2>
</div>
</div>
<!-- Field Item -->
<div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
<div class="col-md-12 m-b-30">
<h4>[[ f.field.name ]]</h2>
<input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
<label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
<label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
<label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
<label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
</div>
</div>
[[ f.field_condition ]]
<hr>
</fieldset>
So basically, I have several sections, and each section has several fields. Each field has it's own radio button group (I am using the section and field ids to name the radio group). What I currently see is only the last field in each section actually shows the selected radio button. The other fields don't have any selection, even though the value for ng-model definitely does (I am showing the value of f.field_condition just to make sure there is a value).
For each field, I can see that the model is set. And if I select a value manually, I can see that the model changes, so it seems to me that the model is setup correctly. I just don't know why it won't initially show as selected for all rows but the last one.
I should also mention that if I save the form even with the missing radio button selections, the database is updated properly (it doesn't set the values to null, and if I manually change the selected value, it is updated in the db as well).
Does anyone have any ideas? Thanks!
EDIT
Here is a fiddle for this, although, it is working as expected in the fiddle. http://jsfiddle.net/dq8r196v/367/
I tried using the static data that I used in the fiddle, but I am still having the same problem. Does anyone know if this could be a CSS problem? The radio buttons are styled, and I didn't write the HTML or CSS.
UPDATE
I am still having this issue, so I built a new angular app and only used the code that is included in the fiddle that I have created. I am having the same problem with this new app, even though the same code works in the fiddle. I really don't understand what's happening here, but if anyone could shed some light, I would really appreciate it.
I have literally copied and pasted the code from my fiddle into a new angular app, and only the last group of radio buttons in each section is showing the value in the app.
Here is my complete code for the new angular app if someone else wants to try it out and see exactly what is happening: https://pastebin.com/qSR33yfM
I created the app on a single page for simplicity.
Here is the link to a pastebin with the exact json that I am using in my app: https://pastebin.com/utfVVQfT
I fixed the problem you're having by simply adding an array of objects ($scope.values) representing the different radio button options, and using an ng-repeat to create your radio buttons. See the following for the updated code: https://pastebin.com/s3hNzaXX
I know there are semantics around ng-repeat creating new $scopes, and imagine there is a conflict in scopes with your nested ng-repeats where it's binding to the radio buttons incorrectly and at a scope different than you want (the section level ng-repeat).
To confirm this suspicion, you could convert all of your interpolations in the code to use functions and console.log s and f at different points and confirm that field_condition is being set at a level you didn't intend.
Either way, it' best practice to create your radio buttons through data (and using ng-repeat), as is done with the $scope.values array, and a good side effect to doing this is not only can you update the different value options using data through AJAX or however you would like, but you won't have weird angular scoping issues as you're experiencing in your current code above.

uib-datepicker-popup with dynamic minMode

How can I set the minMode of Angular Bootstrap Datepicker dynamicly?
The only way that I got it, was with the following:
<input type="text" ng-model="myDate"
uib-datepicker-popup="{{datepickerFormat}}"
datepicker-options="{'minMode': minMode}"/>
In Controller
...
$scope.minMode='day';
It works well, but when the minMode change and the datepicker reopen, I have a $compile:nonassignNon-Assignable error in the browser console. So I would like to do something like:
<input type="text" ng-model="myDate"
uib-datepicker-popup="{{datepickerFormat}}"
min-mode="minMode"/>
But unfortunately, it does not work anymore.
Angular version: 1.5.9
Bootstrap version: 3.3.7
angular-bootstrap version: 1.2.5
See in Plunker
You are not placing the minMode value correctly
Because you place options in your datepicker and later change these options with your buttons, you need to have that options object defined in your controller and refer to it in both places.
<div class="input-group">
<input type="text"
ng-model="myDate"
is-open="showDatePicker"
uib-datepicker-popup="mm-dd-yyyy"
datepicker-options="options"/>
</div>
In controller
$scope.options = {'showWeeks': false, 'minMode': 'month'};
Now you can alter that minMode property using your ng-click expressions
<button ng-click="options.minMode = 'day'" class="btn">Day</button>
<button ng-click="options.minMode = 'month'" class="btn" >Month</button>
Updated plunk

Delete AngularUI Accordion on ng-repeat

So I'm trying to add a delete function to my ng-repeating accordion.
The button is displayed and the function is set up, but when the delete button is pressed the page reloads almost and then redirects to localhost:8080/# however it should not redirect to here, and there is nothing suggesting it should redirect to here, not that I can see anyway, maybe this is one of the problems? However I'm unable to see were this would originate from..
As the application isn't hosted yet once the page is refreshed, all of the data is lost, as it is passed to the current editing view, by the view before it, which displays them in a table until you click on one of the rows and get taken to said editing page.
Here is my JS delete function:
$scope.delete = function (index, event) {
if(event) {
event.preventDefault();
event.stopPropagation();
}
$scope.selectedTestScript.Actions.splice(index, 1);
}
And here is my ng-repeat accordion:
<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="action in selectedTestScript.Actions" is-open="action.isOpen" ng-click="action.isOpen=!action.isOpen">
<uib-accordion-heading>
<div>{{action.Description}}<button type="button" class="btn btn-xs btn-danger pull-right" ng-click="delete($index, event)"></i>Delete</button></div>
</uib-accordion-heading>
<div>
<label for="actionNotes" class="control-label col-xs-2">Action Notes</label>
<div class="col-xs-10">
<textarea id="actionNotes" type="text" rows="4"ng-model="action.Notes" class="form-control" name="name"></textarea>
</div>
</div>
<div>
<label for="actionExpected" class="control-label col-xs-2">Action Expected</label>
<div class="col-xs-10">
<input id="actionExpected" type="text" ng-model="action.ExpectedOutcome" class="form-control" name="name">
</div>
</div>
</uib-accordion-group>
</uib-accordion>
Any help would be much appreciated, I've tried simplifying the function and removing the if(event) statement and leaving it as a splice, but this also doesn't work.
Thanks in advance.
I guess you have a form surrounding the code you posted?
If that is the case, using <button> with no type specified defaults it to type=submit, which triggers the original HTML form submit, thus the redirect.
You can set type to button to prevent that from happening.
Also action.isOpen==!action.isOpen doesn't look correct, do you mean single =?
Edit: There is actually a paragraph under ui-bootstrap accordion that reads
Known issues
To use clickable elements within the accordion, you have to override
the accordion-group template to use div elements instead of anchor
elements, and add cursor: pointer in your CSS. This is due to browsers
interpreting anchor elements as the target of any click event, which
triggers routing when certain elements such as buttons are nested
inside the anchor element.
http://angular-ui.github.io/bootstrap/#/accordion

Validating input using Angularjs on IE8

I have a form (made using divs) that gets displayed when i select an option using dropdown menu.
Am using ng-options for dropdown selections. My issue is I need to support IE8. I know IE8 does not support HTML5, and I can not use the 'required' tag. Thus, I am trying to use the "ng-required" option for form validation but it does not seem to work. I have looked at the jquery validator but I have many forms and each have different criteria. For example, I have a form which requires State/Country in input box which is required for a particular option. However, the same field is optional with the other option. To me, writing a validation for each is not the right approach since am trying to leverage angularjs.
Please help.
For example, one of the field is:
<div style="float:left; width:290px;margin-bottom: 8px;">
<div style="float:left; margin-right:8px; width: 113px; text-align: right;"> (*)Document Number: </div>
<div style="float:left; margin-right:8px;width: 160px;">
<input type="text" ng-model="customerData.docNmbr" placeholder=" Document Number" class="ng-pristine ng-valid" ng-required> </div>
</div>
and my submit button is:
<button type="submit" id="submitButton" ng-disabled="userForm.$invalid" class="btn btn-primary">Register</button>
What you have to do is to use another library like modernizr. The main objective of this library is to standardize somehow old browser like IE8 with some of the new HTML5 Features. If you want to learn more about it this is a good article:
http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

Categories