How would I get a localized version of every month in angularjs in an array? I know how to localize a single date using the format options, but in this case I want all of the months. Basically, this is going to be bound to a select that the user can than choose a month.
I m guessing that your page will be entirely localized in a given language and that you will add the proper angular-locale file as such :
<script src="http://.../angular-locale_xx-xx.js"></script> // ex: angular-locale_fr-fr.js
If this is the case you can simply access all the months as an array like that :
function Controller($scope, $locale) { //inject the $locale service
var datetime = $locale.DATETIME_FORMATS; //get date and time formats
$scope.months = datetime.MONTH; //access localized months
}
You can see a working plunker here
Related
I am have two variable
1)$scope.priviuosLevelCutoffTime like 12:00
2)data.cutOffTime(form json) like 13:00
i want to compare this two times are equal or greater by using anguler js,can anyone explain me?how I can compre?
Angular does not provide any such method. You would have to use native JS date objects.
var date1 = Date.parse('01/01/1970 ' + $scope.priviuosLevelCutoffTime+':00')
var date1 = Date.parse('01/01/1970 ' + data.cutOffTime+':00')
//date1>date2
You can do put the variables into $scope if you want to use in template.
Angular has not providr utilities for Date Time
You can use angular moment instead :- https://github.com/urish/angular-moment
I had build the next angular filter:
App.filter('cur2symbol', ['CurrenciesService', function (CurrenciesService) {
return function (input, iso) {
input = input || '';
iso = iso || 'ILS';
var symbol= CurrenciesService.getCurrencySymbolByIso(iso);
return symbol+input;
};
}])
the meaning of this filter is to get currency iso code and convert is to symbol for examle:
the next code {{200|cur2symbol:"ILS"}} will output ₪200.
My problem is that the CurrenciesService service is Async, so the filter is not working correctly.
only filtering After the the service load are getting the symbol.
I thought about the next solutions:
1. Instead of using filter, using directive and making the symbol a Model, so it will update when the data is loaded. the problem is it will create too much bindings, I am using the currency symbol in many places!.
2. finding a way to run the filter again after the service has loaded (I don't know if it's even possible)
I will be glad for any ideas solution
So I'm attempting to deal with dates with mongodb / mongoose / angular.
I was trying to use the as a date picker. But it requires yyyy-MM-dd format. Where the dates generated in by a mongoose schema:
created: {
type: Date,
default: Date.now
},
Those dates are this format: 2014-12-13T22:23:20.633Z
So I looked around for how people are handling binding to the data model when there is a conversion required.
I came up with the following directive.
'use strict';
angular.module('clients').directive('mongooseDateFormat', ['$filter',
function ($filter) {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModelController) {
ngModelController.$parsers.push(function (data) {
console.log(data);
data = $filter('date')(data, 'yyyy-MM-dd');
console.log(data);
return data; //converted
});
ngModelController.$formatters.push(function (data) {
console.log(data); // gets 2015-01-12T00:00:00.000Z
data = $filter('date')(data, 'yyyy-MM-dd');
console.log(data); // converts to 2015-01-11
return data; //converted
});
}
};
}
]);
So I included the console.log functions where I'm testing the values and show above in the code some sample dates in the comments.
You can see that 2015-01-12T00:00:00.000Z becomes 2015-01-11.
So the value that the sends into the filter is with the 0 time stamp and the $format(date)(data, "yyyy-MM-dd") command removes the timestamp but changes the day.
(..sigh.. expletives removed )
Being new to having to care about date formats this is just mind blowing. Is the problem that I'm not using a timezone? By that I mean that mongodb and mongoose are not generating a timezone? Why would a date with a zero time round down to the previous date when you attempt to format it?
I could continue complaining about how odd this is and make myself sound stupid when someone tells me the easy answer. I'll just post and see if anyone knows.
<input type="text" data-mongoose-date-format data-ng-model="client.mydate">
or
<input type="date" data-mongoose-date-format data-ng-model="client.mydate">
They both bind after you enter the date and it is converted and return a date one day less.
It's because Z at the end of your time string tells that this is UTC and date filter converts date to your local timezone. If you use Angularjs 1.3.* you can add timezone parameter:
$filter('date')(data, 'yyyy-MM-dd', 'UTC');
I'm using the meanjs.org boiler plate as well, and I've been trying to work through this same problem for several hours now. I was storing it as a Date, but couldn't use it with ng-model because of the above mentioned formatting error. So I created the directive above, only to find that I need angular 1.3 to get the time zone param for $filter if I don't want it to automatically subtract 8 hours. But I found it's a real pain to upgrade angular to 1.3 because lots other stuff breaks, so I decided to revert back to 1.2 instead of following that rabbit hole.
But, I kid you not, I was able to circumvent the entire problem by simply changing the mongoose datatype from Date to String in my server model. This eliminates the automatic time zone conversion, but still allows you to use the date filter in your data bindings.
{{show.date | date: 'mediumDate'}}
Despite being stored in mongo as a string, it still formats perfectly, without the pesky automatic timezone conversion.
Also, when the date is stored as a string, it surprisingly needs no conversion at all when using in the edit form.
<input type="date" data-ng-model="show.date" id="date" class="form-control" placeholder="Show date" required>
Works just fine, you don't need a directive.
I realize from a data schema point of view, it's always preferable to store dates as type Date. But, to me, this is a much simpler solution until the boilerplate comes out of the box with angular 1.3, which will make it much easier to avoid the automatic time zone conversion of stored dates.
I'm trying to implement a previous - next week stats which will change the url depending on StartDate and EndDate values of a datepicker but will show stats of a week (like from 11-11-13 18-11-13 and so on).
Any suggestions or ideas?
I know this is old, but in case someone stubles on it looking for an answer, here is one.
I do not know your code structure, so I will assume you have a controller with a structure/method like this:
// this is tied to your HTML with ng-model (I assume)
this.currentDate = new Date();
// tie this to your "next week" button with ng-click
this.iterateDate = function() {
var nextWeek = new Date(this.currentDate.valueOf());
// adding/subtracting 7 for next/previous week. Can be less for your use case
nextWeek.setDate(nextWeek.getDate() + 7);
// update the model value (if this is your approach)
this.currentDate = nextWeek;
};
Again, without knowing how you structured your controller it is hard to give an exact implementation. The iterateDate function should do what you ask for though.
Credit to #AnthonyWJones for his date change function.
I have a web page (written with PHP/Zend) with a full calendar component which is driven by a combo-box. This combo-box is used to switch from one calendar to another. Each time the user changes the value of the combo-box, we fetch the events in the database and "json" them as an array to the JavaScript. Then, we erase all events from the present calendar (empty current calendar) and add the newest event... but it does not work.
As the query to obtain all the events between two dates is long to execute we want to make it once for each calendar (each time user change the value of the combo-box).
My JavaScript code where $('#planning').val() is the combo-box value. The result variable contains a JSON array which has been validate.
<script type="text/javascript">
$(document).ready(function()
{
$("#planning").change(function() {
$.post(
'/Jerome/public/index/update-calendar',
{ planning: $('#planning').val() },
function(result) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar(result); //not working
$('#calendar').fullCalendar( 'addEventSource',result);//not working
$('#calendar').fullCalendar( 'refetchEvents' ); //anything change
$('#calendar').fullCalendar( 'rerenderEvents' ); //anything change
});
});
});
</script>
It looks to me like your issue is when you're trying to load the new events. Full Calendar wouldn't know what to do with your JSON object try replacing...
$('#calendar').fullCalendar(result);
With..
$('#calendar').fullCalendar( 'addEventSource', result )
Here is a link to documentation.
I hope this helps!