I am new to Angularjs, how can I extend md-datepicker directive to implement clickable calendar pane which gives month picker based on selected month-year it results as months. I know that we can archive this in angular material version1.1.1, but we are using angular material version1.0.1.
index.html
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.css">
</head>
<body>
<div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content>
<md-datepicker ng-model="birthdate" placeholder="Enter date" md-max-date="maxDate" ></md-datepicker>
</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function($scope, $timeout) {
$scope.birthdate = new Date();
$scope.maxDate = new Date(
$scope.birthdate.getFullYear(),
$scope.birthdate.getMonth(),
$scope.birthdate.getDate());
$scope.open = function() {
$timeout(function() {
$scope.birthdate = new Date();
$scope.maxDate = new Date(
$scope.birthdate.getFullYear(),
$scope.birthdate.getMonth(),
$scope.birthdate.getDate());
}, 400);
}
});
Related
I am trying to learn angular 1.5 and i am having difficulty getting the controller to display the text on the webpage. It display event.name instead of what is in the controller.
This is EventDetails.html
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.name}}
</div>
</div>
<script scr="/lib/jquery.min.js"/>
<script scr="/lib/underscore-1.4.4.min.js"/>
<script scr="/lib/boostrap.min.js"/>
<script scr="/lib/angular/angular.min.js"/>
<script scr="/js/app.js"/>
<script scr="/js/controllers/EventController.js"/>
</body>
</html>
my app.js
var eventsApp = angular.module('eventsApp',[]);
EventController
'use strict';
eventsApp.controller('EventController',
function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
}
);
Your controller should be,
eventsApp.controller('EventController',
function($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
}
);
DEMO
var eventsApp = angular.module('myApp',[])
eventsApp.controller('EventController', function($scope){
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
} ;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="EventController">
<div class="container">
<h1> {{event.name}} </h1>
</div>
</div>
</body>
You're missing an ng-app="myApp" declaration on your html which is why your angular app is not running.
Try to reverse the scripts loading order in your EventDetails.html.
app.js should be loaded last.
The right order should be:
<script scr="/js/controllers/EventController.js"/>
<script scr="/js/app.js"/>
and you should adopt the other comments as well, adding ng-app annotation (#geofrey comment) and refactoring your controller (#Sajeetharan comment)
Use "src" attribute instead "scr" (not "script scr=...") in script tags.
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<meta charset="utf-8">
<title>Event Registration</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
<div class="container">
<div ng-controller="EventController">
{{event.name}}
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script>
var eventsApp = angular.module('eventsApp',[]);
'use strict';
eventsApp.controller('EventController', function EventController($scope) {
$scope.event = {
name: 'Angular Boot Camp',
time: '10:30 am',
date: '1/1/2013'
}
});
</script>
</body>
</html>
My html and javascript are as follows, I have the following element
<i class="material-icons" ng-click="clicked()" md-48>add_circle</i>
Which works when clicked i.e. by bringing up a dialog, however the following on the same page does not work.
html
<body ng-cloak>
<div ng-cloak ng-controller="mainController" >
<div layout="row" layout-align="end end">
<md-button aria-label="Eat cake" ng-click="clicked()"></md-button>
</div>
</div>
</body>
angular
angular.module('notifyMe', ['ngMaterial', 'material.svgAssetsCache'])
.controller('mainController', function($scope, $mdDialog) {
$scope.clicked = function () {
alert('Worked!');
};
})
No, your code should work. Make sure you loaded the dependencies as below:
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.clicked = function () {
alert('Worked!');
};
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<div layout="column" layout-fill flex style="max-height:100%">
<md-toolbar>
<md-button ng-click=clicked()>Click here</md-button>
</md-toolbar>
</div>
</body>
</html>
I have attached plunker link for that.
This is my html
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.js"></script>
<script src="https://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="someController">
<div id="parent">
<h1>{{'HEADLINE' | translate }}</h1>
<button ng-click="switchLanguage('de_DE')" translate="LANG_DE_DE"></button>
<button ng-click="switchLanguage('en_US')" translate="LANG_EN_US"></button>
<button id="myButton" class="float-right submit-button" ng-click="showDiv()" >Click here</button>
</div>
<script type="text/javascript">
</script>
<div id="hello">
<span name="new" id="newpage" style="display: none;">
<h1 class="xx">{{'HELLO'| translate }}</h1>
</span>
</div>
</body>
</html>
app.js
angular.module('myApp', ['pascalprecht.translate', 'ngCookies']);
angular.module('myApp').config(['$translateProvider',
function($translateProvider) {
var language = (window.navigator.userLanguage || window.navigator.language).toLowerCase();
console.log(language);
$translateProvider.registerAvailableLanguageKeys(['de_DE', 'en_US'], {
'en_US': 'en_US',
'en_UK': 'en_US',
'en': 'en_US',
'de': 'de_DE'
});
$translateProvider.useStaticFilesLoader({
prefix: 'lang_',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');
// $translateProvider.use('de');
$translateProvider.useCookieStorage();
$translateProvider.fallbackLanguage("de_DE");
}
]);
angular.module('myApp').controller('someController', ['$scope', '$translate',
function($scope, $translate) {
$scope.switchLanguage = function(key) {
$translate.use(key);
};
$scope.showDiv = function()
{
var html = document.getElementById("newpage").innerHTML;
var container = document.createElement("span");
container.innerHTML = html;
document.getElementById("parent").appendChild(container);
}
}
]);
lang_de_DE.json
{
"HEADLINE": "Überschrift",
"LANG_DE_DE": "Sprache: Deutsch",
"LANG_EN_US": "Sprache: Englisch",
"HELLO" :"Neue Seite"
}
lang_en_US.json
{
"HEADLINE": "Headline!",
"LANG_DE_DE": "Lang: German",
"LANG_EN_US": "Lang: English",
"HELLO" :"New page"
}
In this New page text (show div function) wont update when i change language.
Plunker link https://plnkr.co/edit/1pBWUFZMbHx4zKzNRKzD?p=preview
Use ng-repeat, do not manipulate DOM inside the controller.
Change your span in something like this:
<span ng-repeat="div in divs">
<h1 class="xx">{{'NEWPAGE'| translate }}</h1>
</span>
and your showDiv function:
scope.divs = [];
$scope.showDiv = function()
{
$scope.divs.push({});
}
Updated plunker here.
You need clearly to think in a more angularjs way. DO NOT pollute your controller with jquery and dom manipulation code. That's not for what angularjs is for.
Read the docs on ng-repeat here.
Using AngularJs, I want to dynamically disable particular date of a Datepicker. Here what I have did.
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, $q) {
$scope.date1 = new Date();
$scope.date2 = new Date();
$scope.date2.setDate($scope.date2.getDate() - 1);
var currentDay = new Date();
$scope.isDateDisabled = function(date, mode) {
/*console.log("date=="+date.getTime());
console.log("currentdate"+$scope.date2.getTime());*/
if (date.getDate() === $scope.date2.getDate()) {
return true;
} else {
return false;
}
};
});
/* Put your css in here */
.padTop {
padding-top: 20px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container padTop">
<div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date1" min-date="minDate" show-weeks="true" date-disabled="isDateDisabled(date,mode)" class="well well-sm"></datepicker>
</div>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="date2" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
</div>
</div>
<p class="padTop">date1:</p>
<pre>
{{ date1 | date : 'dd/MM/yyyy' }}
{{ date2 | date : 'dd/MM/yyyy' }}
</pre>
</div>
</body>
</html>
It was disabled the date in 1st datepicker, which was selected in second datepicker. But If I change the date in 2nd datepicker It wont be reflected(i.e It wont be disabled in 1st datepicker). Anyway to handle this case?
AFAIK there is no clean way to do this, but the datepicker refreshes when you change your minDate attribute. So if you add this in your controller, it will work...
$scope.$watch("date2", function (newValue, oldValue) {
$scope.minDate= new Date();
$timeout(function () {
$scope.minDate = null;
}, 0);
});
I am unable to use AngularJS' ui-bootstrap's datepicker in the month mode.
Here's a plunker.
Here's my template:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="TestApp">
<div ng-controller="testController">
{{dt}}
<datepicker ng-model="dt.from" datepicker-mode="mode" min-mode="mode"></datepicker>
<datepicker ng-model="dt.to" datepicker-mode="mode" min-mode="mode"></datepicker>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.25/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here's my JS:
var app = angular.module('TestApp', ['ui.bootstrap'])
app.controller('testController', function($scope) {
$scope.dt = {to: '', from: ''};
$scope.mode = 'month';
})
Whenever I click on a month, it changes to the 'day' mode. This is working fine in the day mode.
Your code is working as-is with the latest version of Bootstrap UI (also requires a later version of Angular).
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
Plunker
If upgrading is not an option then hard-coding min-mode to month also works.
<datepicker ng-model="dt.from" datepicker-mode="mode" min-mode="month"></datepicker>
<datepicker ng-model="dt.to" datepicker-mode="mode" min-mode="month"></datepicker>