JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn-na.infragistics.com/jquery/20121/2049/js/infragistics.loader.js"></script>
<h2>Personal information form example</h2>
<form action="" method="post">
<fieldset>
<legend>Editors</legend>
<label>First name:</label>
<input name="name"/>
<p><br/></p>
<label>Phone: </label>
<input name="phone"/>
<br/>
<label>Email: </label>
<input name="email"/>
<br/>
<label>Description: </label>
<br/>
<div id="descr"></div>
</fieldset>
<fieldset>
<legend>Date pickers</legend>
<label>Date picker initialized via the base Editor :</label>
<input id="date"/>
<br/>
<label>Date picker via the derived widget :</label>
<input id="date2"/>
<br/>
</fieldset>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</form>
JavaScript
$.ig.loader({
scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2049/js",
cssPath: "http://cdn-na.infragistics.com/jquery/20121/2049/css",
resources: "igEditors,igValidator,igShared"
});
$.ig.loader(function() {
$("input[name='name']").igMaskEditor({
inputMask: ">L>LL????????????????",
validatorOptions: {}
});
$("input[name='phone']").igMaskEditor({
inputMask: "(000)0000 999",
validatorOptions: {}
});
$("input[name='email']").igTextEditor();
$("#descr").igTextEditor({
textMode: "textarea",
nullText: "Leave a note."
});
$("#date").igEditor({
type: 'datepicker',
button: "dropdown",
inputName: 'date',
required: true,
validatorOptions: {
onsubmit: true
}
});
$("#date2").igDatePicker({
inputName: 'date2',
required: true,
validatorOptions: {
onsubmit: true
}
});
$(":submit").igButton({
labelText: "Send"
});
$(":reset").igButton({
labelText: "Reset"
});
});