devexpress 网格内的 DatePicker 控件未加载（工作）

Question

我有一个由 devexpress 网格组成的局部视图。单击网格相应行的编辑后，会出现一个面板，其中提供了用于编辑值的控件。这些控件中的一个是日期选择器。此日期选择器的日历控件未加载，无法让我 select 一个日期。相反，起始日期和截止日期控件仍保留为文本框。下面是我的部分代码。

@{

    var grid = Html.DevExpress().GridView(settings =>
    {
        settings.Name = "GridViewDuration";
        settings.CallbackRouteValues = new { Controller = "DurationMaster", Action = "GridViewDurationPartial" };

        settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction1" };
        settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction2" };
        settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "MyController", Action = "MyControllerAction3" };
        settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
        settings.SettingsBehavior.ConfirmDelete = true;

        settings.CommandColumn.Visible = true;
        settings.CommandColumn.ShowNewButton = true;
        settings.CommandColumn.ShowDeleteButton = true;
        settings.CommandColumn.ShowEditButton = true;

        settings.KeyFieldName = "DurationId";

        settings.SettingsPager.Visible = true;
        settings.SettingsPager.PageSize = 20;
        settings.Settings.ShowGroupPanel = true;
        settings.Settings.ShowFilterRow = true;
        settings.SettingsBehavior.AllowSelectByRowClick = false;
        settings.Columns.Add(column =>
        {
            column.FieldName = "Column1";
            column.ReadOnly = true;
            column.Width = 20;

        });
        settings.Columns.Add(column =>
        {
            column.FieldName = "Column2";
            column.Caption = "xyz";
            column.ColumnType = MVCxGridViewColumnType.ComboBox;
            column.Width = 250;

            var comboBoxProperties = column.PropertiesEdit as ComboBoxProperties;
            comboBoxProperties.DataSource = PMC.Web.Controllers.DurationMasterController.getSelectList("0", "MyAction4");
            comboBoxProperties.TextField = "Text";
            comboBoxProperties.ValueField = "Value";
            comboBoxProperties.ValueType = typeof(int);
            comboBoxProperties.ValidationSettings.RequiredField.IsRequired = true;


        });
        settings.InitNewRow = (sender, e) =>
        {
            e.NewValues["ColumnId"] = 0;
        };
        settings.Columns.Add("ColumnName");
        settings.Columns.Add("Description");
        //settings.Columns.Add("DisplayName");
        settings.Columns.Add("FromDate");
        settings.Columns.Add("ToDate");
    });
    if (ViewData["EditError"] != null)
    {
        grid.SetEditErrorText((string)ViewData["EditError"]);
    }

}
@grid.Bind(Model).GetHtml()

下面是我的视图，它呈现了上面的部分，还包含 javascript 代码来加载日期选择器的日历控件

@model List<XYZ.Data.ViewModel.Admin.MyModel>
@{
    ViewBag.Title = "XYZ";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src='@Url.Content("~/Scripts/UserManagementScript.js")'></script>
<script type="text/javascript">

    $(document).ready(function () {
        debugger
        $("#GridViewDuration_DXEditor5_I").datepicker({
            dateFormat: 'mm/dd/yyyy',
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            minDate: '01/01/2015',
            maxDate: new Date(),
            constrainInput: false,
            selectMonths: '12',
            selectYears: '30',
            duration: ''
        });

        $("#GridViewDuration_DXEditor6_I").datepicker({
            dateFormat: 'mm/dd/yyyy',
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            minDate: '01/01/2015',
            maxDate: new Date(),
            constrainInput: false,
            selectMonths: '12',
            selectYears: '30',
            duration: ''

        });
    });

    document.getElementById("GridViewDuration_DXCBtn0").addEventListener("click", function () {
        debugger
        $("#GridViewDuration_DXEditor5_I").datepicker({
            dateFormat: 'mm/dd/yyyy',
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            minDate: '01/01/2015',
            maxDate: new Date(),
            constrainInput: false,
            selectMonths: '12',
            selectYears: '30',
            duration: ''
        });

        $("#GridViewDuration_DXEditor6_I").datepicker({
            dateFormat: 'mm/dd/yyyy',
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            minDate: '01/01/2015',
            maxDate: new Date(),
            constrainInput: false,
            selectMonths: '12',
            selectYears: '30',
            duration: ''

        });
    });

    //$('#GridViewDuration_DXCBtn0').click(function () {
    //    debugger
    //    $("#GridViewDuration_DXEditor5_I").datepicker({
    //        dateFormat: 'mm/dd/yyyy',
    //        changeMonth: true,
    //        changeYear: true,
    //        gotoCurrent: true,
    //        minDate: '01/01/2015',
    //        maxDate: new Date(),
    //        constrainInput: false,
    //        selectMonths: '12',
    //        selectYears: '30',
    //        duration: ''
    //    });

    //    $("#GridViewDuration_DXEditor6_I").datepicker({
    //        dateFormat: 'mm/dd/yyyy',
    //        changeMonth: true,
    //        changeYear: true,
    //        gotoCurrent: true,
    //        minDate: '01/01/2015',
    //        maxDate: new Date(),
    //        constrainInput: false,
    //        selectMonths: '12',
    //        selectYears: '30',
    //        duration: ''

    //    });
    //});

</script>


    @Html.Partial("_Common")

    @Html.DevExpress().GetStyleSheets(

    new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }
)
    @Html.DevExpress().GetScripts(

    new Script { ExtensionSuite = ExtensionSuite.GridView }
)



    @Html.Partial("_GridViewDurationPartial", Model)

这是它的样子，

这是编辑时的样子

Answer 1

您可以试试这个解决方法：

添加 css class 您的专栏

settings.Columns.Add(column =>
{
    column.FieldName = "FromDate";
    column.Caption = "FromDate";
    column.CellStyle.CssClass = "datepicker";
});
settings.Columns.Add(column =>
{
    column.FieldName = "ToDate";
    column.Caption = "ToDate";
    column.CellStyle.CssClass = "datepicker";
});

并将您的日期选择器绑定到 css class

$(".datepicker").datepicker({
        dateFormat: 'mm/dd/yyyy',
        changeMonth: true,
        changeYear: true,
        gotoCurrent: true,
        minDate: '01/01/2015',
        maxDate: new Date(),
        constrainInput: false,
        selectMonths: '12',
        selectYears: '30',
        duration: ''

    });

这没有经过测试，但应该可以。

devexpress 网格内的 DatePicker 控件未加载（工作）

DatePicker control inside a devexpress grid is not loading(working)

asp.net

asp.net-mvc

jquery

devexpress

devexpress-mvc