How to display the Timezone information along with Date & Time using Angularjs:
I am trying to display Date and Time using the binding defined below:
{{data.filterData.run_date|date:'h:mm a'}} on {{data.filterData.run_date|date:'M/d/yy'}}
Something like above showing IST for India, CST for US and correct timezones for every end user and conversion.
UPDATE
I am getting the data in below format and in UTC format but is auto-converted by browser by clients machine:
2015-10-26T08:46:05+0000
How can we show the abbreviated Timezone as per above format or converted date and time & not specifically in UTC? As i have different clients and end users; so this should be dynamic to end user.
Thanks in advance!
But in versions 1.3.x only supported timezone is UTC,You can use external js if working with 1.3.x like Moment js
{{ user Defined date| date: 'MMM d, y H:mm:ss' : 'UTC' }}
Since version 1.4.0-rc.0 AngularJS supports other timezones too.
In HTML Template Binding
{{ date_expression | date : format : timezone}}
In JavaScript
$filter('date')(date, format, timezone)
More...
use the following code:
<html>
<head>
<title>Localization App</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.CurrentDate = new Date();
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
Date : {{CurrentDate | date:'dd/MM/yyyy'}} </br>
Date_1 : {{CurrentDate | date:'dd, MMMM yyyy'}} </br>
Time : {{CurrentDate | date: 'hh:mm:ss a'}} </br>
Time_1 : {{CurrentDate | date: 'HH:mm:ss Z'}} </br>
</div>
</body>
</html>
Output:
Date : 13/12/2017
Date_1 : 13, December 2017
Time : 10:33:42 AM
Time_1 : 10:33:42 +0530
Related
I'm trying to set a default value in my ionic date picker but it just seems to be ignored.
The versions are;
Ionic "1.3.2"
Node v14.15.4
AngularJS v1.8.0
ion-datetime-picker.min.js (not sure of this version)
So far I've tried this;
<div class="row">
<div class="col col-33">
<strong> DOB: </strong>
</div>
<div class="col">
<span ion-datetime-picker date ng-model="data.demographics.pmiDOB">
{{data.demographics.pmiDOB | date: "dd/MM/yyyy"}}
</span>
</div>
</div>
$scope.data.demographics.pmiDOB = "2022-04-21"; //new Date(1974,3,24).toISOString();
I understand that the date picker needs an iso date format but no matter what I try the date picker when rendered just shows today's date?
Thx.
I found the solution with this;
let dateString = $scope.data.demographics.pmiDOB;
let [day, month, year] = dateString.split('/')
const dateObj = new Date(+year, +month - 1, +day)
$scope.data.demographics.pmiDOB = dateObj;
i'm trying to make a app which is base on time differnce and date difference, and both date and time is input by the user,and the time format both cases in 24 hr.when i try to subtract these value it give wrong ans.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
Time1:<br><input type="text" pattern="([0-1]{1}[0-9]{1}|20|21|22|23):[0-5]{1}[0-9]{1}" ng-model="time1"><br>
<br>
Time2:<br><input type="text" pattern="([0-1]{1}[0-9]{1}|20|21|22|23):[0-5]{1}[0-9]{1}" ng-model="time2">
<p> Your Time is ans is{{time1-time2}} </p>
</div>
</body>
</html>
Your solution is using the input type time for html and format the calculation result as described in AngularJS：How to print out duration time with format? by Aung Khaing Oo.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp">
Time1:<br><input type="time" id="time1" name="time1" ng-model="time1" placeholder="HH:mm" required /><br>
<br>
Time2:<br><input type="time" id="time2" name="time2" ng-model="time2" placeholder="HH:mm" required />
<p>
time1:{{time1}}<br/>
time2:{{time2}}
</p>
<p> Your Time is ans is {{(time1-time2)| makePositive | date: 'HH:mm': 'UTC'}} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.filter('makePositive', function() {
return function(num) {
if(num < 0) {
todayDate = new Date(num);
todayDate.setDate(todayDate.getDate()+1);
num = todayDate;
}
return num;
}
});
</script>
</body>
</html>
Update: I added a custom filter to solve the time1 < time2 problem. I took the solution from here: Display absolute value angularjs
Update2: changed the filter by just adding one day if the difference between time1 and time2 is negative. Used angularjs - calculate a date plus one day as base for my adaption.
I need to convert date '02-01-2017' to '2017-01-02'.How can I do this in angularjs.Please help me.Thanks in advance.
This should do,
var date = "02-01-2017";
var newdate = date.split("-").reverse().join("-");
console.log(newdate);
DEMO
var date = "02-01-2017";
var newdate = date.split("-").reverse().join("-");
console.log(newdate);
You can use angular js date filters for this purpose. The date filter syntax is like
{{ date | date : format : timezone }}
where format is your required format i.e, yyyy-dd-MM and timezone that you prefer. You can find examples for this here and documentation at
angular js website
In chrome you can directly use new Date('02-01-2017'); but in firefox there are some compatibility issues so that the date string needs to be written as new Date('02/01/2017'); this will support in chrome also. Your date time stamp needs to be "IETF-compliant RFC 2822 timestamp". You can find the details regarding the compatibility issues here.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date In Chrome {{ date | date:"yyyy-dd-MM" }}</p>
<p>Date In FireFox {{ dateFF | date:"yyyy-dd-MM" }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function ($scope) {
var dateTimeString = '02-01-2017';
$scope.date = new Date(dateTimeString);
$scope.dateFF = new Date(dateTimeString.replace("-", "/"));
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>
I am getting date from server via json.The json data date format is MM-dd-yyyy.but i need to display it like dd-MM-yyyy.I am used normal angular date filters but its not working.
{{item.date | Date:'dd-MM-yyyy'}}
Why its not working? Is there any better way?
Remove capital letter from Date filter and see your " item.date " is it string or date.
If it is string then not filter that date otherwise its working
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.CurrentDate =new Date('10-30-2016');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="datCtrl">
{{CurrentDate | date:'dd-MM-yyyy'}}
</div>
Try this:
{{item.date |date: 'dd MMMM yyyy'}}
This filter statement should work:
{{ item.date | date: 'dd-MM-yyyy' }}
Reference : How to change date format using date filter
I am entering amount in text box then it should append commas in between the amount (ex: I entered 123500 it should convert like 1,23,500.00 automatically when on blur) using angular js.
This should happen within the same input box.
If this is for a currency input, you can use, ng-currency :
https://github.com/aguirrel/ng-currency
<input type="text" model="yourModel" ng-currency />
An example is available here : http://plnkr.co/edit/u9mJqDH8UpwxDnOv8gZL?p=preview
The source code is pretty simple you can fork it, and adapt it to your code if you prefer.
Try this :
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
</head>
<body ng-app="numberFilterExample">
<script>
angular.module('numberFilterExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.val = 1234.56789;
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter number: <input ng-model='val'></label><br>
Default formatting: <span id='number-default'>{{val | number}}</span><br>
No fractions: <span>{{val | number:0}}</span><br>
Negative number: <span>{{-val | number:4}}</span>
</div>
</body>
</html>
Refer: http://plnkr.co/edit/mO257aew7YKXaIzSwS6G?p=preview