I am using pikaday-angular directive wraper.
I wanted to show date in MM/DD/YYYY format in inputbox, hence supplied format in directive.
<input pikaday="example.myPickerObject" format="MM/DD/YYYY">
When i click on any date it shows up in inputbox in its default date format and not in my supplied format.
Here is the Demo: http://plnkr.co/edit/mFyTVKeGgUm6wz553hOB
Am i missing something?
Thanks in advance.
In order to use the format option, you need to import moment.js first:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="pikaday.js"></script>
<script src="pikaday-angular.js"></script>
<script src="app.js"></script>
See this plunker.
Related
I'm trying to implement Angular UI Bootstrap Iconpicker in my project but it doesn't work because I'm using those js files for angularjs tabs:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
and for ui-iconpicker I use those files:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="#routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>
I think there is a confusion between the two files (ui-bootstrap-tpls) but when I remove one of them the associated component don't work!! any help please
This problem is known to the author of ui-iconpicker.
See ui-iconpicker Issue #4: Doesn't work with ui-bootstrap >= 0.11.0
#justin-lau justin-lau added the wontfix label on Jan 29, 2015
#rapheki commented on May 20:
i had a similar issue, you need to modifiy the ui-iconpicker.js file and replace in line 156 (the templates/iconpicker.html):
"dropdown>" to "uib-dropdown>"
"dropdown-toggle>" to "uib-dropdown-toggle>"
I am using angular material V1.1.1 and angular js version 1.3.13.I have used md-select to select a value from dropdown. When I click on md-select , it shows the md-options value but hangs the whole screen and i am unable to click anywhere in the page as it adds a md-scroll-mask .I am not sure what causes the problem.
Any help would be appreciated
Make sure you have loaded the angular-aria and animate references correctly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
DEMO
I am using Angular translate for my app localization. I'd like to dynamically change the date format depending on the user's locale.
If the locale is French : format is dd/mm/yyyy
If the locale is English/US : format is mm/dd/yyyy
...and so on depending on the locale's default date format
How can I achieve this (cleanly) with Angular translate ?
I finally ended using moment.js and Angular moment.
Dates can be formatted to locale default with this:
<td>{{user.lastLogin | amDateFormat:'l LT'}}</td>
To change the moment locale, use the following:
amMoment.changeLocale(language);
Don't forget to import the moment locale files for the languages you wish to support:
<script src="assets/global/plugins/moment.min.js"></script>
<script src="jslib/angular-moment.min.js"></script>
<script src="jslib/moment/de.js"></script>
<script src="jslib/moment/es.js"></script>
<script src="jslib/moment/fr.js"></script>
<script src="jslib/moment/it.js"></script>
<script src="jslib/moment/pl.js"></script>
<script src="jslib/moment/ru.js"></script>
<script src="jslib/moment/zh-cn.js"></script>
And add angular moment module in your app:
var myapp = angular.module('myapp', ['angularMoment']);
Maybe I am out of date, but I don't think angular-translate has anything to do with localization. So here are my solution (yet it very clean)
If you are loading it only once per page reload use angular-i18n will be enough. Install and put js file into your HTML
bower install angular-i18n
<script src="/bower_components/angular-i18n/angular-locale_YOUR-LOCALE.js"></script>
If you want to load it dynamically angular-dynamic-locale :
bower install angular-dynamic-locale
<script src="myPath/tmhDynamicLocale.js"></script>
your js:
angular.module('myApp', ['tmh.dynamicLocale', ...])
angular.module('myApp').controller('myController', [..., 'tmhDynamicLocale',
function… {
tmhDynamicLocale.set('en');
}
])
NOTE, made sure you check the repo's readme for usage of localeLocationPattern(string)
Yeah there is a very easy way to do it..
Not sure if it's clean but can be made clean.
you can use interpolation provided by angular-translate, the problem is you can't use function inside interpolation string, but you can do something cool..
pass a function inside the object you're interpolating and call that function while interpolation
say you need to put in date
{{ 'date' | translate:{date:"28/01/2016"} }}
//instead of this
{{ 'date' | translate:'{date:"28/01/2016",func: func}' }}//func comes from scope.
and in your $translateProvider.translations
$translateProvider.translations('en',{
'date': "{{func(date)}}"
});
here is the plnkr
My problem is that I want to format numbers based on my language. For example, showing 123456.12345 in en-US as 123,456.12 or in fa-IR as ۱۲۳٬۴۵۶٫۱۲.
The best solution I can imagine is writing an angular filter but I think it is very slow because I need to show too many numbers in the view.
My question: Is there any better way to handle this problem or I have to use angular filters?
Solution 1 with filters:
You can include the relative locale script in index.html as stated here:
<html ng-app>
<head>
….
<script src="angular.js"></script>
<script src="i18n/angular-locale_de-de.js"></script>
….
</head>
</html>
Then using the built-in filter number you can format them easily
Solution 2 with toLocaleString:
If you don't want to use filter, you have to convert the numbers "manually" using toLocaleString for each number you have:
$scope.myNumber = 9999.99;
$scope.myNumber.toLocaleString('de-DE');
This is a JSFidlle showing you how a number is formatted for de-DE locale instead the en-US one used by default
I am trying to translate a FullCalendar using the language file included in the package. To make it simpler with angular, I use the plugin ui-calendar.
To do so, I imported the language script as described in the doc :
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
... //other includes generated by bower
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- FullCalendar language pack -->
<script src="bower_components/fullcalendar/dist/lang/fr-ca.js"></script>
However, the months and the days are not being translated. I did managed to translate the labels manually using the "monthNames", "dayNames", etc configs, but IMO that's ugly and it doesn't translate the ui.bootstrap.datepicker.
From what I understand, the problem is momentjs who wont take anything I give him. I tried to do a 'moment.lang('fr-ca')' but it doesn't do much. Anyone know a "Mickey Mouse trick" that could help to fix this issue?
Note: ui-calendar uses the v 1.6 of fullcalendar which doesn't include the languages utilities. So I added fullcalendar#2.1.0 to my bower.json. Everything seams to be working properly, I don't see where this could mess up the language since I'm calling fullcalendar directly.
Here is a working plunkr: http://plnkr.co/edit/AFpj79M1C6vOewSWLX8J
You also need to localise angular, you can read the doc here: https://docs.angularjs.org/guide/i18n
To make it work I added the code of i18n/angular-locale_fr-ca.js in the plunkr file ng-fr-ca.js.
Looking at the source of ui-calendar (line 179), you will see it uses anggular $locale service to translate days, month, etc. I have added a console.log to the source so you can see the difference between
var dtf = $locale.DATETIME_FORMATS;
console.log(dtf);
$locale uses engglish by default. If you load one of the i18n locale file, you will have it translated.