I am using angular-translate to provide i18n to my application, I am able to translate labels, button-text etc. properly.
The problem I am facing is when I am trying to change the date according to the selected language locale. The date is selected from a date-picker.
the date is selected into an input element:
<input type="text" class="form-control" required="" ng-model="date" placeholder="{{ 'DATE_PLACEHOLDER' | translate }}" translate="{{ 'select_date'|translate:{date:date} }}"/>
the placeholder translation works perfectly, but no change happens to date format when I change the language.
I have created a plunkr describing the current scenario.
Plunker Link
Please suggest a way in which I can translate inserted values, or text in forms.
Also, I would like to know how to overcome the flicker of key values just before the page is loaded.
Add Italian locale, I copied it from http://forum.html.it/forum/showthread/t-2912577.html:
$.fn.datepicker.dates['it'] = {
days: ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"],
daysShort: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"],
daysMin: ["Do", "Lu", "Ma", "Me", "Gi", "Ve", "Sa", "Do"],
months: ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"],
monthsShort: ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"],
today: "Oggi",
clear: "Cancella",
weekStart: 1,
format: "dd/mm/yyyy"
};
Add convert map for language codes from en_EN format to en:
// language codes convertor map
var convertorMap = {
'en_US': 'en',
'it_IT': 'it'
};
In your language switcher function, remove current datepicker and initialize a new one with new language, make sure to update date in new format as well:
$scope.switchLanguage = function (key) {
var dp = $('#datePicker');
// get current date
var currentDate = dp.datepicker('getDate');
// update datepicker with new locale
dp.datepicker('remove');
dp.datepicker({
autoclose: true,
language: convertorMap[key]
});
// restore current date according to the new locale
dp.datepicker('update', currentDate);
$translate.use(key);
};
To show view only when translation is ready, change your wrapper element (I used <body>) to look like:
<body ng-controller="Ctrl" class="ng-hide" ng-show="showView">
.....
</body>
and in your controller:
// will be fired when the service is "ready" to translate (i.e. loading 1st language)
$translate.onReady(function () {
$scope.showView = true;
});
ng-model directive on jQuery datepicker does nothing, so I removed it, and added ng-model update code to initial datepicker function:
$('#datePicker').datepicker({
autoclose: true
})
// update ng model
.on('changeDate', function(e) {
$timeout(function () {
$scope.date = $('#datePicker').datepicker('getUTCDate');
});
});
if you see in the console message like:
pascalprecht.translate.$translateSanitization: No sanitization strategy has been configured. This can have serious security implications.
it is said to be fixed in next releases: https://github.com/taigaio/taiga-front/issues/778
plunker: http://plnkr.co/edit/EGtHPG?p=preview
Related
I am using the datepicker of UI Bootstrap: (there is a Plunker there that disable the past dayswith a button).
Can anyone please help me to disable the future days without any button?
I tried change the function of the button like that, but it didn't worked:
$scope.toggleMin = function() {
$scope.options.minDate = $scope.options.minDate ? **new Date()** : **null** ;
};
And this is a button, I'd like to disable without a button.
Just set maxDate in options to the date you want to restrict to.
$scope.options = {
customClass: getDayClass,
maxDate: new Date(), // restrict maximum date to today
showWeeks: true
};
Otherwise, if you need to change it after the options are set you can just do:
$scope.options.maxDate = new Date(), // restrict maximum date to today
Here's the updated Plunker with days after today disabled: https://plnkr.co/edit/0iqNNEcATzv4t8h8n41X?p=preview
Set your datepicker class and Set endDate = new Date()
$('.date-datepicker').datepicker({
autoclose: true,
endDate: new Date()
});
I'm using the angular Jquery UI datepicker(https://github.com/angular-ui/ui-date) for selecting the date of birth.
The datepicker correctly picks and displays time when I click on it. But, the value is saved as midnight of my current timezone(+0530).
For example, if the date 30/04/1981 is selected the actual model value: 1981-04-29T18:30:00.000Z. I understand that this is the expected behaviour, but for the case of setting the dob, the value should not change from country to country.
Is there an elegant way to convert this value to UTC 00.00:000z? While preserving the date selected in the current time zone?
html is given below,
<div>
<input ui-date="dateOptions"
name="dob"
ng-model="passenger.dob"
class="form-control"/>
</div>
<p>{{passenger.dob}}</p>
dateOptions are as follows,
self.dateOptions = {
changeYear: true,
changeMonth: true,
minDate: self.minDate,
maxDate: self.maxDate,
dateFormat: 'dd/mm/yy',
weekHeader: "Wk",
yearRange: "-100:+0",
showOn: "both",
buttonImage: "images/calendar.png"
};
Its working fine here in my punker.. https://plnkr.co/edit/sBdu1J?p=preview
I resolved it - it was a css issue
I am trying to integrate https://github.com/mattlewis92/angular-bootstrap-calendar. There are no errors, but instead of rendering the calendar as per the demo page, it just prints out the days etc on the screen.
Here is my html:
div ng-controller="calendarCtrl">
<mwl-calendar
view="calendarView"
current-day="calendarDay"
events="events"
view-title="calendarTitle"
auto-open="true">
</mwl-calendar>
</div>
and here is the controller:
app.controller('calendarCtrl', function($scope, $log, userData){
var invoiceData = userData.getActivityData();
$scope.calendarView = 'month';
$scope.calendarDay = new Date();
$scope.calendarTitle = "BirdsEyeView";
if( invoiceData[0]){
//$log.debug("in cal array:"+$scope.calendarDay);
}
else {
$log.debug("No invoice data");
}
$scope.invoiceData = invoiceData;
$scope.events = [
{
title: 'My event title', // The title of the event
type: 'info', // The type of the event (determines its color). Can be important, warning, info, inverse, success or special
startsAt: new Date(2015,6,10,1), // A javascript date object for when the event starts
endsAt: new Date(2015,6,10,15), // Optional - a javascript date object for when the event ends
editable: false, // If edit-event-html is set and this field is explicitly set to false then dont make it editable. If set to false will also prevent the event from being dragged and dropped.
deletable: false, // If delete-event-html is set and this field is explicitly set to false then dont make it deleteable
incrementsBadgeTotal: true, //If set to false then will not count towards the badge total amount on the month and year view
recursOn: 'year' // If set the event will recur on the given period. Valid values are year or month
}
];
});
this was a CSS issue - the download from npm did not have the css. So did a manual download.
I have a problem with AngularUI datepicker when i want to use 2 calendar in range each other.
When i select date in first calendar, the min date of the second calendar need to be higher than first.
So far no problem !
But, when i open the second calendar, the first date is good, but i can't click on date or can't switch month! Nothing do...
Here is my code
HTML :
<div ng-controller="test">
From <input id="from" ng-model="from" ui-date="formatCalendar" ng-change="updateDate()">
To <input id="to" ng-model="to" ui-date="formatCalendar2">
</div>
Javascript :
function test($scope){
$scope.to = null;
$scope.from = null;
$scope.formatCalendar = {
minDate: 0,
maxDate: 365,
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.formatCalendar2 = {
defaultDate: "+1w",
numberOfMonths: 2,
changeMonth: true,
dateFormat: 'dd/mm/yy'
};
$scope.updateDate = function(){
$scope.formatCalendar2.minDate = $scope.from;
};
}
You can see demon # http://plnkr.co/edit/4tTHEIUzVRyQJ7NOCIAs?p=preview
Thanks for help :)
By looking at the source of ui-date, it seems that it has a watch on the whole config object. That watch will only fire if your config object is replaced, and not if you only modify a property on it. Something like this might work:
$scope.updateDate = function(){
// Just a simple way to clone the object to trigger
// the watch in ui-date
$scope.formatCalendar2 = JSON.parse(JSON.stringify($scope.formatCalendar2));
$scope.formatCalendar2.minDate = $scope.from;
};
EDIT:
Misread the code, the watch does fire because getOptions() returns a new object every time. I was able to get your code running here: http://jsbin.com/yibehape/2/edit
It sets the min date for the To field when changing the From field. So I'm guessing that there's some logical error in your code that you haven't showed us. You seem to have removed your plunker, did you get it working?
var User = Backbone.Model.extend({
schema: {
date: {type: 'Date'}
}
});
var user = new User();
var form = new Backbone.Form({
model: user
}).render();
$('.bootstrap').append(form.el);
What type do I enter to use the included JQuery-UI datepicker? There is no documentation on this other than:
The old jQuery editors are still included but may be moved to another repository:
jqueryui.List
jqueryui.Date (uses the jQuery UI popup datepicker)
jqueryui.DateTime
The schema type is declared in quotes and I can't figure out what the string for jqueryui.Date would be - and that doesn't work for sure.
You want to create a custom editor that you'll name for example: 'DatePicker'.
All the editors are attached to Backbone.Form.editors. Because the DatePicker is rendered exactly like a text field, we can use the text field as a base and only override the behavior specific to the datepicker.
I often use moment.js for some date related work, so this example also includes this. Also it's based on Bootstrap DatePicker and not the jQuery one, but this would be almost 100% the same.
Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({
render: function() {
// Call the parent's render method
Backbone.Form.editors.Text.prototype.render.call(this);
// Then make the editor's element a datepicker.
this.$el.datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
weekStart: 1
});
return this;
},
// The set value must correctl
setValue: function(value) {
this.$el.val(moment(value).format('YYYY-MM-DD'));
}
});
That's it, you can now use your date picker like this:
schema: {
birthday: { title: 'When were you born', type: 'DatePicker'}
}
Not sure it undestanding right your Question
but I think you can atach the Jquery date pickers in the initialize method of the view