CODEWITHSUNDEEP
razorkendo-grid
karthickj25
karthickj25

Reputation: 1197

Remove time from MVC Razor Kendo Grid date column

How do i restrict the kendo datetime picker to allow only to select date ?

Currently a clock icon appears next to the Date picker, i don't want that.

The fields which ends with date are my date columns.

All the date fields are nullable date column (i.e DateTime?)

Can anyone point me right direction?

Here is my razor :

@(Html.Kendo().Grid(Model.employeedetailsList)
            .Name("DependentGrid")
                   .Columns(columns =>
                   {
                       columns.ForeignKey(p => p.TitleCode, Model.TitleList, "TitleCode", "TitleDescription").Title("Title").Width(130);
                       columns.Bound(p => p.FirstName).Title("First Name");
                       columns.Bound(p => p.MiddleName).Title("Middle Name");
                       columns.Bound(p => p.LastName).Title("Last Name"); ;
                       columns.ForeignKey(p => p.Gender, Model.GenderList, "TitleCode", "TitleDescription").Title("Gender");
                       columns.ForeignKey(p => p.RelCode, Model.RelList, "RelCode", "RelName").Title("Rel");
                       columns.Bound(p => p.DepDOB).Format("{0:dd-MMM-yyyy}").Title("Date of Birth");
                       columns.Bound(p => p.RelStartDate).Format("{0:dd-MMM-yyyy}").Title("Rel Start Date");
                       columns.Bound(p => p.RelEndDate).Format("{0:dd-MMM-yyyy}").Title("Rel End Date");
                       columns.Bound(p => p.EmailAddress).Title("Email");
                       columns.Bound(p => p.DepPassportNumber).Title("Passport Number");
                       columns.Bound(p => p.DepPassportExpDate).Format("{0:dd-MMM-yyyy}").Title("Passport Expiry Date");
                       columns.Bound(p => p.RPNumber);
                       columns.Bound(p => p.RPIssueDate).Format("{0:dd-MMM-yyyy}").Title("RP Issue Date");
                       columns.Bound(p => p.RPExpDate).Format("{0:dd-MMM-yyyy}").Title("RP Expiry Dates");
                   })

                   .Sortable()
                   .Resizable(resize => resize.Columns(true))

                   .DataSource(dataSource => dataSource
                       .Ajax()
                        .Batch(true)
                       .ServerOperation(false)
                       .Model(model =>
                       {
                           model.Id(m => m.DependantDetialId);

                       })
                       .Update(update => update.Action("employeedetails_Update", "Mycontroller")
                 .Data("additionalData"))
                 .Create(create => create.Action("employeedetails_Create", "Mycontroller")
                 .Data("additionalData"))
                 .Destroy(delete => delete.Action("employeedetails_Destroy", "Mycontroller")
             )
                 .Events(e => e.RequestEnd("DependentGrid_onComplete")
                 )
                   )
                   )

Upvotes: 3

Views: 5873

Answers (3)

user4879423
user4879423

Reputation: 11

A la propiedad del modelo tienes que poner una anotación ejemplo:

[UIHint("Date")]// o [DataType(DataType.Date)]
[Display(Name = "Fecha2")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "  {0:MM/dd/yyyy}")]

public DateTime? fecHastaCuentaExenta { get; set; }

Upvotes: 0

vapcguy
vapcguy

Reputation: 7537

This was far easier, for me. If you're using MVC, in your model, you just tell it to use DataType.Date:

[DataType(DataType.Date)]
public DateTime RelStartDate{ get; set; }

You will need using System.ComponentModel.DataAnnotations; at the top of your page to include these tags.

Source: http://www.telerik.com/forums/remove-time-timepicker-from-grid

Upvotes: 4

Ohlin
Ohlin

Reputation: 4178

What I usually do when I only want the date and not the time is to create an Editor Template for that specific field.

Inside your view folder you create a new folder named EditorTemplates. In your case that might be /Views/Employees/EditorTemplates. Inside that folder you create a file named RelStartDate.cshtml which we'll use to display the DatePicker control.

In the new file you add the following lines:

@model DateTime?
@(Html.Kendo().DatePicker()
    .Name("RelStartDate")
    .Value(Model == null ? DateTime.Now.Date : ((DateTime)@Model).Date)
)

To use it you just have to write

columns.Bound(p => p.RelStartDate).EditorTemplateName("EmployeeDate");

Upvotes: 0

Related Questions