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();
Related
I'am using fullcalender and need to change some navigation buttons with AngularJS. I do not have much experience with AngularJS so the JS Code would be somthing like this:
var filter = $(".fc-filter-button");
filter.html("<i class='fas fa-filter'></i>");
filter.attr("id", "dropdownFilterButton");
But how can i archive this and some other usual JS/JQuery Tasks with AngularJS. I know i can use JQuery too but want to do it in the right Angular way.
I tried something like this:
element[0].getElementsByClassName('fc-filter-button').html("<i class='fas fa-filter'></i>")
or
var queryResult = element[0].querySelector('.fc-filter-button');
angular.element(queryResult).html("<i class='fas fa-filter'></i>")
How can i make these changes without touching the fullcalender code itself.
Take a look at the NgSanitize module "The ngSanitize module provides functionality to sanitize HTML".
Here's an basic example which should get you going in the right direction
angular.module('app', ["ngSanitize"])
.controller('myCtrl',function($scope){
$scope.content = "<p>The initial html</p>";
$scope.changeHtml = function(){
$scope.content = "<h3>The changed html</h3>";
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular-sanitize.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<button ng-click="changeHtml()">Change html</button>
<div ng-bind-html="content">
</div>
</div>
I have put an md-datepicker in an md-table md-cell. Because of something with my layout my datepicker content is not rendered correctly.
My controller logic:
app.controller("testCtrl", function(){
$scope.authPerson = {};
$scope.authPerson.dateStart = new Date();
$scope.authPerson.dateEnd = new Date();
});
My view:
<md-card>
<md-card-content>
<md-table-container>
<table md-table>
<tr md-row>
<td md-cell>
<md-datepicker ng-model="authPerson.dateStart"></md-datepicker>
</td>
</tr>
</table>
</md-table-container>
</md-card-content>
</md-card>
When I open the datepicker, the container is empty. Screenshot is attached.
Thank you in advance for your help.
Update #1
I have put the md-datepicker in body and it still doesn't work (works the same way).
<body ng-cloak layout="row" ng-controller="AppCtrl">
<md-datepicker ng-model="test" ng-disabled="false"></md-datepicker>
</body>
AppCtrl:
$scope.test = new Date();
I think this might be a dependency issue - Moment or something else.
Update #2
I have been able to create a plunkr replicating the problem.
https://plnkr.co/edit/4YBK4Eb8LVNeQbH5wIac
I notice that your ng-model is authperson.datestart , but your scope variable is authPerson.dateStart
I think it's case sensitive, so it is filling your model with empty data.
I found out that it is a bug reported in Angular Material Github https://github.com/angular/material/issues/10070
This bug occurs when using AngularJS 1.6.0 and Angular Material 1.1.0
Going to revert to AngularJS 1.5.9 until the fix.
Reverting from angular-material version 1.1.1 to version 1.1.0 solved it for me. I use angular version 1.6.1
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.
I have a view where I would like to provide some tool tips to users based on the dates that they select on the datepicker. I can easily add tooltips to the datepicker, but that gets positioned on top of the datepicker as a whole.
In index.html:
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:400px;">
<datepicker ng-model="dt" tooltip="{{dynamicMsg}}" show-weeks="true" class="well well-sm"></datepicker>
</div>
</div>
In example.js:
$scope.$watch('dt', function(newVal, oldVal) {
var today = new Date($scope.events[0].date).setHours(0, 0, 0, 0);
var dayToCheck = new Date(newVal).setHours(0, 0, 0, 0);
if (today === dayToCheck) {
$scope.dynamicMsg = 'Room Unavailable';
} else {
$scope.dynamicMsg = 'Room Available';
}
});
See Plunker here: http://plnkr.co/edit/qk7AXWJdkm3wB74JoaLw?p=preview
What I would like to do is to position the tooltip exactly on top of the date that the user chooses, rather than how it shows up on the plunker. I am guessing some funky CSS tricks should help here, but I am unable to think of how this once can be done? Will appreciate any help from the community. Cheers!
Step One: Implement Angular UI Bootstrap Datepicker in your app. If you run into any issues, post code in a new question regarding your attempt at implementing datepicker.
Step Two: Implement bootstrap tooltips. If you run into any issues, post code in a new question regarding your attempt at implementing tooltips.
Step Three: Implement tooltips in your datepicker. If you run into any issues, post code in a new question regarding your attempt at implementing integration between tooltips and datepicker.
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>