Available in the OSS Version

Editors - TypeScript

Text Editor

Date Picker with Japan localization

Date and Time editor

Mask editor

Currency editor

Percent editor

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This sample shows how to use TypeScript for creating different editors like Text Editor, Date Editor, Date Picker with Localization, Mask Editor, Currency Editor and Percent Editor.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<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 src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <style>
        .combo-label {
            margin-top: 1em;
            margin-bottom: .5em;
        }
    </style>

</head>
<body>
    <!-- JavaScript files containing all needed regional settings -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/i18n/regional/infragistics.ui.regional-en.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/i18n/regional/infragistics.ui.regional-ja.js"></script>

    <div id="editors">
        <div>
            <h4 class="combo-label">
                Text Editor
            </h4>
            <div id="textEditor"></div>
        </div>
        <div>
            <h4 class="combo-label">
                Date Picker with Japan localization
            </h4>
            <div id="jaDatePicker"></div>
        </div>
        <div>
            <h4 class="combo-label">
                Date and Time editor
            </h4>
            <div id="dateTimeEditor"></div>
        </div>
        <div>
            <h4 class="combo-label">
                Mask editor
            </h4>
            <div id="maskEditor"></div>
        </div>
        <div>
            <h4 class="combo-label">
                Currency editor
            </h4>
            <div id="currencyEditor"></div>
        </div>
        <div>
            <h4 class="combo-label">
                Percent editor
            </h4>
            <div id="percentEditor"></div>
        </div> 
    </div>
    <script src="/TypeScriptSamples/editors/typescript.js"></script>
</body>
</html>