Available in the OSS Version

Editors - Date and Time Formats

Default Configuration

Date and Time Configuration

Time Configuration

Date Contraints, Hide Input Mask

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 different configurations for formatting dates and times in the date editor.

Code View

Show In JsFiddle

Copy to Clipboard

HTML

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/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.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <style>
        
        #editorContainer h4 {
            margin-bottom: .5em;
        }

    </style>

    <div id="editorContainer">

        <h4>Default Configuration</h4>
        <div id="defaultDateEditor"></div>

        <h4>Date and Time Configuration</h4>
        <div id="dateTimeEditor"></div>

        <h4>Time Configuration</h4>
        <div id="timeEditor"></div>

        <h4>Date Contraints, Hide Input Mask</h4>
        <div id="constraintEditor"></div>
    
    </div>

    <script>

        $(function () {

            $("#defaultDateEditor").igDateEditor({
                width: 200,
                value: new Date(2015, 9, 9)
            });

            $("#dateTimeEditor").igDateEditor({
                width: 200,
                dateInputFormat: "dateTime",
                value: new Date(2015, 9, 9, 9, 9)
            });

            $("#timeEditor").igDateEditor({
                width: 200,
                dateInputFormat: "time",
                value: new Date(2015, 9, 9, 9, 9)
            });

            $("#constraintEditor").igDateEditor({
                width: 200,
                minValue: new Date(2012, 9, 24),
                maxValue: new Date(2018, 9, 24),
                value: new Date(2015, 9, 9),
                nullText: "Enter Today's Date",
                unfilledCharsPrompt: " "
            });

        });

    </script>

</body>
</html>

Ignite UI for jQuery | Samples