Devexpress MVC DateEdit 设置默认的Time

 

当用户没有选择日期的时候, 默认显示当前的时间给TimeEdit. 只有当用户选了日期后, 才会把时间带进去. 

 

效果图:

 

实现

C# Helper Code

        public static Action<DateEditSettings> DevDateTimeEdit(bool ab_Search, string as_Name, DateTime? adt_Date, bool ab_IsEnable, int ai_Width, int ai_Height, string as_DisplayFormatString = "", string as_DropDownEvent = "", string as_CloseUpEvent = "")
        {
            Action<DateEditSettings> DateEditSettings = (DateEditSetting =>
            {
                DateEditSetting.Name = as_Name;
                DateEditSetting.Style.Add("float", "Left");
                DateEditSetting.Date = Convert.ToDateTime(adt_Date);
                DateEditSetting.ControlStyle.Border.BorderColor = System.Drawing.Color.LightGray;
                DateEditSetting.Width = Unit.Percentage(ai_Width);
                if (ab_IsEnable)
                {
                    if (ab_Search)
                    {
                        DateEditSetting.ControlStyle.BackColor = GetColor.WhiteColor;
                    }
                    else
                    {
                        DateEditSetting.ControlStyle.BackColor = GetColor.EditableColor;
                    }
                }
                DateEditSetting.Properties.AllowNull = true;

                DateEditSetting.Properties.ConvertEmptyStringToNull = true;
                DateEditSetting.Properties.NullText = string.Empty;
                DateEditSetting.Height = System.Web.UI.WebControls.Unit.Pixel(ai_Height);
                DateEditSetting.ControlStyle.CssClass = "form-control dx-dropdown";
                DateEditSetting.Properties.EditFormat = EditFormat.Custom;
                DateEditSetting.Properties.EditFormatString = as_DisplayFormatString;
                DateEditSetting.Properties.ClientInstanceName = as_Name;
                DateEditSetting.Enabled = ab_IsEnable;
                DateEditSetting.Properties.NullText = "";
                DateEditSetting.Properties.UseMaskBehavior = true;
                DateEditSetting.Properties.TimeSectionProperties.Visible = true;
                DateEditSetting.Properties.TimeSectionProperties.TimeEditProperties.EditFormat = EditFormat.Custom;
                DateEditSetting.Properties.TimeSectionProperties.ShowHourHand = true;
                DateEditSetting.Properties.TimeSectionProperties.TimeEditProperties.EditFormatString = "HH:mm:ss";
                DateEditSetting.Properties.CalendarProperties.FastNavProperties.EnablePopupAnimation = true;
　　　　　　　　　// 这两个event是关键
                DateEditSetting.Properties.ClientSideEvents.DropDown = as_DropDownEvent;
                DateEditSetting.Properties.ClientSideEvents.CloseUp = as_CloseUpEvent;
            });
            return DateEditSettings;
        }

　　

CardView partial View, 当然你也可以直接在页面里面进行调用helper, 或者把Helper的code写到页面

  settings.Columns.Add(column =>
            {
                column.FieldName = "RecDate";
                column.SetEditItemTemplateContent(Template =>
                {
                    Html.DevExpress().Label(Utils.DevLabel("lbl" + ls_PanelName + "RecDate", "Act. Rec. Date", 20, 34, ":")).Render();
                    Html.DevExpress().DateEdit(Utils.DevDateTimeEdit(false, "dps" + ls_PanelName + "RecDate", DataBinder.Eval(Template.DataItem, "RecDate") as DateTime?, true, 44, 34, Utils.GetFormatString.DateTimeEdit,as_DropDownEvent:"ActRec_DropDown",as_CloseUpEvent:"ActRec_CloseUp")).Render();
                });
            }); //EstRecDate

            settings.EditFormLayoutProperties.Items.Add(i =>
            {
                i.ColumnName = "RecDate";
                i.Width = Unit.Percentage(50);
                i.ShowCaption = DefaultBoolean.False;
                i.ColSpan = 2;
                //i.ClientVisible = false;
            });

　　

Index  Javascript function

    //Display Calendar event.
　　function ActRec_DropDown(s,e)
    {
　　　　//if user have not selected date, then set current time to it.
        if(s.GetValue()==null)
        {
            s.GetTimeEdit().SetValue(new Date())
        }
    }
   //Hide Calendar panel event.
    function ActRec_CloseUp(s,e)
    {
        //Valid if user have not selected date, then set null to DateEdit.  because DateEdit default date is "100/01/01", so we will add the cause. 
        if(s.GetValue()==null||yyyy_MM_dd(s.GetValue(),'/')=="100/01/01")
        {
            s.GetTimeEdit().SetValue(null);
            s.SetValue(null);
        }
    }

function yyyy_MM_dd(ad_Date, as_Delimiter) {
    var ls_Year = ad_Date.getFullYear(),
        ls_Month = ad_Date.getMonth() + 1, // months are zero indexed
        ls_Day = ad_Date.getDate();
    var ls_MonthFormatted = ls_Month < 10 ? "0" + ls_Month : ls_Month,
        ls_DayFormatted = ls_Day < 10 ? "0" + ls_Day : ls_Day;
    return ls_Year.toString() + as_Delimiter + ls_MonthFormatted.toString() + as_Delimiter + ls_DayFormatted.toString();
};