Как применять стили для текстового блока Datetime Picker

Question

Привет, в моем проекте мне нужно применить стили для текстового поля, которое будет отображать календарь с помощью JQuery и css. Я использую ASP.Net MVC3 Razor

Вот мой Text Box Код

<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" дата-формат данные = "/ дд/гг мм" значение = "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 */ 
} 

Javascript в главной странице или _layout (если она используется на большем количестве страниц)

$(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" }) 

Другой способ добавить класс может быть с помощью JQuery в document.ready обработчиком

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