如何应用日期时间选取器文本框的样式

Question

你好，在我的项目中，我必须为一个文本框应用样式，该文本框将使用Jquery和css渲染Calender。正在使用 ASP.Net MVC3 剃须刀

这是我的文本框代码

<div class="col-lg-10" >@Html.EditorFor(model => model.DateOfBirth, new { @class = "form-control"  })

与脚本绑定的"我的模板"文本框

<input class="form-control" type="text" id="dp1" data-date-format="mm/dd/yy" value="02/16/12"></div>

我的问题是如何为上面的文本框应用以下样式

类型="文本" id="dp1" 数据日期格式="mm/dd/yy" 值="02/16/12"

脚本代码

/*==DATE PICKER==*/
             $('#dp1').datepicker({
                 format: 'mm-dd-yyyy'
             });
             $('#dp2').datepicker();
             $('#dpYears').datepicker();
             $('#dpMonths').datepicker();
         });

Answer 1

您可以为此创建自己的编辑器模板，并在需要的地方重复使用。

 @Html.EditorFor(m => m.DateOfBirth, "DatePicker")

然后Views/Shared/EditorTemplates/DatePicker.cshtml文件写下面

@model DateTime?
@{
    String modelValue = "";

    if (Model.HasValue)
    {
        if (Model.Value != DateTime.MinValue)
        {
            modelValue = Model.Value.ToShortDateString();
        }
    }
}
    @Html.TextBox("", modelValue, new { @class = 'my-date-picker'})

然后你的 CSS

.my-date-picker
{ 
  /* your styles */
}

主页或_layout中的Javascript（如果它在更多页面上使用）

$(document).ready(function(){
$('.my-date-picker').datepicker();
});

Answer 2

您无法

为EditorFor设置类

改变

@Html.EditorFor(model => model.DateOfBirth, new { @class = "form-control"  })

自

@Html.TextBoxFor(model => model.DateOfBirth, new { @class = "form-control"  })

添加类的其他方法可以在document.ready处理程序中使用jquery

$('#dp1').addClass('form-control');