Dates in custom

[David Rhodes]

 

Hi,

I'm using a custom template for popup editing in my Grid, eg

.Editable(editable =>
{
    editable.Mode(GridEditMode.PopUp);
    editable.TemplateName("/Areas/RiskProfile/Views/Shared/ClinicalGapEditor.cshtml");
})

 

In "ClinicalGapEditor.cshtml" i'm binding to a view model and have some date field

[Required(ErrorMessage = Messages.Generic)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
[DataType(DataType.Date)]
public DateTime? To { get; set; }

 

I want the date to be entered in dd/MM/yyyy format but when I enter the date and tab out of the field it is automatically change to a long date, such as "Tue Dec 12 2000 00:00:00 GMT+0000 (Greenwich Mean Time)".

How do I fix this?

 

 

 

 

 

 

 

[Alex Hajigeorgieva]

Hi, David,

The default editor for Date types is a Kendo UI DatePicker for ASP.NET Core, however, in the case of a custom popup, I am not sure what is being used.

Can you share the ClinicalGapEditor.cshtml and specifically the DateTime? To field editor?

As a general recommendation, the Kendo UI DatePicker for ASP.NET Core has a Format() method which can be used to change the date format.

Finally, in case the dates do not have a format in the grid column, then use the columns Format() option.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[David Rhodes]

Hi Alex,

I'm just using a textbox, not a datepicker

@model Web.Areas.RiskProfile.Models.IndemnityGapViewModel

<div class="form">

    <div class="form-group">
        <label asp-for="From" class="col-md-12 control-label mandatory"></label>
        <input asp-for="From" type="text" class="form-control mask-date" />
    </div>

    <div class="form-group">
        <label asp-for="To" class="col-md-12 control-label mandatory"></label>
        <input asp-for="To" type="text" class="form-control mask-date" />
    </div>

    <div class="form-group">
        <label asp-for="Reason" class="col-md-12 control-label mandatory"></label>
        <textarea asp-for="Reason" class="form-control" rows="5"></textarea>
    </div>

</div>

 

 

 

[Viktor Tachev]

Hello David,

When regular text input elements are used as editors they would not have any format. Showing a Date in them will display the string representation of that date. 

If you would like to have the date formatted I would suggest changing the type attribute to date. This way the date will be formatted based on the client locale. If you would like more information on input elements of type date you would find the article below interesting.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

With that said, if you would like to use specific format that is not the same as the client locale you can consider the Kendo DateInput component. Check out the resources below that show how it can be used with Razor syntax or as TagHelper:

• https://docs.telerik.com/aspnet-core/html-helpers/editors/dateinput/overview
• https://docs.telerik.com/aspnet-core/tag-helpers/editors/dateinput/overview

Regards,
Viktor Tachev
Progress Telerik

[David Rhodes]

We can't use the date as we need to support older browsers.

So you ignore the Model DisplayFormat Attributes?

In a normal View this works fine

[Display(Name = "From")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
[DataType(DataType.Date)]
public DateTime? From { get; set; }

[Viktor Tachev]

Hello David,

The textbox editor is designed for editing string fields. In order to ensure that the value is entered in a specific format and to enforce the users to use that format I suggest using the DateInput editor. There is also TagHelper for it that you can use in .NET Core applications. The component is from the Kendo suite so it can be used in all browsers supported by Kendo.

For your convenience I have prepared a sample where the approach is implemented. Give it a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[David Rhodes]

Thanks but the DateInput control isn't very usable, we want the user to enter ddMMyyyy using the keyboard in one go, DateInput does not allow that.

We're using a mask on the textbox. I've had to change the model to string and add a custom validator to ensure a valid date is entered

[Display(Name = "From")]
[DateValid]
[DateInPast]
public string From { get; set; }

 

I'd still like to know why, when using the kendo edit popup, the DisplayFormat Attributes are being ignored when the Model is set to a Date. This works fine on a normal cshtml view.

 

[Viktor Tachev]

Hi David,

The reason behind this behavior is that when the input is placed directly on the page the value is formatted on the server and then returned. When using popup editor the value attribute for the input element is empty. It is populated with the relevant data when the users click the Edit button. Since this process happens on the client the JavaScript Date object for the field is used to set the value. The Date object is stringified because it is shown in a text input element. 

With that said, using a string to represent can cause unwanted results. More specifically when sorting or filtering the column. Since the underlying field will be string the values will not be sorted in chronological order.

If you would like to enable the user to use "ddMMyyyy" format for entering dates in the popup editor you can consider using DatePicker as editor and removing its calendar icon with a bit of CSS. The custom format can be added to the DatePicker via the ParseFormats option. This way the underlying value will be Date and can be sorted/filtered as expected.

The custom editor would look similar to this:

<div class="form-group">
    <label asp-for="ProductionDate"></label>

    @(Html.Kendo().DatePickerFor(m=>m.ProductionDate)
        .ParseFormats(new string[] {"ddMMyyyy" }))

</div>

The CSS for removing the calendar icon in the popup editor:

<style>
    .k-edit-form-container .k-datepicker .k-select {
        display: none;
    }

    .k-edit-form-container .k-datepicker .k-picker-wrap {
        padding: 0;
    }

    .k-edit-form-container .k-datepicker .k-input {
        border-radius: 3px;
    }
</style>

For your convenience I am attaching the modified project. Give it a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik