jQuery UI Widgets Forums Editors Calendar Custom localization error

This topic contains 2 replies, has 3 voices, and was last updated by  hellyeah 4 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Custom localization error #22111

    TDS
    Participant

    Hello,
    i think we have some troubles with localization support.
    I’ve made the following translation:

    var Globalize;
    if ( typeof require !== "undefined" &&
    typeof exports !== "undefined" &&
    typeof module !== "undefined" ) {
    // Assume CommonJS
    Globalize = require( "globalize" );
    } else {
    // Global variable
    Globalize = window.Globalize;
    }
    Globalize.addCultureInfo( "de_DE", "default", {
    name: "de_DE",
    englishName: "Deutschland",
    nativeName: "Deutschland",
    language: "de",
    numberFormat: {
    decimals: 13,
    ",": ".",
    ".": ",",
    "NaN": "N/A",
    negativeInfinity: "-unendlich",
    positiveInfinity: "+unendlich",
    percent: {
    pattern: ["-n %","n %"],
    decimals: 13,
    ",": ".",
    ".": ","
    },
    currency: {
    pattern: ["-n $","n $"],
    decimals: 13,
    ",": ".",
    ".": ",",
    symbol: "€"
    }
    },
    calendars: {
    standard: {
    "/": ".",
    firstDay: 1,
    days: {
    // full day names
    names: [
    "Sonntag", "Montag",
    "Dienstag", "Mittwoch",
    "Donnerstag", "Freitag",
    "Sonnabend"
    ],
    // abbreviated day names
    namesAbbr: [
    "So", "Mo",
    "Di", "Mi",
    "Do", "Fr",
    "Sa"
    ],
    // shortest day names
    namesShort: [
    "So", "Mo",
    "Di", "Mi",
    "Do", "Fr",
    "Sa"
    ]
    },
    months: {
    // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
    names: [
    "Januar", "Februar",
    "März", "April",
    "Mai", "Juni",
    "Juli", "August",
    "September", "Oktober",
    "November", "Dezember",
    ""
    ],
    // abbreviated month names
    namesAbbr: [
    "Jan", "Feb",
    "Mrz", "Apr",
    "Mai", "Jun",
    "Jul", "Aug",
    "Sep", "Okt",
    "Nov", "Dez",
    ""
    ]
    },
    AM: null,
    PM: null,
    eras: [{"name":"n. Chr.","start":null,"offset":0}],
    patterns: {
    d: "dd.MM.yyyy",
    D: "dddd, d. MMMM yyyy",
    t: "HH:mm",
    T: "HH:mm:ss",
    f: "dddd, d. MMMM yyyy HH:mm",
    F: "dddd, d. MMMM yyyy HH:mm:ss",
    M: "dd MMMM",
    Y: "MMMM yyyy"
    }
    }
    }
    });
    function getLocalization()
    {
    var localizationobj = {};
    localizationobj.pagergotopagestring = "Gehe zu:";
    localizationobj.pagershowrowsstring = "Zeige Zeile:";
    localizationobj.pagerrangestring = " von ";
    localizationobj.pagernextbuttonstring = "<< Zurück";
    localizationobj.pagerpreviousbuttonstring = "Weiter >>";
    localizationobj.sortascendingstring = "aufsteigend";
    localizationobj.sortdescendingstring = "absteigend";
    localizationobj.sortremovestring = "Sortierung entfernen";
    localizationobj.firstDay = 1;
    localizationobj.percentsymbol = "%";
    localizationobj.currencysymbol = "€";
    localizationobj.currencysymbolposition = "after";
    //localizationobj.decimalseparator = ",";
    //localizationobj.thousandsseparator = ".";
    var days = {
    // full day names
    names: [
    "Sonntag", "Montag",
    "Dienstag", "Mittwoch",
    "Donnerstag", "Freitag",
    "Sonnabend"
    ],
    // abbreviated day names
    namesAbbr: [
    "So", "Mo",
    "Di", "Mi",
    "Do", "Fr",
    "Sa"
    ],
    // shortest day names
    namesShort: [
    "So", "Mo",
    "Di", "Mi",
    "Do", "Fr",
    "Sa"
    ]
    };
    localizationobj.days = days;
    var months = {
    // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
    names: [
    "Januar", "Februar",
    "März", "April",
    "Mai", "Juni",
    "Juli", "August",
    "September", "Oktober",
    "November", "Dezember",
    ""
    ],
    // abbreviated month names
    namesAbbr: [
    "Jan", "Feb",
    "Mrz", "Apr",
    "Mai", "Jun",
    "Jul", "Aug",
    "Sep", "Okt",
    "Nov", "Dez",
    ""
    ]
    };
    var patterns = {
    d: "dd.MM.yyyy",
    D: "dddd, d. MMMM yyyy",
    t: "HH:mm",
    T: "HH:mm:ss",
    f: "dddd, d. MMMM yyyy HH:mm",
    F: "dddd, d. MMMM yyyy HH:mm:ss",
    M: "dd MMMM",
    Y: "MMMM yyyy"
    }
    localizationobj.patterns = patterns;
    localizationobj.months = months;
    localizationobj.todaystring = "heute";
    localizationobj.clearstring = "Löschen";
    return localizationobj;
    }

    After that:

    	$("#trend-dat-form #date-start").jqxDateTimeInput({
    culture: "de_DE",
    showWeekNumbers: true,
    firstDayOfWeek: 1
    });
    $("#trend-dat-form #date-start").on("change", function(event) {
    var jsDate = event.args.date;
    $("#trend-dat-form #date-end").jqxDateTimeInput("setMinDate", jsDate);
    });
    $("#trend-dat-form #date-end").jqxDateTimeInput({
    culture: "de_DE",
    showWeekNumbers: true,
    firstDayOfWeek: 1
    });
    $("#trend-dat-form #date-end").on("change", function(event) {
    var jsDate = event.args.date;
    $("#trend-dat-form #date-start").jqxDateTimeInput("setMaxDate", jsDate);
    $("#trend-dat-panel-calendar").jqxCalendar("setRange", $("#trend-dat-form #date-start").jqxDateTimeInput("getDate"), jsDate);
    });
    $("#trend-dat-form #date-end").jqxCalendar("setMinDate", $("#trend-dat-form #date-start").jqxDateTimeInput("getDate"));

    And the result is:
    http://img15.myimg.de/localization7c034.png

    It should be Sa followed by So.

    Kind regards

    • This topic was modified 7 years, 3 months ago by  TDS. Reason: New image
    Custom localization error #22122

    Peter Stoev
    Keymaster

    Hi,

    Here’s a sample with German Culture applied to the DateTimeInput. “SA” is followed by “SO”

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" />
    <meta name="description" content="jqxDateTimeInput provides support for localizing its input field and popup calendarfor different languages
    and date formats. Each localization is contained within
    its own file with the language code appended to the name, e.g. globalize.culture.de-DE.js
    for German. The desired localization file should be loaded along with the jqxdatetimeinput.js.
    The localization is set to the jqxDateTimeInput instance by setting the jqxDateTimeInput's
    culture property."/>
    <title id='Description'>jqxDateTimeInput provides support for localizing its input field and popup calendarfor different languages
    and date formats. Each localization is contained within
    its own file with the language code appended to the name, e.g. globalize.culture.de-DE.js
    for German. The desired localization file should be loaded along with the jqxdatetimeinput.js.
    The localization is set to the jqxDateTimeInput instance by setting the jqxDateTimeInput's
    culture property. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    // create a jqxDateTimeInput.
    $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'de-DE', firstDayOfWeek: 1, width: '250px', height: '25px'});
    });
    </script>
    <div style='width: 300px;' id='jqxWidget'>
    <div id='jqxDateTimeInput'>
    </div>
    </div>
    </div>
    </body>
    </html>

    Hope this helps.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    Custom localization error #82016

    hellyeah
    Participant

    (function(window, undefined) {

    var Globalize;

    if (typeof require !== “undefined” &&
    typeof exports !== “undefined” &&
    typeof module !== “undefined”) {
    // Assume CommonJS
    Globalize = require(“globalize”);
    } else {
    // Global variable
    Globalize = window.Globalize;
    }

    Globalize.addCultureInfo(“tr-TR”, “default”, {
    name: “tr-TR”,
    englishName: “Turkish (Turkey)”,
    nativeName: “Türkçe (Türkiye)”,
    language: “tr”,
    numberFormat: {
    “,”: “.”,
    “.”: “,”,
    “NaN”: “n. def.”,
    negativeInfinity: “-unendlich”,
    positiveInfinity: “+unendlich”,
    percent: {
    pattern: [“-n%”, “n%”],
    “,”: “.”,
    “.”: “,”
    },
    currency: {
    pattern: [“-n $”, “n $”],
    “,”: “.”,
    “.”: “,”,
    symbol: “€”
    }
    },
    calendars: {
    standard: {
    “/”: “.”,
    firstDay: 1,
    days: {
    names: [“Pazar”, “Pazartesi”, “Salı”, “Çarşamba”, “Perşembe”, “Cuma”, “Cumartesi”],
    namesAbbr: [“Pa”, “Pz”, “Sa”, “Çr”, “Pr”, “Cu”, “Ct”],
    namesShort: [“Pa”, “Pz”, “Sa”, “Çr”, “Pr”, “Cu”, “Ct”]
    },
    months: {
    names: [“Ocak”, “Şubat”, “Mart”, “Nisan”, “Mayıs”, “Haziran”, “Temmuz”, “Ağustos”, “Eylül”, “Ekim”, “Kasım”, “Aralık”, “”],
    namesAbbr: [“Oc”, “Şb”, “Mr”, “Ns”, “Ma”, “Hz”, “Tm”, “At”, “el”, “Ek”, “Ks”, “Al”, “”]
    },
    AM: null,
    PM: null,
    eras: [{
    “name”: “n. Chr.”,
    “start”: null,
    “offset”: 0
    }],
    patterns: {
    d: “dd.MM.yyyy”,
    D: “dddd, d. MMMM yyyy”,
    t: “HH:mm”,
    T: “HH:mm:ss”,
    f: “dddd, d. MMMM yyyy HH:mm”,
    F: “dddd, d. MMMM yyyy HH:mm:ss”,
    M: “dd MMMM”,
    Y: “MMMM yyyy”
    }
    }
    }
    });

    }(this));

    $(“#jqxCalendar”).jqxCalendar({
    width: ‘250px’,
    height: ‘250px’,
    theme: ‘darkblue’
    });

    $(“#jqxCalendar”).jqxCalendar({
    culture: ‘tr-TR’
    });
    });

    this is the way i did my calendar Turkish

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.