Dates are coming from API for me. I need to display the date in a md-datepicker field. I'm getting date but it is not displaying in a datepicker.
Date is not fetching in a datepicker. Can anyone please tell how to display in a datepicker field.
var app = angular
.module('app', ['ngMaterial', 'md-steppers']);
app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$scope.dateBirth = new Date(2014, 3, 19);
var a = new Date($scope.dateBirth)
var day = a.getDate();
var month = a.getMonth() + 1;
var year = a.getFullYear();
$scope.anniversaryd = month + "/"+day+"/"+year;
alert($scope.anniversaryd);
}]);
h1 {
text-align: center;
}
<div ng-app="app" ng-controller="mainCtrl as vm">
<h2>
Selected Date: {{(anniversaryd | date) || 'null'}}
</h2>
</h2>
<md-datepicker
ng-model="anniversaryd"
md-date-filter="vm.isAvailable"
></md-datepicker>
</div>
You need to pass Date instance instead of string to md-datepicker.
var app = angular.module('app', ['ngMaterial']);
app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$scope.dateBirth = new Date(2014, 3, 19);
$scope.anniversaryd = $scope.dateBirth;
console.log($scope.dateBirth);
}]);
h1 {text-align: center;}
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl as vm">
<h2>
Selected Date: {{(anniversaryd | date) || null}}
</h2>
</h2>
<md-datepicker
ng-model="anniversaryd"
md-date-filter="vm.isAvailable"
></md-datepicker>
</div>
Related
In AngularJs I get a date in this format : ["2018-01-03T09:30:54.264Z"].
I want it to be in the format : "2018-01-03T09:30:00"
How can I get it in this format?
Controller.js
var myDate = new Date();
$scope.form.date.push(myDate);
template
<div class="col-lg-12 photo-container" ng-repeat="photo in selectedPhotos track by $index" ng-if="add">
<input id="myDate" type="datetime-local" name="date[]" ng-model="form.date[$index]">
<img ng-src="{{photo}}" class="thumb">
</div>
You are not being clear about how you are doing it, but here is a working example (work from it):
var app = angular.module('myApp', []);
app.controller('dateCtrl', function($scope) {
$scope.form = {
"date": []
};
for (let i = 0; i < 5; i++) {
var myDate = new Date();
$scope.form.date.push(myDate);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="dateCtrl">
<div ng-repeat="date_ in form.date track by $index">
<div>1: {{ date_ | date : 'yyyy-MM-ddThh-mm-ss' }}</div>
<div>2: {{ form.date[$index] | date : 'yyyy-MM-ddThh-mm-ss' }}</div>
<br/>
</div>
</div>
</body>
</html>
you can use moment.js to achieve that i.e.
var d = moment("2018-01-03T09:30:54.264Z").format('YYYY-MM-DDThh:mm:ss') .
it will give you the required format, put whatever format you want as string in format() function.
first inject $filter to your controller then try this:
var myDate = new Date();
myDate = $filter('date')(myDate , "YYYY-MM-DDThh:mm");
$scope.form.date.push(myDate);
This is an AngularJS inheritance code where the inheritance is applied in the functions but there is no output coming for this code.
custDetails and empPaycheck are the two functions where inheritance is applied but the code has some error which I am not been able to find.
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controller Inheritance</title>
<script src="angulaar.min.js"></script>
<script>
var app = angular.module("sample",
[]).run(["$rootScope",function($rootScope){
$rootScope.taxPe`enter code here`rcent = 30;
}]);
app.controller("custDetails", ["$scope",function($scope) {
$scope.Name = "Dipanshu";
$scope.Sal = 45000;
$scope.Dept = "Testing";
}]);
app.controller("empPayCheck", ["$scope", "$rootScope",
function($scope, $rootScope) {
$scope.getTaxes = function() {
return $scope.Sal * $rootScope.taxPercent / 100;
};
$scope.getNet = function() {
return $scope.Sal - $scope.getTaxes();
};
}]);
</script>
</head>
<body ng-app="sample">
<div ng-controller="custDetails">
Employee Details of {{Name}}
<div ng-controller="custDetails">
{{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong>
Department.
<div controller="empPayCheck">
Tax: {{getTaxes()}}
<br> Net Amount: {{getNet()}}
</div>
</div>
</div>
</body>
</html>
You should use $scope.$parent to access parent $scope variables in a child controller.
Also in your HTML code there's a typo where controller should be ng-controller.
Look at the following working example.
var app = angular.module("sample", []).run(["$rootScope", function($rootScope) {
$rootScope.taxPercent = 30;
}]);
app.controller("custDetails", ["$scope", function($scope) {
$scope.Name = "Dipanshu";
$scope.Sal = 45000;
$scope.Dept = "Testing";
}]);
app.controller("empPayCheck", ["$scope", "$rootScope",
function($scope, $rootScope) {
$scope.getTaxes = function() {
return $scope.$parent.Sal * $rootScope.taxPercent / 100;
};
$scope.getNet = function() {
return $scope.$parent.Sal - $scope.getTaxes();
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">
<div ng-controller="custDetails">
Employee Details of {{Name}}
<div>
{{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong> Department.
<div ng-controller="empPayCheck">
Tax: {{getTaxes()}}
<br> Net Amount: {{getNet()}}
</div>
</div>
</div>
</body>
There is error in your module run block near $rootScope.taxPe;
You are using controller attribute instead of ng-controller.
Here is a working code snippet:
var app = angular.module("sample", []).run(["$rootScope", function($rootScope) {
$rootScope.taxPercent = 30;
}]);
app.controller("custDetails", ["$scope", function($scope) {
$scope.Name = "Dipanshu";
$scope.Sal = 45000;
$scope.Dept = "Testing";
}]);
app.controller("empPayCheck", ["$scope", "$rootScope",
function($scope, $rootScope) {
$scope.getTaxes = function() {
return $scope.Sal * $rootScope.taxPercent / 100;
};
$scope.getNet = function() {
return $scope.Sal - $scope.getTaxes();
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="sample">
<div ng-controller="custDetails">
Employee Details of {{Name}}
<div ng-controller="custDetails">
{{Name}} earns {{Sal}} rs and is in <strong>{{Dept}}</strong> Department.
<div ng-controller="empPayCheck">
Tax: {{getTaxes()}}
<br> Net Amount: {{getNet()}}
</div>
</div>
</div>
</body>
P.S.: Personally I would not recommend using $rootScope and scope inheritance, you can use services to share data between controllers. Also would suggest you looking into component API that comes in v1.5+.
I'm new to AngularJS. I was trying to find the center point on the page with JavaScript then bind it to the $scope object. I'm not entirely sure if I bound the JavaScript variables correctly. After I did that, I was trying to preview the values in my HTML page. When I ran the code it threw an error message.
<script type="text/javascript">
var Page_Center_Width = $(window).width() / 2;
var Page_Center_Height = $(window).height() / 2;
</script>
<script>
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl" >
<div >Window-Width: {{Window_Width}}</div>
<div >Window-Height: {{Window_Height}}</div>
</div>
var Page_Center_Width = $(window).width() / 2;
var Page_Center_Height = $(window).height() / 2;
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<div>Window-Width: {{Window_Width}}</div>
<div>Window-Height: {{Window_Height}}</div>
</div>
You have different problem at your snippet. You put script tag on javascript section.
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $interval, $window) {
$scope.Window_Width = $window.Page_Center_Width;
$scope.Window_Height = $window.Page_Center_Height;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<div>Window-Width: {{Window_Width}}</div>
<div>Window-Height: {{Window_Height}}</div>
</div>
<script type="text/javascript">
var Page_Center_Width = 3434;
var Page_Center_Height = 1222;
</script>
I'm able to get seconds in Time using AngularJS and its "Interval" option but i was thing about adding milliseconds to the same with 2 digits. Below is the code. can anyone tell me on how to add milliseconds to it.
AngularJs Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;"><b>{{theTime}}</b></h3>
</div>
Update - On how i found the solution.
I just did the following changes. Thanks to Pranjal
AngularJS Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date();
$interval(function () {
$scope.theTime = new Date();
}, 1);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;font-size: 20;margin-left: 20;"><b>{{theTime | date:'HH:mm:ss:sss a'}}</b></h3>
</div>
<body>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.CurrentDate = new Date();
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<span>{{CurrentDate | date:'HH:mm:ss:sss'}}</span>
</div>
</body>
I am trying to create a form that users can press the '+' sign and add a new line. I do this by calling a function when a button is clicked and then pushing a new line into the array. The new lines are not being created, however. The function below that removes the line seems to be working.
Here is the js:
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', '$q', function($scope, $q) {
$scope.arr = [1,2];
$scope.addLine = function(index){
$scope.arr.push();
}
$scope.removeLine = function(index){
$scope.arr.splice(index, 1);
}
}]);
You need to push something into the array.
Push() Definition and Usage:
The push() method adds new items to the end of an array, and returns the new length.
Note: The new item(s) will be added at the end of the array.
Note: This method changes the length of the array.
Tip: To add items at the beginning of an array, use the unshift() method.
http://www.w3schools.com/jsref/jsref_push.asp
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope',
function($scope) {
$scope.arr = [1, 2];
$scope.addLine = function(index) {
$scope.arr.push(index);
}
$scope.removeLine = function(index) {
$scope.arr.splice(index, 1);
}
}
]);
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="myController">
<button name="addLine" ng-click="addLine(arr.length+1)">Add Line</button>
{{ arr | json}}
<ul>
<li data-ng-repeat="x in arr">
{{ x }} - <button name="addLine" ng-click="removeLine($index)">Remove Line</button>
</li>
</ul>
</div>
</body>
</html>
Look this:
var app = angular.module('App', []);
app.controller('AppController', ['$scope', function($scope) {
$scope.arr = [1,2];
$scope.addLine = function(last){
$scope.arr.push(last + 1);
}
$scope.removeLine = function(index){
$scope.arr.splice(index, 1);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<button ng-click="addLine(arr.length)">Add Line</button>
<hr/>
<div data-ng-repeat="x in arr">
Line: {{x}} <button ng-click="removeLine($index)">Del</button>
</div>
</div>