Forums

Hi All

Chronoforms V4 RC3.21
Joomla 2.5.2

I'm using the datepicker in some of my forms.
When it pops up, the year is displayed first, then month, then day.
The datepicker config is:
startView: 'decades', format: 'd-m-Y', inputOutputFormat: 'j F Y', days: ['Søndag', 'Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'], months: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']

It's using the 'default' datepicker.

The problem is that the year is selected with 1 click, the month with double click, and the day with double click.

Hmm? How come?

Just noticed another small problem
As you can see my 'days' are translated to danish.
But the Søndag and Lørdag are wrong when I view the settings afterwards, the days are shown as:
['Su00f8ndag', 'Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lu00f8rdag']

And on the datepicker popup, lørdag (saturday) are shown as LU and not LØ and søndag (sunday) is shown as SU and no SØ.

I just experimented a bit with the mootools datepicker, and that uses 1 click for year, month, day.
So I'm considering switching to that, the problem is that if I use the above "format" string it just shows the letters instead of the actual date?

Hi fribse,

The new one should work fine if you have J2.5, I suggest that you create a completely new test form and add a datepicker field to it then test it, let me know if that doesn't work, it works fine here.

Regards,
Max

The new one should work fine if you have J2.5, I suggest that you create a completely new test form and add a datepicker field to it then test it, let me know if that doesn't work, it works fine here.

Hi Max

I'm a bit unsure of what is meant by 'the new', I'm alredy at 3.21?
I've created a test form, just with the datepicker field, and it's the same problem.
I suspect it has something to do with the format for the datepicker, if I remove the format, it works with single clicking.


if I set this up to be the format:
startView: 'decades', format: 'j F Y', inputOutputFormat: 'j F Y'

It messes things up, and requires doubleclick, and also moves oddly between dates.
I've created a small movie: http://screencast.com/t/6aUXWwley
As you can see, I select the year first, then goes to the month, which has to be clicked twice, then the day, but if I select the 1'st of january, it jumps to another month, and I have to move back to the correct date.

Second problem is that if I translate the days to danish, by entering the following string
days: ['Søndag', 'Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lørdag'], months: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']

Which is the danish translation, it's going to change it to:
days: ['Su00f8ndag', 'Mandag','Tirsdag','Onsdag','Torsdag','Fredag','Lu00f8rdag'], months: ['Januar','Februar','Marts','April','Maj','Juni','Juli','August','September','Oktober','November','December']

Hi fribse,

We've seen similar problems before with the MonkeyPhysics datepicker with later versions of MooTools. What I think happens is that the display changes but somehow the old 'select' zones are still working. So when you click on January 1st the click applies to 'June' which was in the same location on the previous screen.

My preferred answer is not to use the MonkeyPhysics datepicker but switch to the more recent (and better) MooTools Datepicker. Max has made this an option on the Form General tab in the latest releases.

The MooTools Datepicker is based on the MonkeyPhysics one but has quite a few differences so you may need to check the documents.

a) You can set a locale by putting for example Locale.use('da-DK'); in a Load JS action. This seems to automatically handle the language for the date-picker.

b) The format syntax is different format: '%j %F %Y'

c) And it's startView: 'years'

Bob

Hi Bob

Ok, that looks much better, only one click, and it respects the sequence, and doesn't jump between months, excellent, the format is off though, so that is something I'm going to investigate:
20'th of July 1968 gave 202 F 1968.

Hi Bob

Ok, that looks much better, only one click, and it respects the sequence, and doesn't jump between months, excellent, the format is off though 20'th of July 1968 gave 202 F 1968.
But according to the docs here http://mootools.net/docs/more/Types/Date#Date:format the correct is format: '%e %B %Y'
And that worked!

Now I'm going through all the forms, and I'm going to change the datepicker.

Thankyou very much for the help!

Hi fribse ,

Sorry about the date syntax, I hadn't realised that the letters needed to change (I mostly only use Y m d).

Bob

Hello

I have faced the same problem. Thanks a lot for sharing the issue here.

Where do I need to put this exactly please "putting for example Locale.use('da-DK'); in a Load JS action." ?
In which file and which line ?

Hi ibrahimfsasmaz ,

Drag a Load JS action from the Utilities action group into the On Load event; click the middle 'spanner' icon to open it and paste the code into the 'Code' box.

Bob

Bob

Hi Bob,

It is working great but only for the existing languages🙂

Infact I am trying to put a new language.
I have copied the "Locale.en-US.DatePicker.js" and changed the related lines inside & the file name.

I have been thinking that the system will take the local month&day labels from the joomla language file but it seems that I am wrong.

Could you please tell me where do I need to put the new language labels ?

Thanks a lot

Hi ibrahimfsasmaz ,

Here's the list of languages that are already included:

Locale.en-US.Date
Locale.ar.Date
Locale.ca-CA.Date
Locale.cs-CZ.Date
Locale.da-DK.Date
Locale.de-DE.Date
Locale.de-CH.Date
Locale.en-GB.Date
Locale.es-ES.Date
Locale.es-AR.Date
Locale.et-EE.Date
Locale.fa.Date
Locale.fi-FI.Date
Locale.fr-FR.Date
Locale.he-IL.Date
Locale.hu-HU.Date
Locale.it-IT.Date
Locale.ja-JP.Date
Locale.nl-NL.Date
Locale.no-NO.Date
Locale.pl-PL.Date
Locale.pt-PT.Date
Locale.pt-BR.Date
Locale.ru-RU-unicode.Date
Locale.si-SI.Date
Locale.sv-SE.Date
Locale.uk-UA.Date
Locale.zh-CH.Date

