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>
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 some initial stuff to get used to AngularJS. My current source is SoloLearn. I tried to recreate their app, which adds +1 to a counter when a button is clicked.
I have tried checking the code from their app, and I've also copied and pasted their work onto my HTML file and it still doesn't work, I tried an online tool for ascii diffs and my code should be identical, yet my inspector yields this:
http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=clickCounter
at angular.js:38
at angular.js:10839
at ba (angular.js:9931)
at n (angular.js:9701)
at g (angular.js:9055)
at g (angular.js:9058)
at g (angular.js:9058)
at angular.js:8920
at angular.js:1919
at m.$eval (angular.js:18161)
I checked the site and as I understand, my code should still be working, yet it's not.
My code:
<div ng-app="MyApp" ng-controller="myCtrl">
<button ng-click="count=count+1">Click me!</button>
<p> {{count}} </p>
</div>
<script>
var app = angular.module('MyApp',[])
app.controller('myCtrl', function($scope) {
$scope.count=0;
});
</script>
Their code:
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
</script>
Thanks for the help!
I have added both in different plunker, both are working
http://plnkr.co/edit/Pk8bY3jMiRqwiyWhxEkn?p=preview
http://plnkr.co/edit/aJZTXMQ1dATZI4XUSCmc?p=preview
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
As #Lex mentioned, I needed to define the Angular app specifically for the app I was running and not have it all generically crammed in the same place.
The code on the first URL I posted is working now. Basically changing the body tag to this: <body ng-app=""> and naming each div app made everything work as should.
Thank you all for your help.
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 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
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