This section explains how other date formats than german ones, can be used.

Examples for the use of other date formats.

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

/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* 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.
var dp = datepicker.regional[XFC_METADATA.urlParams.lang];
datepicker.setDefaults(dp);
return dp;

The language file should now look like this:

Edited language file for Spanish

/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* 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

/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* 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:

http://naiad.formcloud.de/formcycle/form/provide/2152?lang=fr

Call up of the form in dutch language:

http://naiad.formcloud.de/formcycle/form/provide/2152?lang=nl

To change the default format with Javascript directly, you proceed in the following way.

$.datepicker.setDefaults($.datepicker.regional['<language/country>'])

For example for French:

$.datepicker.setDefaults($.datepicker.regional['fr']) // French.

Or for Dutch:

$.datepicker.setDefaults($.datepicker.regional['nl']) // 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:

var input = $('input.hasDatepicker').first() // Selects the first input field with a datepicker.
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: 

closeText, prevText, nextText, currentText, monthNames, monthNamesShort, dayNames, dayNamesShort, dayNamesMin, weekHeader, dateFormat, firstDay, isRTL, showMonthAfterYear, yearSuffix

A description of these entries ccan be found in the documentation.

Here we have a date format for Germany as an example:

$.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: '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:

Example for a modified validator for the date.
<input id="xi-tf-1" name="tf1" class="XItem XTextField" vdt="dateDE" vmxl="0" vmnl="0" placeholder="" title="" type="text" style=" display:block; " value=""><div class="xm-error-container label-top">

The attribute vdt here has the value dateDE. In XM_FORM_VRULES["dateDE"] you can find the following regular expression:

/^(((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))))$/

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:

// Validation function for one day, check leap year.
// 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.

$("[name=tfDate]").datepicker("setDate", XFC_METADATA.serverTime) // Sets the input field named tfDate to the current server date
Tags: Datepicker
Created by awa on 09.04.2019, 16:14
Translated into en by awa on 09.04.2019, 16:14
Copyright 2000-2024