devexpress網格中的DatePicker控件未加載（工作）

Question

我有一個包含devexpress網格的局部視圖。單擊網格的相應行的編輯時會出現一個面板，其中提供了用於編輯值的控件。 這些控件之一是日期選擇器。此日期選取器的日曆控件不會加載以允許我選擇日期。相反，從開始到現在的控件都保留爲文本框。 以下是我的部分代碼。

@{ 

    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類的列

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類

$(".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: '' 

    }); 

這不是測試，但它應該工作。