jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
153 lines (143 loc) • 7.13 kB
HTML
<html lang="en">
<head>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta name="msapplication-tap-highlight" content="no" />
<title id='Description'>jQWidgets Calendar Range Selection Mobile Example
</title>
<link rel="stylesheet" href="../styles/demo.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.android.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.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/jqxdata.js"></script>
<script type="text/javascript" src="../simulator.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/globalization/globalize.js"></script>
<style type="text/css">
html, body {
font-size: 18px;
}
.section {
padding: 10px;
clear: both;
height: 30px;
line-height: 30px;
font-size: 22px;
font-weight: bold;
background: transparent;
}
.jqx-calendar td {
font-size: 18px;
}
.input {
font-size: 18px;
margin: 0px;
left: 15px;
border: none;
height: 30px;
line-height: 30px;
display: block;
position: relative;
background: none;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var theme = prepareSimulator("calendar");
$("#fromCalendar").jqxCalendar({ theme: theme, titleHeight: 40, columnHeaderHeight: 40, width: '100%', height: '100%' });
$("#toCalendar").jqxCalendar({ theme: theme, titleHeight: 40, columnHeaderHeight: 40, width: '100%', height: '100%' });
$("#from").jqxToggleButton({ theme: theme, enableHover: false, width: '40%', height: 50 });
$("#to").jqxToggleButton({ theme: theme, enableHover: false, width: '40%', height: 50 });
// init dates.
var fromDate = new Date();
fromDate.setFullYear(2013, 4, 30);
$("#fromCalendar").jqxCalendar('setDate', fromDate);
var toDate = new Date();
toDate.setFullYear(2013, 5, 25);
$("#toCalendar").jqxCalendar('setDate', toDate);
$("#fromcontainer").hide();
$("#tocontainer").hide();
var className = "jqx-widget-header" + " " + "jqx-widget-header-" + theme;
$(".section").addClass(className);
$("#from").click(function () {
$("#tocontainer").hide();
if ($("#fromcontainer").css('display') != 'block') {
$("#fromcontainer").show();
$("#fromCalendar").show();
$("#to").jqxToggleButton('unCheck');
$("#from").jqxToggleButton('check');
}
else {
$("#fromcontainer").hide();
$("#from").jqxToggleButton('unCheck');
$("#to").jqxToggleButton('unCheck');
}
});
$("#to").click(function () {
$("#fromcontainer").hide();
if ($("#tocontainer").css('display') != 'block') {
$("#tocontainer").show();
$("#toCalendar").show();
$("#from").jqxToggleButton('unCheck');
$("#to").jqxToggleButton('check');
}
else {
$("#tocontainer").hide();
$("#from").jqxToggleButton('unCheck');
$("#to").jqxToggleButton('unCheck');
}
});
$("#fromCalendar").on('cellSelected', function (event) {
var date = $.jqx.dataFormat.formatdate(event.args.date, "MMM, dd");
$("#fromLabel").html(date);
});
$("#toCalendar").on('cellSelected', function (event) {
var date = $.jqx.dataFormat.formatdate(event.args.date, "MMM, dd");
$("#toLabel").html(date);
});
$("#fromcontainer").css('visibility', 'visible');
$("#tocontainer").css('visibility', 'visible');
initSimulator("calendar");
});
</script>
</head>
<body class='default'>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<div id='calendar' style="margin-left: 5%; position: relative; top: 20px; height: 70%; width: 90%;">
<div class="section">
Set Report Date Range
</div>
<div id="from" style="float: left; font-size: 18px; margin: 6px;">
<div style="margin: 10px 5px;">
<img style="float: left; margin-right: 5px;" src="../../../../images/catalogicon.png" />
<span id="fromLabel" style="float: left; margin-top: 5px;">May, 30</span>
</div>
</div>
<div id="to" style="float: right; font-size: 18px; margin: 6px; margin-left: 0px;">
<div style="margin: 10px 5px">
<img style="float: left; margin-right: 5px;" src="../../../../images/catalogicon.png" />
<span id="toLabel" style="float: left; margin-top: 5px;">Jun, 25</span>
</div>
</div>
<div style="clear: both;"></div>
<div id="fromcontainer" style="visibility: hidden; margin-top: 10px; margin-left: 5%; height: 80%; width: 90%;">
<div id="fromCalendar">
</div>
</div>
<div id="tocontainer" style="visibility: hidden; margin-top: 10px; margin-left: 5%; height: 80%; width: 90%;">
<div id="toCalendar">
</div>
</div>
</div>
</div>
</div>
</body>
</html>