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
Related
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.
I have implemented the Angular 2 ng2-auto-complete component by following this example. You can access it from here also.
The issue I'm facing is, my source is in the form of an object with id as one of the fields. And by following the implementation example of the component, the id is displayed in parenthesis in the dropdown. Is there a way to not display the id in the dropdown?
Here is my HTML code for the auto-complete component:
<input ng2-auto-complete id="inputEvent" class="form-control" [(ngModel)]="model" ngModel
name="event" #event="ngModel" [source]="items" display-property-name="name" (valueChanged)="onSelect($event)"/>
This is what I get:
You need to set value-property-name attribute to null:
<input ng2-auto-complete id="inputEvent" class="form-control"
[(ngModel)]="model" ngModel name="event" #event="ngModel"
[source]="items" value-property-name=null
display-property-name="name" (valueChanged)="onSelect($event)"/>
value-property-name is optional attribute, but it has default value - id. Setting it to null won't display anything, which is what you are looking to accomplish.
you can try ang2-autocomplete
the live sample is available at : plnkr.co/edit/5zRD0fcOZHXEMOk4kupY?p=preview
I am trying to use the value of $scope.commentText but when I call addComment() the scoped variable is empty eventhough it is bound. As a workaround I pass the commentext as a parameter value that works but still it should work. My question how do I clear out commentText which is bound to a text input ... but it does not work as expected either. I looked around... and I am missing something cause I am doing exactly as the docs tell me how to. So... anyone?
$scope.user = "WM";
$scope.commentText='';
$scope.addComment = function(plan, commentText) {
console.log(commentText)
plan.comments.push({text:commentText, user:$scope.user);
commentText=null;
$scope.commentText=null;
};
and the view:
<form ng-submit="addComment(plan, commentText)">
<div class="input-group">
<input class="form-control" type="text" ng-model="commentText" size="30" placeholder="add new comment here">
<span class="input-group-btn">
<input class="btn btn-primary" type="submit" value="add">
</span>
</div>
</form>
plunker: http://plnkr.co/edit/lG0Ckjctsj9Hu83lTydh?p=preview
use this.commentText=null; instead of $scope.commentText=null in the addComment method.
Updated your plunkr
Edit: I started typing up an explanation when I noticed there is an excelent one right here:
'this' vs $scope in AngularJS controllers
I'm using the AngularStrap version of the Bootstrap datepicker and timepicker in my AngularJS app. I'm trying to make the date picked in the datepicker to a required field and have the following code:
<form name="timepickerForm" role="form" novalidate>
<input type="text" ng-model="timeDateInput" bs-datepicker required>
<input type="text" ng-model="timeDateInput" bs-timepicker required>
<input type="text" ng-model="title">
<button type="button" ng-click="handleStart()" ng-disabled="timepickerForm.$invalid">Start</button>
</form>
The button does not get disabled even though it has no input. If I put requiredon the last and regular input, the button gets disabled, so there's nothing wrong with the form or button. I can't find any documentation on the AngularStrap page or in their code to see if it is possible or not.
Does anyone know why it's not working?
The problem was that I, in my controller, set $scope.timeDateInput to an empty string at initialization and that disabled the "required" validation. Once I removed that (or set it to undefined instead) it started working.
I have an angular form which was using angular's built-in validation successfully. Take the following markup for example:
<form name="numberForm" novalidate>
<input type="text" required />
<button type="submit">Submit</button>
</form>
When the browser loads, the input field renders like this (unnecessary attributes removed):
<input class="ng-pristine ng-invalid ng-invalid-required" />
If I were to enter a value in the input field, the markup turns into:
<input class="ng-dirty ng-valid ng-valid-required" />
All of this was working great. Then I implemented two jQuery plugins to implement some masking/input formatting for the form: autoNumeric and jQuery.maskedinput. Now, nothing I do will change the original ng-pristine ng-invalid... classes on the input. It also doesn't seem to allow the binding of models to be successful either.
Any ideas?
I tried creating a http://jsfiddle.net/ma44H/3/, but can't seem to figure out how to get it to work.
JQuery and Angular do not cooperate well
Chocolate and Peanut Butter taste great together, but AngularJS and JQuery are a painful mix. We've all tried (with varying success) to accomplish this.
The problem is that JQuery DOM manipulation works outside of AngularJS Digest Cycle. The lesson is usually that using pure Angular is better.
Alternative #1: Angular UI
Try Angular-UI. Set of tools every Angular Developer could use.
Whatever Mask you want to implement can be done with their ui-mask directive:
Want a Date Mask?
<input type="text" ng-model="date" ui-mask="99/99/9999" />
Currency Mask?
<input type="text" ng-model="currency" ui-mask="$99999999.99" />
Phone Mask?
<input type="text" ng-model="phone" ui-mask="1 (999) 999-9999" />
:
See Fiddle
:
Alternative #2: Filters
Angular has built-in filters:
Currency:
$filter('currency')(amount, symbol)
Date:
$filter('date')(date, format)
Insist on using JQuery? Try the jQuery Passthrough directive from the angular-ui toolset. I haven't made use of this directive but it's an intriguing option:
To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note
that the name of the function must be identical. This also works for
normal jQuery commands such as $.fn.slideUp().
To pass parameters use the ui-options attribute. The value will be
evaluated in the $scope context and passed to the function. If
defaults are set, the passed options will extend them. If a string is
passed, the default options will be ignored.
Use the directive name jq for namespacing inside uiJqConfig. Then
sub-namespace options for each function by the name of that function
(exactly as it is passed to ui-jq) so that you don't have to pass
options every time you call the directive.