jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
91 lines (87 loc) • 5.15 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" />
<meta name="description" content="jqxDateTimeInput has built-in date parsing functionality that allows you to
display date feedback in a variety of ways. Choose a date format from the dropdown to apply it to the jqxDateTimeInput."/>
<title id='Description'>jqxDateTimeInput has built-in date parsing functionality that allows you to
display date feedback in a variety of ways. Choose a date format from the dropdown to apply it to the jqxDateTimeInput. </title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.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>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
// define available cultures
var availableFormats = ['short date pattern', 'long date pattern', 'short time pattern', 'long time pattern',
'long date, short time pattern', 'long date, long time pattern', 'month/day pattern', 'month/year pattern', 'custom'];
// create a jqxDateTimeInput.
$("#jqxDateTimeInput").jqxDateTimeInput({ width: '300px', height: '25px', formatString: 'd'});
// create a ComboBox
$("#jqxDropDownList").jqxDropDownList({ source: availableFormats, selectedIndex: 0, width: '230px', height: '25px'});
// set the culture.
$("#jqxDropDownList").on('select', function (event) {
var index = event.args.index;
switch (index) {
case 0:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'd' });
break;
case 1:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'D' });
break;
case 2:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 't' });
break;
case 3:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'T' });
break;
case 4:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'f' });
break;
case 5:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'F' });
break;
case 6:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'M' });
break;
case 7:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'Y' });
break;
case 8:
$("#jqxDateTimeInput").jqxDateTimeInput({ formatString: 'dddd-MMMM-yyyy' });
break;
}
});
});
</script>
<div id='jqxWidget' style='width: 300px;'>
<div id='jqxDateTimeInput'>
</div>
<br />
<div>
<div style='font-family: "Verdana", "sans-serif"; font-size: 13px;'>
Choose Format:</div>
<br />
<div id='jqxDropDownList'>
</div>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>