1

I'm searching for the correct way to display a TextBox which allows the user to edit a datetime value.

Currently I can display the value as I want by using DataAnnotations.

[DisplayFormat(DataFormatString = "{0:{0:HH:mm:ss dd/MM/yyyy}}", ApplyFormatInEditMode = true)]
public DateTime TimeStamp_Start { get; set; }

MVC/Razor:

@Html.EditorFor(m => m.TimeStamp_Start)

And then I get the right visual effect:

Visual representation

But the problem now is that this is editable to a wrong format, as follows:

Visual representation of when it goes wrong when editing

How can i create a @Html.EditorFor object that show the date as in the first picture, but when editing only allows to fill in this format: {xx/xx/xxxx xx:xx:xx}?

I want the '/', ':' and ' ' (Space) values of the date format to stay put and the text the user types to fill in the gaps. I've seen it on other websites but can't seem to find the MVC/Razor code for it.

Improve this question
4
  • You need to use a jquery datetime plugin, or render the browsers HTML-5 datetimepicker (which is only supported in some browsers) Commented Apr 6, 2018 at 11:19
  • @StephenMuecke The datetimepickers from jquery require to much work to get right, plus it doesn't fit with the design of the website. So this way I want to make a simple and fast way of using it. Commented Apr 6, 2018 at 11:56
  • Adding a script and one line of code is too much work? You have no control over what the user enters in a textbox (at least not with out javascript), but you can always always use mvc's built in client side validation to validate the format Commented Apr 6, 2018 at 12:00
  • Yes but i've looked up how to add also the time variant to a datepicker and the whole default makes it look ugly and doesn't fit in the website's design. I've seen it a 1000 times with a predefined fixed format and I would like to implement that solution. I'm gone see if I can write it myself in javascript to create such a fixed solution. Commented Apr 6, 2018 at 12:08

1 Answer 1

Reset to default
1

Please remove the data annotation and use this in cshtml

 @Html.TextBoxFor(x => x.TimeStamp_Start, new { type="date" })

that render html5 input type. you can use datetime-local to get the user machine time.

check html input type from here https://www.w3schools.com/html/html_form_input_types.asp

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

When I remove the dataannotation and change the value to your suggestion (I used "datetime" because the value has a time value and otherwise MVC doesn't display it). But still i can edit the field and the forward slashes and ':' won't stay in there place.
forget my solution; use yours and try to edit by jquery datetime picker. keep me updated i can solve it in the next 2 days.
I'm currently using the following way, this way the browser warns about wrong input. It's still not completely what I want but it prevents some user mistakes. @Html.TextBoxFor(m => m.TimeStamp_Start, , "{0:dd/MM/yyyy HH:mm:ss}", new { pattern = @"[0-3][0-9]\/[0-1][0-9]\/[0-9]{4} [0-1][0-9]:[0-5][0-9]:[0-5][0-9]" })
Nice approach, did you try jquery datetime picker?
Yes, but i find it very uneasy to use. Plus it's not easily adjusted to the design of my website.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.