Available in the OSS Version
Editors - Date Picker Submit Form

DatePickers submitted values:

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 illustrates the basic usage of the igDatePicker.
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" />
    <style>
        #container {
            width: 60%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 20px;
        }

        .p {
            margin-top: 5px;
        }

        #igDatePickersContainer {
            float: left;
        }

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

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

        #ValuesContainer {
            float: right;
        }

        #ValuesContainer.p {
            font-size: 16px;
        }

        #container h4 {
            font-size: 16px;
            margin-bottom: 10px;
        }

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

        @media screen and (max-width:920px) {
            #container {
                width: 70%;
            }
        }

        @media screen and (max-width:770px) {
            #container {
                width: 100%;
            }
        }

        @media screen and (max-width:570px) {
            #igDatePickersContainer,#ValuesContainer {
                float: none;
            }
            #ValuesContainer {
                margin-top:20px;
            }
        }
    </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.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>
    <div id="container" class="clearfix">
        <div id="igDatePickersContainer">
            <form id="form" name="FormSubmit" action="javascript:console.log('Submit');">
                <div class="group-fields">
                    <label for="datePicker1">Start Date</label>
                    <input id="datePicker1" type="date" name="startDayPicker" />
                </div>
                <div class="group-fields">
                    <label for="datePicker2">End Date</label>
                    <input id="datePicker2" type="date" name="endDatePicker" />
                </div>
                <div class="group-fields">
                    <label for="dataModeCombo">Change DatePickers dataMode option</label>
                    <input id="dataModeCombo" />
                </div>
                <input type="submit" id="submitBtn" value="Submit" />
            </form>
        </div>

        <div id="ValuesContainer">
            <h4>DatePickers submitted values:</h4>
            <div class="divHeight">
                <p class="pStyle" id="results"></p>
            </div>
        </div>
    </div>

    <script>
        var data = [
           { "ID": 1, "dataMode": "date" },
           { "ID": 2, "dataMode": "editModeText" },
           { "ID": 3, "dataMode": "displayModeText" }
        ];

        $(function () {
            $("#datePicker1").igDatePicker({
                minValue: new Date(2015, 6, 1),
                dateDisplayFormat: "yy/MM/dd dddd"
            });

            $("#datePicker2").igDatePicker({
                maxValue: new Date(2018, 8, 8),
                dateDisplayFormat: "yy/MM/dd dddd"
            });

            $("#dataModeCombo").igCombo({
                dataSource: data,
                valueKey: "ID",
                textKey: "dataMode",
                placeHolder: "change dataMode",
                enableClearButton: false,
                mode: "dropdown",
                initialSelectedItems: [{ index: 0 }],
                selectionChanged: function (evt, ui) {
                	var selectedMode = ui.items[0].data.dataMode,
                		value1, value2;
					
                	value1 = $("#datePicker1").igDatePicker("value");
                    $("#datePicker1").igDatePicker("option", "dataMode", selectedMode);
                    $("#datePicker1").igDatePicker("value", value1);
                    value2 = $("#datePicker2").igDatePicker("value");
                    $("#datePicker2").igDatePicker("option", "dataMode", selectedMode);
                    $("#datePicker2").igDatePicker("value", value2);
                }
            });

            var headers = $('.group-fields label');
            $("#form").submit(function (event) {
                var submittedValues = $("#form").serializeArray();
                $(".p").remove();
                for (var i = 0 ; i < submittedValues.length; i++) {
                    $("#results").append("<p class='p'><span class='header'>" + headers[i].textContent + ": " + "</span>  <strong>" + submittedValues[i].value + "</strong></p>");
                }
                return false;
            });
        });
    </script>

</body>
</html>
Ignite UI for jQuery | Samples

Search Results

Editors - Date Picker Submit Form

DatePickers submitted values:

Code View
