Available in the Full Version

Editors - Date Editor MVC

Book your flight

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 basic options of the igDateEditor using MVC wrapper.

Code View

Copy to Clipboard 
@using Infragistics.Web.Mvc

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <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" />
    <style>
        h3 {
            font-size: 20px;
            margin-bottom: 20px;
        }

        .group-fields {
            margin-bottom: 10px;
        }

        .group-fields label {
            display: block;
            line-height: 18px;
        }

        .group-fields .inline {
            display: inline;
        }

        .group-fields .ui-igcheckbox-normal {
            margin-right: 5px;
            float: left;
        }

        .group-fields .ui-igedit-container {
            width: 230px;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        .group-fields.clearfix > div {
            float: left;
            margin-right: 10px;
        }
    </style>

    <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> 

    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/modules/i18n/regional/infragistics.ui.regional-i18n.js"></script>
    
</head>
<body>
    <h3>Book your flight</h3>
    <div class ="group-fields">
        <label for="currentTime">Right now it is</label>
         @(Html.Infragistics().DateEditor()
        .ID("currentTime")
        .DateInputFormat("dateTime")
        .Value(DateTime.Now)
        .Render()
        )
    </div>
    <div class="group-fields clearfix">
        <div>
            <label for="departure">Departure</label>
            @(Html.Infragistics().DateEditor()
            .ID("departure")
            .DateInputFormat("ddd, MMM d, yyyy")
            .Value(DateTime.Today)
            .AddClientEvent(EditorClientEvents.ValueChanged, "valueChanged")
            .Render()
            )
        </div>
        <div>
            <label for="departureTime">Around</label>
            @(Html.Infragistics().DateEditor()
            .ID("departureTime")
            .Width(100)
            .DateInputFormat("hh:mm")
            .Value(DateTime.Now)
            .ButtonType(TextEditorButtonType.Spin)
            .Render()
            )
        </div>
    </div>
    <div class="group-fields clearfix">
        <div>
            <label for="return">Return</label>
            @(Html.Infragistics().DateEditor()
            .ID("return")
            .DateInputFormat("ddd, MMM d, yyyy")
            .Value(DateTime.Now.AddDays(1))
            .Render()
            )
        </div>
        <div>
            <label for="returnTime">Around</label>
            @(Html.Infragistics().DateEditor()
            .ID("returnTime")
            .Width(100)
            .DateInputFormat("hh:mm")
            .Value(DateTime.Now)
            .ButtonType(TextEditorButtonType.Spin)
            .Render()
            )
        </div>
    </div>
    <div class="group-fields">
        @(Html.Infragistics().CheckBoxEditor()
        .ID("oneWayTicket")
        .Checked(false)
        .AddClientEvent(EditorClientEvents.ValueChanged, "oneWayTicket")
        .Render()
        )
        <label for="oneWayTicket">One way ticket</label>
    </div>

    <script type="text/javascript">

        function valueChanged(evt, ui) {
            if (ui.newValue instanceof Date) {
                var nextDay = new Date(ui.newValue.getTime() + 24 * 60 * 60 * 1000);
                $("#return").igDateEditor("option", "value", nextDay);
            }
        }

        function oneWayTicket(evt, ui) {
            if (ui.newState == true) {
                $("#return").igDateEditor("option", "disabled", true);
                $("#returnTime").igDateEditor("option", "disabled", true);

            }
            else {
                $("#return").igDateEditor("option", "disabled", false);
                $("#returnTime").igDateEditor("option", "disabled", false);

            }
        }

    </script>
</body>
</html>