If you need to add another one I think that the code you need is like this:

/*
---

name: Locale.fr-FR.Date

description: Date messages for French.

license: MIT-style license

authors:
  - Nicolas Sorosac
  - Antoine Abt

requires:
  - /Locale

provides: [Locale.fr-FR.Date]

...
*/

Locale.define('fr-FR', 'Date', {

	months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
	months_abbr: ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
	days: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
	days_abbr: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],

	// Culture's date order: DD/MM/YYYY
	dateOrder: ['date', 'month', 'year'],
	shortDate: '%d/%m/%Y',
	shortTime: '%H:%M',
	AM: 'AM',
	PM: 'PM',
	firstDayOfWeek: 1,

	// Date.Extras
	ordinal: function(dayOfMonth){
		return (dayOfMonth > 1) ? '' : 'er';
	},

	lessThanMinuteAgo: "il y a moins d'une minute",
	minuteAgo: 'il y a une minute',
	minutesAgo: 'il y a {delta} minutes',
	hourAgo: 'il y a une heure',
	hoursAgo: 'il y a {delta} heures',
	dayAgo: 'il y a un jour',
	daysAgo: 'il y a {delta} jours',
	weekAgo: 'il y a une semaine',
	weeksAgo: 'il y a {delta} semaines',
	monthAgo: 'il y a 1 mois',
	monthsAgo: 'il y a {delta} mois',
	yearthAgo: 'il y a 1 an',
	yearsAgo: 'il y a {delta} ans',

	lessThanMinuteUntil: "dans moins d'une minute",
	minuteUntil: 'dans une minute',
	minutesUntil: 'dans {delta} minutes',
	hourUntil: 'dans une heure',
	hoursUntil: 'dans {delta} heures',
	dayUntil: 'dans un jour',
	daysUntil: 'dans {delta} jours',
	weekUntil: 'dans 1 semaine',
	weeksUntil: 'dans {delta} semaines',
	monthUntil: 'dans 1 mois',
	monthsUntil: 'dans {delta} mois',
	yearUntil: 'dans 1 an',
	yearsUntil: 'dans {delta} ans'

});

Bob

There is no change still default English ..

Hi ibrahimfsasmaz,

Have you selected the MooTools datepicker?

What language are you setting it to?

Bob

Hi Bob,

It is selected. I am trying to setup a Turkish Language file, (tr-TR) .

Hi

Pleas drag a Load JS action into the On Load event and add this code to it (after making any corrections):

Locale.define('tr-TR', 'Date', {

   months: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
   months_abbr: ['Oca', 'Şub', 'Mar', 'Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl', 'Eki', 'Kas' , 'Ara'],
   days: ['Pazar', 'Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi'],
   days_abbr: ['Paz', 'Paz', 'Sal', 'Çar', 'Per', 'Cum', 'Cum'],

   // Culture's date order: DD/MM/YYYY
   dateOrder: ['date', 'month', 'year'],
   shortDate: '%d/%m/%Y',
   shortTime: '%H:%M',
   AM: 'AM',
   PM: 'PM',
   firstDayOfWeek: 1,

   // Date.Extras
   ordinal: function(dayOfMonth){
      return (dayOfMonth > 1) ? '' : '.';
   },

   lessThanMinuteAgo: "bir dakikadan az olduğu",
   minuteAgo: 'Bir dakika oldu',
   minutesAgo: 'Orada {delta} dakika',
   hourAgo: 'bir saat vardır',
   hoursAgo: 'Orada {delta} saat',
   dayAgo: 'Orada bir gün',
   Daysago: 'Orada {delta} gün',
   weekAgo: 'Bir hafta var',
   weeksAgo: 'Orada {delta} hafta',
   monthAgo: 'bir ay var',
   monthsAgo: 'Orada {delta} ay',
   yearthAgo: 'bir yıl var',
   yearsAgo: 'Orada {delta} yıl',

   lessThanMinuteUntil: "daha az bir dakika",
   minuteUntil: 'Bir dakika',
   minutesUntil: 'dakika içinde {delta}',
   hourUntil: 'bir saat',
   hoursUntil: 'saat {delta}',
   dayUntil: 'bir günde',
   daysUntil: '{delta} gün',
   weekUntil: 'Bir hafta içinde',
   weeksUntil: 'hafta içinde {delta}',
   monthUntil: 'Bir ay içinde',
   monthsUntil: 'ay içinde {delta}',
   yearUntil: 'Bir yıl içinde',
   yearsUntil: 'yıllarda {delta}'
});
Locale.use('tr-TR');

Bob

Strange;
1- I turned everything back to the default settings
2- Checked: everything is OK in default language English
3- I copy/pasted the Turkish code that you have send in "OnLoad -> Load JS" code area; the datepicker stopped working, nothing is coming
4- When I setup the "dynamic file" as "YES", the default English language datepicker started working

I do not understand anything...

Hi ibrahimfsasmaz ,

You need to select the MooTools datepicker on the Form General tab; and set Dynamic File to No on he JS Load action.

Bob

Hi Bob

In that case nothing happens

Hi ibrahimfsasmaz,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob,

I have just send you a PM about the url details

Hi ibrahimfsasmaz,

In correcting my (or Google's) Turkish translations you had missed a few quotes and commas in the JavaScript. I also had to add a little CSS to fix some problem where the template CSS put borders into the calendar.

After those corrections it looks OK to me.

Bob

Thanks a lot Bob,
I appreciate

It is working great