Pickers.cshtml


@{
    ViewBag.Title = "Pickers";
}

@using Syncfusion.EJ2;
@using Syncfusion.EJ2.InPlaceEditor;
@using Syncfusion.EJ2.DropDowns;

@section ControlsSection{
    <div class="col-lg-8 control-section inplace-control-section pickers-layout">
        <div class="control_wrapper form-horizontal">
            <table>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            DatePicker
                        </label>
                    </td>
                    <td>
                        <ejs-inplaceeditor id="datePickerEle" mode="Inline" type="Date" value="ViewBag.dateValue" model="ViewBag.dateData">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            TimePicker
                        </label>
                    </td>
                    <td>
                        <ejs-inplaceeditor id="timePickerEle" mode="Inline" type="Time" value="ViewBag.dateValue" model="ViewBag.timeData">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            DateTimePicker
                        </label>
                    </td>
                    <td>
                        <ejs-inplaceeditor id="dateTimePickerEle" mode="Inline" type="DateTime" value="ViewBag.dateValue" model="ViewBag.dateTimeData">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">
                            DateRangePicker
                        </label>
                    </td>
                    <td>
                        <ejs-inplaceeditor id="dateRangePickerEle" mode="Inline" type="DateRange" value="ViewBag.daterangeValue" model="ViewBag.dateRangeData">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <table id="property" title="Properties">
            <tr>
                <td>
                    <div> Mode</div>
                </td>
                <td>
                    <div>
                        <ejs-dropdownlist id="editorMode" class="form-control" width="90%" dataSource="ViewBag.modeData" change="changeEditorMode" index="0"></ejs-dropdownlist>
                    </div>
                </td>
            </tr>
        </table>
    </div>
}
<style>
    /* custom code start */
    .inplace-control-section.pickers-layout .control_wrapper {
        margin: auto;
        max-width: 400px;
    }

   .inplace-control-section.pickers-layout .control_wrapper table {
        margin: auto;
   }

   .inplace-control-section.pickers-layout .control_wrapper table td {
       width: 200px;
       height: 100px;
   }

   .inplace-control-section.pickers-layout .control_wrapper table td .control-label {
      margin-bottom: 0px;
   }
   /* custom code end */

    #pickerProperty table td {
        width: 50%;
    }

    #pickerProperty .property-panel-table div {
        padding-left: 10px;
        padding-top: 10px;
    }
	.e-inplaceeditor-tip .e-editable-component .e-input-group .e-clear-icon.e-clear-icon-hide,
    .inplace-control-section.pickers-layout .e-inplaceeditor .e-editable-component .e-clear-icon-hide {
        display: block;
        visibility: hidden;
    }

    @@media (max-width: 768px) {
        .inplace-control-section.pickers-layout {
            padding-left: 0;
            padding-right: 0;
        }

        .inplace-control-section .control_wrapper table tr td:nth-child(1) {
            width: 130px;
        }

        .inplace-control-section .control_wrapper table tr td:nth-child(2) {
            width: 200px;
        }
    }
</style>

@section PreScripts {
    <script>
        var dateEle = document.getElementById("datePickerEle");
        var timeEle = document.getElementById("timePickerEle");
        var dateTimeEle = document.getElementById("dateTimePickerEle");
        var dateRangeEle = document.getElementById("dateRangePickerEle");
        function changeEditorMode(e) {
            dateEle.ej2_instances[0].mode = timeEle.ej2_instances[0].mode = dateTimeEle.ej2_instances[0].mode = dateRangeEle.ej2_instances[0].mode = e.itemData.value;
            dateEle.ej2_instances[0].dataBind();
            timeEle.ej2_instances[0].dataBind();
            dateTimeEle.ej2_instances[0].dataBind();
            dateRangeEle.ej2_instances[0].dataBind();
        }
        document.getElementById('right-pane').onscroll = function () {
            var mode = document.getElementById("editorMode")
            if (mode.ej2_instances[0].value === 'Inline') { return; }
            if (dateEle.querySelectorAll('.e-editable-open').length > 0)
                dateEle.ej2_instances[0].enableEditMode = false;
            if (timeEle.querySelectorAll('.e-editable-open').length > 0)
                timeEle.ej2_instances[0].enableEditMode = false;
            if (dateTimeEle.querySelectorAll('.e-editable-open').length > 0)
                dateTimeEle.ej2_instances[0].enableEditMode = false;
            if (dateRangeEle.querySelectorAll('.e-editable-open').length > 0)
                dateRangeEle.ej2_instances[0].enableEditMode = false;
        }
    </script>
}
@section ActionDescription{
    <p>
        This sample demonstrates the usage of picker components such as Date, Time, DateTime, and DateRange.
        Click on the dotted input element to switch to the editable state of the corresponding integrated component.
    </p>
}
@section Description{
    <p>
        This sample illustrates the way to integrate picker components with the <code>In-place Editor</code> component. The
        applicable types of
        components are:
    </p>
    <p>
        <ul>
            <li>
                <code>DatePicker</code>
            </li>
            <li>
                <code>TimePicker</code>
            </li>
            <li>
                <code>DateTimePicker</code>
            </li>
            <li>
                <code>DateRangePicker</code>
            </li>
        </ul>
    </p>
    <p>
        The above components and their features are editable in place and can be customized with the model
        properties
        of the specific component.
    </p>
    <p>
        More information on the <code>In-place Editor</code> instantiation can be found in the <a target="_blank"
                                                                                                  href="https://ej2.syncfusion.com/aspnetcore/documentation/inplace-editor/getting-started-asp-core/">
            documentation section
        </a>.
    </p>
}

@*custom code start*@

@section Meta{

    <meta name="description" content="This sample demonstrates the usage of picker controls such as Date, Time, DateTime, and DateRange in ASP.NET Core platform." />

}

@*custom code end*@