Datetime localization

[doolak]

Hi there,

I need to show the Date/Timepicker in German, so I am using the jQuery UI/Datepicker/Localization like below:

$.datepicker.regional['de'] = {clearText: 'löschen', clearStatus: 'aktuelles Datum löschen',
	                closeText: 'schließen', closeStatus: 'ohne Änderungen schließen',
	                prevText: '<zurück', prevStatus: 'letzten Monat zeigen',
	                nextText: 'Vor>', nextStatus: 'nächsten Monat zeigen',
	                currentText: 'heute', currentStatus: '',
	                monthNames: ['Januar','Februar','März','April','Mai','Juni',
	                'Juli','August','September','Oktober','November','Dezember'],
	                monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
	                'Jul','Aug','Sep','Okt','Nov','Dez'],
	                monthStatus: 'anderen Monat anzeigen', yearStatus: 'anderes Jahr anzeigen',
	                weekHeader: 'Wo', weekStatus: 'Woche des Monats',
	                dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
	                dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
	                dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
	                dayStatus: 'Setze DD als ersten Wochentag', dateStatus: 'Wähle D, M d',
	                dateFormat: 'dd.mm.yy', firstDay: 1, 
	                initStatus: 'Wähle ein Datum', isRTL: false};
	        $.datepicker.setDefaults($.datepicker.regional['de']);

This works fine when it's added into the InputfieldDatetime.js - but just for the date - for the time (which uses the Timepicker addon) one should be able to use this code:

$.timepicker.regional['de'] = {
	timeOnlyTitle: 'Zeit wählen',
	timeText: 'Zeit',
	hourText: 'Stunde',
	minuteText: 'Minute',
	currentText: 'Jetzt',
	closeText: 'Schliessen',
	timeFormat: 'HH:mm',
	amNames: ['AM', 'A'],
	pmNames: ['PM', 'P'],
};
$.timepicker.setDefaults($.timepicker.regional['de']);

... but I could not get this work when including it into jquery-ui-timepicker-addon.js - so I just changed the options in that file.

As it's obviously not recommended to change the code in the modules files, I would like to add the localization by a hook.

How could I load a hook always when the datetime module is called? It would work fine with Page::render, but in use with the Form Builder it wouldn't work then, when the forms are embedded by iframe.

So it would be great to add the javascript by a hook "into the datetime module"...

Would be great if somebody could show me the right direction.

Cheers, doolak

[ryan]

The timepicker is not actually part of jQuery UI. It was an add-on created by Trent Richardson, as jQuery UI's datepicker does not have a timepicker. There is a tab on localization for this timepicker available here. Does this help?

[doolak]

The timepicker is not actually part of jQuery UI. It was an add-on created by Trent Richardson, as jQuery UI's datepicker does not have a timepicker. There is a tab on localization for this timepicker available here. Does this help?

Yes, that's were I got the code above ;-)

I am just looking for a possibility to embed both codes into the Datetime module without changing it  - so what I need is a hint how I could do a hook into the module ...

[ryan]

It looks like this could probably go in any JS file or any output that can produce a <script> tag, or even the admin theme. So there are lots of places you could get it in there. But I think the best place would be in your /site/templates/admin.php because this file is not overwritten during upgrades. Add this before the code that's already in there:

$config->scripts->add($config->urls->templates . 'scripts/date-localization.js'); 

Then add your code to the file in /site/templates/scripts/date-localization.js

[doolak]

Hi Ryan, the problem is that I want to use the localized datetime field in a form, so I have to get the output on the frontend side. And, as it's embedded via iFrame I thought it may be the best possibility to hook directly into the module itself - is this possible?

[Soma]

If it's for frontend why can't you just include the script in your templates? Or on what kind of form are we speaking about?

[doolak]

I am using the Form Builder - the form is embedded via iFrame so including the script in the template or as hook after page::render would not work.

That's why I would like to change the module itself - but this would be nice with a hook, not by changing the modules files.

[Soma]

For backend hook include additional script. Take a look the InputfieldDatetime.module

___render() is hookable (three underscores)

So you would roughly create an autoload module that hooks into InputfieldDatetime::render to initiate that a datetime field is rendered somewhere and a good point to add our script:

$this->addHookBefore("InputfieldDatetime::render", $this, 'addScripts');

And in the function add the script like ryan showed.

public function addScripts($event){
   $this->config->scripts->add($this->config->urls->templates . "your/script.js");
}

And it will add it to the admin, when a Datetime field is rendered.

I am using the Form Builder - the form is embedded via iFrame so including the script in the template or as hook after page::render would not work.

That's why I would like to change the module itself - but this would be nice with a hook, not by changing the modules files.

Ahhhh form builder!

You can add that line from Ryan to form-builder.inc template...

You can't change the InputfieldDatetime module itself with hooks, just to additional stuff when a datetime is "rendered".

[doolak]

That's exactly what I was looking for - thank you, Soma!