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.
Related
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.
I'm working on a web app which makes use of UI-Bootstrap's datepicker and timepicker directives. For the datepicker I am using a simple popup dialog, and for the timepicker I simply have the dialog on the page next to the datepicker.
Unfortunately I am having difficulty getting these two directives to work together. When the user selects a date, everything works correctly, but when the timepicker is updated, I'm not sure how to get it to consequently update the datepicker as well.
I considered two options for getting around this, the first one was to have the timepicker simply update the ng-model of the datepicker whenever it is changed, but unfortunately this does not also retroactively change what is displayed on the datepicker, so does not work for me. The second option I thought about was having the directives interact with each other, but unfortunately I am a novice at looking at and editing directives, so would need some help with this solution.
If anyone knows of a way to achieve what I want with the dynamic updates, please give me any advice you can offer.
Here is the HTML of my schedule view from the Plunker, which is attache below:
<div class="col-md-12 container-fluid" style="padding-bottom:20px">
<div class="container-fluid" ng-style="vm.contentStyle">
<h2>Schedule</h2>
<!-- DatePickers -->
<div class="col-md-11" style="padding-bottom:20px">
<div class="col-md-6">
<p><label class="control-label" style="color:#AAB4BE" for="startDate">{{ vm.displayName }}</label></p>
<p class="input-group">
<input type="text" class="form-control" ng-change="vm.datePick()" datepicker-popup="yyyy-MM-dd HH:mm" id="startDate" ng-model="vm.date" is-open="vm.opened.start" datepicker-options="vm.dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event, 'start')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6" style="padding-top:2px">
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.timePick()" show-meridian="false"></timepicker>
</div>
</div>
</div>
</div>
Here is a plunker with an example of what I am trying to do. If there is anything further I can provide that would help with answering this question, please let me know!
Unfortunately you can't just update the model so you have to break the reference by reassigning the model with the new value. I forked the plunker above and fixed it in this version.
vm.pickTime = function(dateTimestamp) {
var newDate = new Date(dateTimestamp);
newDate.setHours(vm.time.getHours());
newDate.setMinutes(vm.time.getMinutes());
vm.date = newDate;
};
I also introduced a form element to make things a little more clean.
I found a Plunker that may help you.
http://plnkr.co/edit/QujX5A?p=preview
<datetimepicker min-date="minDate" show-weeks="showWeeks" hour-step="hourStep"
minute-step="minuteStep" ng-model="date" show-meridian="showMeridian"
date-format="dd-MMM-yyyy" date-options="dateOptions"
date-disabled="disabled(date, mode)"
readonly-date="false"
readonly-time="false"></datetimepicker>
Is this what you were looking for?
Your plunker has typos in it.
You defined vm.pickTime and vm.pickDate in the controller and called vm.timePick and vm.datePick in html.
I fixed them in this plunker.
<timepicker ng-show="vm.date" ng-model="vm.time" ng-change="vm.pickTime()" show-meridian="false"></timepicker>
I use a this datePicker : http://eonasdan.github.io/bootstrap-datetimepicker/ with AngularJS, like this :
<div class='col-md-2'>
<div class="form-group">
<label>End date</label>
<div class='input-group date' id='endDate' data-date-format="YYYY-MM-DD">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
In real world the date format is set in $socpe.dateFormat in my controller, but I don't know how to bind a $scope.dateFormat in the attribute data-date-format.
Your problem is that you're trying to combine angularjs with a jquery plugin. You could create a custom directive to wrap it, but why not use something already meant for angular? A couple choices would be angular-ui bootstrap or AngularStrap.
Finally I used angular-ui bootstrap datepicker instead of bootstrap-datepicker, it works very fine with less code.
Thank you #theJoeBiz for your hint.
I have the following markup. The function isn't called when you click on the icon and there are no errors logged to the console.
Online search hasn't shown others with this issue, so either it's a feature of the 'input append' markup or I've got something basic wrong that I'm just not seeing.
I'm using bootstrap 2.3 and angularjs 1.2.13
<div class="input-append input-block-level">
<input type="text" name="myFieldName" ng-model="model[field]"
class="input-block-level ng-pristine ng-valid ng-valid-required"
placeholder="My Field Name" ng-required="false">
<a class="btn add-on" ng-click="aCtrlFunc('my field name')">
<i class="icon-search"></i>
</a>
</div>
The form works, the model is updated as expected when typing into the field and on form submit. Why doesn't this button click work?
update
Mystery solved. It's a scope issue, like this one: https://stackoverflow.com/a/16489532/149060
The form fields are generated by a directive who's templates include ngRepeats. I didn't think of it because I didn't think it was using an isolate scope.
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.