106 строки
4.2 KiB
HTML
106 строки
4.2 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<title>Essential JS 1 : DatePicker - Events</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
|||
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
|||
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|||
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|||
|
|
<!--[if lt IE 9]>
|
|||
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|||
|
|
<![endif]-->
|
|||
|
|
<!--[if gte IE 9]><!-->
|
|||
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|||
|
|
<!--<![endif]-->
|
|||
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="content-container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="cols-sample-area">
|
|||
|
|
<div class="frame">
|
|||
|
|
<div class="control">
|
|||
|
|
<input id="datepick" type="text" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="cols-prop-area event-tracer">
|
|||
|
|
<div>
|
|||
|
|
<div class="heading">
|
|||
|
|
<span>Event Trace</span>
|
|||
|
|
<div class="pull-right">
|
|||
|
|
<select name="selectevtprops" id="selectControls">
|
|||
|
|
<option value="select">Select</option>
|
|||
|
|
<option value="open">Open</option>
|
|||
|
|
<option value="close">Close</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="prop-grid content">
|
|||
|
|
<div class="eventarea">
|
|||
|
|
<div class="EventLog" id="EventLog">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="evtbtn">
|
|||
|
|
<input type="button" class="eventclear e-btn" value="Clear" onclick="onClear()" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var dpObj;
|
|||
|
|
jQuery(function ($) {
|
|||
|
|
$("#datepick").ejDatePicker({
|
|||
|
|
select: "onSelected",
|
|||
|
|
open: "onOpen",
|
|||
|
|
close: "onClose",
|
|||
|
|
create: "onCreate",
|
|||
|
|
width: "100%"
|
|||
|
|
});
|
|||
|
|
dpObj = $("#datepick").data("ejDatePicker");
|
|||
|
|
$('#selectControls').ejDropDownList({
|
|||
|
|
cssClass: "metroblue",
|
|||
|
|
popupShown: "adjustpopupposition",
|
|||
|
|
showCheckbox: true,
|
|||
|
|
checkAll: true,
|
|||
|
|
change: "evtpropscheckedevent"
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
// Client side Events
|
|||
|
|
function onCreate(args) {
|
|||
|
|
jQuery.addEventLog("DatePicker has been <span class='eventTitle'>created.</span>");
|
|||
|
|
}
|
|||
|
|
function onSelected(args) {
|
|||
|
|
jQuery.addEventLog(args.value + " was <span class='eventTitle'>selected.</span>");
|
|||
|
|
}
|
|||
|
|
function onOpen(args) {
|
|||
|
|
jQuery.addEventLog("DatePicker popup has been <span class='eventTitle'>opened.</span>");
|
|||
|
|
}
|
|||
|
|
function onClose(args) {
|
|||
|
|
jQuery.addEventLog("DatePicker popup has been <span class='eventTitle'>closed.</span>");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onClear() {
|
|||
|
|
jQuery.clearEventLog();
|
|||
|
|
}
|
|||
|
|
function evtpropscheckedevent(args) {
|
|||
|
|
if (args.isChecked) {
|
|||
|
|
switch (args.selectedValue) {
|
|||
|
|
case "select": dpObj.option(args.selectedValue, "onSelected"); break;
|
|||
|
|
case "open": dpObj.option(args.selectedValue, "onOpen"); break;
|
|||
|
|
case "close": dpObj.option(args.selectedValue, "onClose"); break
|
|||
|
|
case "create": dpObj.option(args.selectedValue, "onCreate"); break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
dpObj.option(args.selectedValue, null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|