CODEWITHSUNDEEP
jquerycssasp.net-mvcasp.net-mvc-3razor
Nidheesh
Nidheesh

Reputation: 426

How to apply styles for a Datetime Picker Text Box

Hello in my project i have to apply styles for a textbox which will render Calender using Jquery and css. Am using ASP.Net MVC3 Razor

Here is my Text Box Code

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

My Template Text box which is binded with a script

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

My question is how to apply the below styles for the above text box

type="text" id="dp1" data-date-format="mm/dd/yy" value="02/16/12"

Script Code

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

Upvotes: 0

Views: 1454

Answers (2)

Murali Murugesan
Murali Murugesan

Reputation: 22619

You could simply create your own editor template for this and reuse wherever you are required.

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

Then Views/Shared/EditorTemplates/DatePicker.cshtml file write the below

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


    if (Model.HasValue)
    {
        if (Model.Value != DateTime.MinValue)
        {
            modelValue = Model.Value.ToShortDateString();
        }
    }
}

    @Html.TextBox("", modelValue, new { @class = 'my-date-picker'})

Then your CSS

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

Javascript in a main page or _layout(if it is used across more pages)

$(document).ready(function(){

$('.my-date-picker').datepicker();

});

Upvotes: 1

Nitin Varpe
Nitin Varpe

Reputation: 10694

You can't set class for the EditorFor

Change 

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

To 

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

Other way to add class can be using jquery in document.ready handler

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

Upvotes: 0

Related Questions