<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
<script type="text/javascript" src="/js/external/knockout-latest.js"></script>
<script type="text/javascript" src="/js/external/knockout.mapping-latest.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/extensions/infragistics.ui.editors.knockout-extensions.js"></script>
</head>
<body>
<script type="text/javascript">
var orderDate = new Date(2012, 9, 24, 10, 12);
var shipDate = new Date(2012, 10, 12, 22, 45);
var viewModel = {
orderDate: ko.observable(orderDate),
shipDate: ko.observable(shipDate),
dueInDays: ko.observable(7),
customerName: ko.observable("Peter Sanders"),
contactPhone: ko.observable("318-555-6879"),
advancePayment: ko.observable(516.89),
discountPercent: ko.observable(8)
};
$(function () {
ko.applyBindings(viewModel);
});
</script>
<style type="text/css">
body { font-family: Arial; }
label { display: inline-block; }
.order-container {
position: relative;
width: 450px;
margin-left: -225px;
left: 50%;
font-size:1.2em;
}
.row {
margin-top: 5px;
}
.row-control {
height: 28px;
padding: 0;
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.heading-row
{
margin: 20px 0px 10px 0px;
font-size: large;
}
.heading-label, .row-label, .row-control
{
width: 200px;
margin: 0px 5px 0px 5px;
}
@media all and (max-width: 520px) {
.ui-datepicker {
width: 250px;
}
.order-container {
width: 280px;
margin-left: -140px;
}
.ui-igedit {
margin-bottom: 5px;
}
}
</style>
<div class="order-container">
<div class="row heading-row">
<label class="heading-label">Ignite UI for jQuery Editors</label>
<label class="heading-label">Plain INPUTs</label>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Order Date:</label>
</div>
<div class="row">
<!-- date editor -->
<div id="orderDateIG" class="row-control" data-bind="igDateEditor: { value: orderDate, textAlign: 'right' }"></div>
<input id="orderDate" type="text" class="row-control" data-bind="value: orderDate"/>
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Order Time:</label>
</div>
<div class="row">
<!-- time picker -->
<div id="orderTimeIG" class="row-control" data-bind="igTimePicker: { value: orderDate, textAlign: 'right' }"></div>
<input id="orderTime" type="text" class="row-control" data-bind="value: orderDate">
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Ship Date</label>
</div>
<div class="row">
<!-- date picker -->
<div id="shipDateIG" class="gosho row-control" data-bind="igDatePicker: { value: shipDate, textAlign: 'right' }"></div>
<input id="shipDate" class="date-row-control row-control" data-bind="value: shipDate"/>
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Ship Time:</label>
</div>
<div class="row">
<!-- time picker -->
<div id="shipTimeIG" class="row-control" data-bind="igTimePicker: { value: shipDate, textAlign: 'right' }"></div>
<input id="shipTime" type="text" class="row-control" data-bind="value: shipDate">
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Due in Days:</label>
</div>
<div class="row">
<!-- numeric editor -->
<div id="dueInDaysIG" class="row-control" data-bind="igNumericEditor: { value: dueInDays, textAlign: 'right' }"></div>
<input id="dueInDays" type="number" class="row-control" data-bind="value: dueInDays"/>
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Customer Name:</label>
</div>
<div class="row">
<!-- text editor -->
<div id="customerNameIG" class="row-control" data-bind="igTextEditor: { value: customerName, textAlign: 'right' }"></div>
<input id="customerNAme" type="text" class="row-control" data-bind="value: customerName"/>
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Contact Phone: <br /> (mask: 000-000-0000)</label>
</div>
<div class="row">
<!-- mask editor -->
<div id="contactPhoneIG" class="row-control" data-bind="igMaskEditor: {
value: contactPhone,
inputMask: '000-000-0000',
textAlign: 'right'
}"></div>
<input id="contactPhone" type="text" class="row-control" data-bind="value: contactPhone"/>
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Advance Payment:</label>
</div>
<div class="row">
<!-- currency editor -->
<div id="advancePaymentIG" class="row-control" data-bind="igCurrencyEditor: { value: advancePayment, textAlign: 'right' }"></div>
<input id="advancePayment" type="text" class="row-control" data-bind="value: advancePayment"/>
</div>
</div>
<div class="editor-row">
<div class="row">
<label class="row-label">Discount Percent:</label>
</div>
<div class="row">
<!-- percent editor -->
<div id="discountPercentIG" class="row-control" data-bind="igPercentEditor: {
value: discountPercent,
displayFactor : 1,
textAlign: 'right'
}"></div>
<input id="discountPercent" type="text" class="row-control" data-bind="value: discountPercent"/>
</div>
</div>
</div>
</body>
</html>
