PT.TABScript.Datumsformatanpassen
This section explains how other date formats than german ones, can be used.
The following steps, which will be explained in more detail below, are necessary.
- To select a date, the datepicker from the jQueryUI library is used. Demo, Doku
- Adaptable date formats are supported by this library.
- In the variable $.datepicker or rather jQuery.datepicker the global date picker object can be found, which also contains some utility functions (see documentation).
- In the variable $.datepicker.regional ready deafults for different countries, for example $.datepicker.regional["de"] for Germany or $.datepicker.regional("fr") for France can be found. $.datepicker.regional[""] is the default date format.
- To change the default date format for all date pickers, the setDefault function can be used, e.g. $.//datepicker.setDefault($.datepicker.regional("fr")).
*To change the date format for an input element, the element is picked as a jQuery object and the function datepicker is called up. For example $("#input-1").datepicker($.datepicker.regional("fr")). - Further adjustments ca be done with the input element by calling up $("#input-1").datepicker(„options“,<key>,<value>). A full list of options can be found in the documentation, see above.
- In addition a change in the validation of the input field is required, see Validatoren and errorFunc().
Adding a language
Initially, the date picker comes with German and English-style date format, the default being German. The URL parameter lang can be used to open the form in a certain language and the date picker will use that language automatically. When the specified language is not available, the default language will be used, ie. German.
To add support for other languages and date formats, proceed as follows:
- Download the desired language pack from jQuery UI, or create your own.
- Open the language file in a text editor and delete the last few lines of code that read datepicker.setDefaults( datepicker.regional.xx ); and return datepicker.regional.xx;.
Language pack for Spanish
/* Traducido por Vester (xvester@gmail.com). */
(function(factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["../widgets/datepicker"], factory);
} else {
// Browser globals
factory(jQuery.datepicker);
}
}(function(datepicker) {
datepicker.regional.es = {
closeText: "Cerrar",
prevText: "<Ant",
nextText: "Sig>",
currentText: "Hoy",
monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio",
"julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
],
monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun",
"jul", "ago", "sep", "oct", "nov", "dic"
],
dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
weekHeader: "Sm",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
datepicker.setDefaults(datepicker.regional.es);
return datepicker.regional.es;
}));
- Replace the deleted lines at the end of the file with the following code.
datepicker.setDefaults(dp);
return dp;
The language file should now look like this:
Edited language file for Spanish
/* Traducido por Vester (xvester@gmail.com). */
(function(factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["../widgets/datepicker"], factory);
} else {
// Browser globals
factory(jQuery.datepicker);
}
}(function(datepicker) {
datepicker.regional.es = {
closeText: "Cerrar",
prevText: "<Ant",
nextText: "Sig>",
currentText: "Hoy",
monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio",
"julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
],
monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun",
"jul", "ago", "sep", "oct", "nov", "dic"
],
dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
weekHeader: "Sm",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
var dp = datepicker.regional[XFC_METADATA.urlParams.lang];
datepicker.setDefaults(dp);
return dp;
}));
Adding several languages
If you want to add more languages, you only need the language section of the corresponding language file. The language section is the JSON object datepicker.regional.xx.
For example, to add both the languages Spanish and French, edit the language files as follows:
Language file for Spanish and French
/* Traducido por Vester (xvester@gmail.com). */
(function(factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["../widgets/datepicker"], factory);
} else {
// Browser globals
factory(jQuery.datepicker);
}
}(function(datepicker) {
datepicker.regional.es = {
closeText: "Cerrar",
prevText: "<Ant",
nextText: "Sig>",
currentText: "Hoy",
monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio",
"julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
],
monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun",
"jul", "ago", "sep", "oct", "nov", "dic"
],
dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
weekHeader: "Sm",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'
],
monthNamesShort: ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin',
'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'
],
dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
dayNamesShort: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
var dp = datepicker.regional[XFC_METADATA.urlParams.lang];
datepicker.setDefaults(dp);
return dp;
}));
Save the file and upload it as a client or form-specific resource. When the file name ends on js, the JavaScript file will be included in forms automatically. When the form is opened in Spanish or French by specifying es or fr for the URL parameter lang, the date picker switches to the corresponding language automatically.
Changing the global date format for all input fields
The date format date must be selected in the Xima® Formcycle Designer input field. If the form is called up in another language, the format for this language is set as default automatically, when a date format is stored for it.
Call up of the form in french language:
Call up of the form in dutch language:
To change the default format with Javascript directly, you proceed in the following way.
For example for French:
Or for Dutch:
If the desired language with the corresponding date format is not available, a seperate one can be created. For this see Add date formats.
Furthermore, the validator for the input field must also be adjusted, see section (e) below.
Changing the date format for an input element
The date format can be changed with javascript .For this the input element (input) must be selected with jQuery das Eingabefeld (input).
First the current date picker willl be deleted:
input.datepicker("destroy") // Deletes the date picker.
Afterwards a date picker with the desired format is created:
input.datepicker($.datepicker.regional['fr']) // Infixes a date picker with a french date format.
Should the desired country / language / date format not be available, it is possible to create one, see section (d) below.
The validator for the input field still has to be adapted, refer to the section validate date format.
Adding date formats
An entry in the date format list $.datepicker.regional must be created; this can used for the functions as described in the previous two sections. The entry is an object and may contain the following entries:
A description of these entries ccan be found in the documentation.
Here we have a date format for Germany as an example:
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: 'KW',
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,
yearSuffix: '',
showMonthAfterYear: false,
initStatus: 'Wähle ein Datum',
isRTL: false,
changeYear: true,
yearRange: '1900:' + (new Date().getFullYear() + 100),
onClose: function(){$(this).validate();}
}
Validating date format
As the use of the calendar is not mandatory and a date can be entered directly in the Xima® Formcycle forms, a validation of the date format is still required. The default validation is set to the German date format. There are two ways to change this:
Change regular expressions
See also the section validators.
Xima® Formcycle validates using regular expressions. The attribute vdt (=Validation Data Type) stands at the <input> element. For validating the regular expression, which is found situated in the global variable XM_FORM_I18N in the entry of the value of the attribute vdt, is used. Furthermore the corresponding entry in the global variable XM_FORM_I18N should be changed; here we find the error message that appears when an invalid date format has been entered.
Example for a date input field:
The attribute vdt here has the value dateDE. In XM_FORM_VRULES["dateDE"] you can find the following regular expression:
To validate a different date format, the attribute vdt is changed by Javascript and a corresponding entry to XM_FORM_RULES is added.
Example: French date format. An input field with the name tfFR was created and already selected as the data type date. Ein Eingabefeld mit dem Namen tfFR sei angelegt und als Datentyp bereits Datum ausgewählt. In Javascript one subsequently adds the following:
var fr = $('[name="tfFR"]') // Get the element.
fr.datepicker('destroy') // Dissolve old date picker.
fr.datepicker($.datepicker.regional['fr']) // Add new date picker for french.
fr.attr("vdt","dateFR") // Set the attribute for validation.
XM_FORM_VRULES["dateFR"] = /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/ // Add regular expressions for validation.
XM_FORM_I18N["dateFR"] = "La date doit être indiquée comme suit : année/mois/jour." // Add error text.
Writing your own error function
See also errorFunc().
Since regular expresseion can be quite extensive, a javascript function for validation can also be written. This comes about the function errorFunc().
If the data type in the Xima® Formcycle Designer is already set on date, it will be removed by taking away the attribute vdt. Alternatively the data type can be set to "text". The calendar will then be added with the date picker function, see (d).
Example for Dutch:
// http://stackoverflow.com/questions/6177975/how-to-validate-date-with-format-mm-dd-yyyy-in-javascript
var checkDate = function(year,month,day){
// Check the ranges of month and year
if(year < 1000 || year > 3000 || month === 0 || month > 12){return false}
var monthLength = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]
// Adjust for leap years
if(year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)){monthLength[1] = 29}
// Check the range of the day
return day > 0 && day <= monthLength[month - 1]
}
// Validation function for the dutch date.
var nlDateValidate = function(){
var msg = "Ongeldig datumformaat."
var me = $(this)
var text = me.val()
var comp = text.match(/^(\d+)\-(\d+)\-(\d+)$/)
if (!comp){return msg};
var d = parseInt(comp[1])
var m = parseInt(comp[2])
var y = parseInt(comp[3])
if (checkDate(y,m,d)){
return true
}
else {
return msg
}
}
var nl = $('[name="tfNL"]') // Selects element with the name "tfNL".
nl.datepicker($.datepicker.regional['nl']) // Add date picker.
nl.errorFunc(nlDateValidate) // Set validation function.
Server date
The current date of the Xima® Formcycle system can be found as a date object in window.XFC_METADATA.serverTime.