jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
109 lines (99 loc) • 6.1 kB
HTML
<html lang="en">
<head>
<title id='Description'>DateTimeInput Custom Element Localization</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of the different languages and date formats in Custom Elements DataTimeInput." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.cs-CZ.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.en-CA.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.en-US.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.fr-FR.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.he-IL.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.hr-HR.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.hu-HU.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.it-IT.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.ja-JP.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.ru-RU.js"></script>
<script type="text/javascript" src="../../../jqwidgets/globalization/globalize.culture.sa-IN.js"></script>
<script type="text/javascript">
var availableCultures = ['Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)', 'French (France)', 'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'];
JQXElements.settings['DropDownList'] =
{
source: availableCultures,
selectedIndex: 3,
}
window.onload = function() {
var myDropDownList = document.querySelector('jqx-drop-down-list');
var myDateTimeInput = document.querySelector('jqx-date-time-input');
myDropDownList.addEventListener('select', function(event) {
var index = event.args.index;
switch (index) {
case 0:
myDateTimeInput.culture = 'cs-CZ';
break;
case 1:
myDateTimeInput.culture = 'de-DE';
break;
case 2:
myDateTimeInput.culture = 'en-CA';
break;
case 3:
myDateTimeInput.culture = 'en-US';
break;
case 4:
myDateTimeInput.culture = 'fr-FR';
break;
case 5:
myDateTimeInput.culture = 'it-IT';
break;
case 6:
myDateTimeInput.culture = 'ja-JP';
break;
case 7:
myDateTimeInput.culture = 'he-IL';
break;
case 8:
myDateTimeInput.culture = 'ru-RU';
break;
case 9:
myDateTimeInput.culture = 'hr';
break;
case 10:
myDateTimeInput.culture = 'sa-IN';
break;
}
})
}
</script>
</head>
<body>
<div class="example-description">
Custom element DateTimeInput 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 datetimeinput.js. The localization is set to the DateTimeInput instance by setting the Custom element DateTimeInput's culture property.
</div>
<jqx-date-time-input></jqx-date-time-input>
<br />
<div>
<div style='font-family: "Verdana", "sans-serif"; font-size: 13px;'>
Choose Culture
</div>
<br />
<jqx-drop-down-list settings='DropDownList'></jqx-drop-down-list>
</div>
</body>
</html>