I am trying to extend the functionality of ui bootstrap for the datepicker. I wanted to use a draggable directive that I have already made for other elements, so I can drag the days. (The final functionality will beassigning that date to certain tasks). What would be ideal for me is not to modify the ui bootstrap libraries. I have tried to insert the directive in the final html of the datepicker and then use the compile, but I can't make it work.
Can anybody help me? Thank you very much
If you want a more powerful datepicker you can use the Dan Grossman's DateRangePicker.
There is also a good implementation for angular that you can use.
https://www.npmjs.com/package/angular-daterangepicker
Simply inject the library in your angular module.
App = angular.module('app', ['daterangepicker']);
Then declare a model in your controller.
exampleApp.controller('TestCtrl', function () {
var vm = this;
vm.datePicker.date = {
startDate: null,
endDate: null
};
}
Finally use the directive in your views.
<div ng-controller="TestCtrl as ctrl">
<input date-range-picker class="form-control date-picker" type="text" ng-model="ctrl.datePicker.date" />
</div>
Related
I have angularjs application and now I have added reactjs into my application but Now I get one confusion how to use angularjs existing directive in react js.
Can anyone help me to solve this problem?
Let's I give example code.
I have one existing directive fileselect in angular js and i want to use this directive in react js render function like this:
render() {
return (
<div className="attach-documents-controller">
<input id="file-upload" type="file" fileselect />
</div>
)
}
I have a problem with the model binding of my bootstrap datetimepicker, that doesn't update after selecting a date in the dialog.
When I directly edit the input field the binding gets triggered, but selecting doesn't update the binding.
I have a small
Plunker example
<body ng-controller="MainCtrl">
<p>Hello {{name}}! {{datum}}</p>
<div class="input-group">
<span class="input-group-addon add-on"><span class="fa fa-calendar"></span></span>
<input type="text" class="form-control datetimepicker" ng-model="datum"/>
</div>
</body>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.datum = new Date();
if($(".datetimepicker").length > 0){
$('.datetimepicker').datetimepicker({
format: 'YYYY-MM-DD HH:mm'
});
}
});
Plain bootstrap doesn't work with angular. You will need/should use a bootstrap-angular binding library instead of the bootstrap scripts. You still use the bootstrap css/sass/less etc. Angularstrap is one such library and it doesn't depend on jquery.
When you use angularstraps datepicker it will update your binding.
The (foul, hideous, messy) alternative is to bind an event handler to the bootstrap datepicker change event and from within there call $scope.digest() and/or trigger a changed event manually on the textfield element.
Good day dear colleagues. I have dataPicker in MaterialDesign on my page. In my page I want see just part of dataPicker it is calendar like this. Anybody knows how to implement it?
I want to see this:
Instead of this:
Here is a demo with bootstrap and angularjs with inline date picker:
http://plnkr.co/edit/7pnPeudbgTY3hd2SNATA?p=preview
The important part is to include in html:
script related to ui-bootstrap-tpls, in demo it is called angular-ui-bootstrap.js
to inject into your module, this bootstrap - in demo this is done by angular.module('plunker', ['ui.bootstrap']);
have the bootstrap css included
In html just add
:
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
</div>
and in controller initialize dt model: $scope.dt = new Date();
I have multiple elements with the same callback on ng-click:
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
<button ng-click="doSomething()"></button>
// In controller:
$scope.doSomething = function() {
// How do I get a reference to the button that triggered the function?
};
How can I get the reference to the object which made the call to doSomething? (I need to remove an attr from it)
While you do the following, technically speaking:
<button ng-click="doSomething($event)"></button>
// In controller:
$scope.doSomething = function($event) {
//reference to the button that triggered the function:
$event.target
};
This is probably something you don't want to do as AngularJS philosophy is to focus on model manipulation and let AngularJS do the rendering (based on hints from the declarative UI). Manipulating DOM elements and attributes from a controller is a big no-no in AngularJS world.
You might check this answer for more info: https://stackoverflow.com/a/12431211/1418796
The angular way is shown in the angular docs :)
https://docs.angularjs.org/api/ng/directive/ngReadonly
Here is the example they use:
<body>
Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
<input type="text" ng-readonly="checked" value="I'm Angular"/>
</body>
Basically the angular way is to create a model object that will hold whether or not the input should be readonly and then set that model object accordingly. The beauty of angular is that most of the time you don't need to do any dom manipulation. You just have angular render the view they way your model is set (let angular do the dom manipulation for you and keep your code clean).
So basically in your case you would want to do something like below or check out this working example.
<button ng-click="isInput1ReadOnly = !isInput1ReadOnly">Click Me</button>
<input type="text" ng-readonly="isInput1ReadOnly" value="Angular Rules!"/>
I have 3 questions
can i use angular js with kendoUi wrappers? if yes how?
if i am using angular js and kendo-all.min.js on the same html tag let say that we are converting an input tag to auto-complete and at the same time we are binding it with ng-model then what possible affect they can produce in each other?
what actually angular-kendo is?
code for Point No-2
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/Kendo/kendo.all.min.js"></script>
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/app.js"></script>*#
<script type="text/javascript">
$(document).ready(function () {
var data = ["akshay", "tiwari", "ranjit", "swain"];
$("#name").kendoAutoComplete({ dataSource: data });
})
</script>
<h2>KendoAngular</h2>
<div ng-app>
<input id="name" type ="text" ng-model="yourName"/>
<h2>{{yourName}}</h2>
</div>
There is a kendo project that you'll need to include: https://github.com/kendo-labs/angular-kendo
What will happen is that as the user types in say an autocomplete, the selection will be bound to an angular scope item. The "wrapper" is what makes all the bindings and allow angular to be updated.
From the github: angular-kendo is a directive for AngularJS that runs an element through Kendo UI declarative initialization, allowing you to take full advantage of Kendo UI within the context of an AngularJS Application.
You plunker is not including the angular adapter located at the link above.
Here are the instructions for its use: http://kendo-labs.github.io/angular-kendo/#/simple
var app = angular.module('your-angular-app', ["kendo.directives"]); // include directives
Add data-kendo and appropriate data- attributes.