I am using datetimepicker.js.
I have the following code:
Partial HTML:
<div ng-hide="editingData[x.date]">{{x.date|date}} </div>
So my date is coming as:
May 21, 2015 2:52:29 PM
Expected:
May 21, 2015 2:52:29 PM IST
So Is there any easy way to add timezone in angularjs ?
I am having moment.js included as well and found that it can manipulate dates well. Can it be helpful ?
Displaying local time zone
may be this will help you :)
<div ng-app ng-controller="MyCtrl">
{{date | date:'MMM dd yyyy - h:mm:ss a '}} {{z}}
</div>
function MyCtrl($scope) {
$scope.date = new Date();
var now = new Date().toString();
$scope.z = now.indexOf('(') > -1 ?
now.match(/\([^\)]+\)/)[0].match(/[A-Z]/g).join('') :
now.match(/[A-Z]{3,4}/)[0];
if ($scope.z == "GMT" && /(GMT\W*\d{4})/.test(now)) {
$scope.z = RegExp.$1;}
}
Working js fiddle
Related
I'm not able to restrict max and min date in angular-datepicker angular-datepicker link
<div date-picker="start" min-date="Date string | Expression" max-
date="Date string | Expression"></div>
What will be valid expression to achieve it?
Below is the list of expression I tried.
min-date="2018-03-12 | date : 'yyyy-MM-dd'"
min-date="2018-03-12 | 'yyyy-MM-dd'"
min-date="2018-03-12 | date"
You need to use the angular controller for the specific scenario.
//HTML code
<div date-picker="start" min-date="minDate" max-
date="maxDate"></div>
//Controller code
$scope.minDate = new Date();
$scope.maxDate = new Date(); //as per your expectation
I've a table with 5 cells in the header, each cell correspond to a week (example: week 01, week 02 and so on).
In the first cell the week is given like this:
<div class="monthCells">Week {{vm.selectedPeriod}}</div>
and the result is the text : "Week 01" in the header cell.
The code in the controller to show the week number is:
return moment.utc(this.date).format("WW");
It returns always the number of the FIRST week of the selected month,
the user can with a date picker go from month to month, and in the table it will show the weeks in that month.
What's the best way to display the other 4 weeks?
Because I only get the number for the first week, so what do I put in the other 4 cells?
I was thinking about a counter, so it adds +1 to the number I get with:
return moment.utc(this.date).format("WW");
but the problem is, this won't be in a ng-repeat, but the table header is static, so one solution I was thinking about was put something like this in the 5 header cells:
{{vm.selectedPeriod}}
{{vm.selectedPeriod +1}}
{{vm.selectedPeriod +2}}
{{vm.selectedPeriod +3}}
{{vm.selectedPeriod +4}}
So when the user switches month, every week number will be correct but it won't work because I get a string from my function and can't figure out how to parse it in that function with momentJS.
If someone has a solution for my idea, or if there is a better way to achieve this, please let me know
edit SOLUTION:
at the end I found a solution with only using momentJS.
{{vm.date | amDateFormat : 'WW'}}
{{vm.date | amAdd : '1' : 'w' | amDateFormat : 'WW'}}
{{vm.date | amAdd : '2' : 'w' | amDateFormat : 'WW'}}
I would do this with a simple and smart filter like I created in this >> Demo fiddle:
View
<div ng-controller="MyCtrl">
<div class="monthCells">Week {{currentDate|dateWeekFilter:0}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:1}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:2}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:3}}</div>
</div>
AngularJS application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.currentDate = moment.utc();
});
myApp.filter('dateWeekFilter', function () {
return function (date, weeksToAdd) {
return moment(date).add(weeksToAdd, 'w').format("WW");
}
});
Full solution which includes: selectedPeriod scope and datepicker
>> Demo fiddle:
View
<div ng-controller="MyCtrl">
<datepicker>
<input ng-model="datePickerDate" ng-change="dateChanged()" type="text"/>
</datepicker>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+1}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+2}}</div>
<div class="monthCells">Week {{currentDate|dateWeekFilter:selectedPeriod+3}}</div>
</div>
AngularJS application
var myApp = angular.module('myApp',['720kb.datepicker']);
myApp.controller('MyCtrl', function ($scope) {
//Init
$scope.currentDate = moment.utc();
$scope.datePickerDate = $scope.currentDate.toDate();
$scope.selectedPeriod = 0;
//date change handling
$scope.dateChanged = function () {
$scope.currentDate = moment.utc($scope.datePickerDate);
}
});
myApp.filter('dateWeekFilter', function () {
return function (date, weeksToAdd) {
return moment(date).add(weeksToAdd, 'w').format("WW");
}
});
In my HTML page I wrote this:
<span>{{trans.dateCreated}}</span>
the time format is:
2017-01-09T17:55:22.000Z
but when I used:
<span ng-bind="trans.dateCreated"></span>
the format changed to:
Mon Jan 09 2017 19:55:22 GMT+0200 (Egypt Standard Time)
I don't know why this happened, but I want the date to be just 9/1/2017 or 9 Jan 2017, I used this filter (with the expression)
myApp.filter('shortDate', function () {
return function (dateStr) {
console.log("dateStr::", dateStr)
var n = dateStr.indexOf('T');
return date.substring(0, n);
}
});
but it doesn't work, the dateStr is not defined?
You may refer to this js fiddle: Click here
<div ng-controller="MyCtrl">
<span ng-bind="trans.dateCreated | date: 'dd MMM yyyy'"></span>
</div>
I am getting date in loop from database. The format is like "2015-09-21 18:30:00". But I want to change it as 'dd/MM/yyyy'.
I tried like this
{{obj.added_date | date : 'dd/MM/yyyy'}}
It shows like
2015-09-21 18:30:00 | date : 'dd/MM/yyyy'}}
If I use fulldate is shows me like:
2015-09-21 18:30:00 | date : 'fullDate'}}
for shortDate it shows like this:
2015-09-21 18:30:00 | date : 'shortDate'}}
The date your passing to view is actually a string and hence angular date filter does not recognise it as date object. You need to convert it to date object first.
Also be careful with firefox, it doesn't work for new Date(); if date separator in '-' instead '/'. So I would also suggest below
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope','$filter', function ($scope,$filter) {
var dateStr = '2015-09-21 18:30:00';
$scope.dt = $filter('date')(new Date(dateStr.split('-').join('/')), "d/M/yyyy 'at' h:mm a");
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<bod ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{dt}}</div>
</div>
</body>
EDIT: I have created a filter which will work for converting string to date object and will work in loop too
var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", function ($scope) {
$scope.dt = '2015-09-21 18:30:00';
});
myApp.filter('formatDate', function(dateFilter) {
var formattedDate = '';
return function(dt) {
console.log(new Date(dt.split('-').join('/')));
formattedDate = dateFilter(new Date(dt.split('-').join('/')), 'd/M/yyyy');
return formattedDate;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<bod ng-app="myApp">
<div ng-controller="MyCtrl">
<div>{{dt | formatDate: dt:'d/M/yyyy'}}</div>
</div>
</body>
Hope this helps
The date format that you have specified doesn't match the input specifications provided in the AngularJS documentation. The following is taken from https://docs.angularjs.org/api/ng/filter/date
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
I would suggest that you convert the date value into milliseconds and then pass it into the filter.
What i have done is before bindind the data in angular JS you can format the data
//Here i am taking the DOB from session and converted the format in dd-MM-yyyy format
string DOB = ((ABC.Models.Student)Session["Student"]).DOB.ToString("dd-MM-yyyy");
//Here i have used a hidden field where i am going to store DOB in ng-Init
<input type="hidden" name="DOB" id="DOB" ng_init = "DOB=' " + "Date of Birth: " + DOB + "'" /><br />
Later can call your ng-bind method for displaying.
<p ng-bind="DOB"></p>
I have a time field coming from the database that is formated like "14:37:39". I need it formated to be like "2:37 PM". I have tried to use the date filter (which formats time as well), but with no luck.
Help!
<span class="time">{{ feeding.time | date: "shortTime" }}</span>
You can build your own filter based on the format you're expecting...
angular.module('foo', [])
.filter('formatTime', function ($filter) {
return function (time) {
var parts = time.split(':');
var date = new Date(0, 0, 0, parts[0], parts[1], parts[2]);
return $filter('date')(date, 'h:mm a');
};
});
{{ '14:37:39' | formatTime }}
Outputs 2:37 PM
Live Demo
I think that your problem is that feeding.time is a string and the date filter is expecting a date.