JSFiddle - React, Tailwind, and code Playground
by dkamburov
HTML
<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://igniteui.com/js/angular.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://www.igniteui.com/igniteui/js/extensions/igniteui-angularjs.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="http://igniteui.com/css/bootstrap/bootstrap.min.css" rel="stylesheet"></link>
<div ng-app="sampleApp" ng-controller="editorsController">
<table id="" class="table table-striped table-hover">
<thead>
<tr>
<th>Control Name</th>
<th>HTML Element</th>
<th>Ignite UI Controls</th>
</tr>
</thead>
<tbody>
<tr>
<td>igDatePicker</td>
<td><input class="form-control" type="text" id="datePicker11" ng-model="editors.date"></input></td>
<td><ig-date-picker class="form-control" id="datePicker1" ng-model="editors.date"></ig-date-picker></td>
</tr>
</tbody>
</table>
</div>
CSS
.row {
margin-right: 0;
margin-left: 0;
}
JavaScript
$(function () {
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
sampleApp.controller('editorsController', function ($scope) {
$scope.editors = {
currency: 12.1,
date: new Date(),
editor: 'Infragistics',
mask: '134-134-134',
numeric: 123,
percent: 0.12,
text: 'Ignite UI'
};
});
});