How to format DateTimeOffset in Html.TextBoxFor? - c#

I have a view built on Bootstrap 3 and ASP.NET MVC 5 for editing user profile information, but it displays in the incorrect format on the form.
The database is Neo4j and I'm using Neo4jClient to interact with the database from .NET. Neo4jClient requires the use of DateTimeOffset objects instead of DateTime objects to use Json.NET's serializer for passing to Neo4j's REST interface. Therefore, my model uses a DateTimeOffset object to store the birthday for a user.
Here is my form field in my view:
<div class="form-group">
<label class="col-md-4 control-label" for="Birthday">Birthday</label>
<div class="col-md-4">
#Html.TextBoxFor(model => model.Birthday, new { #class = "form-control input-md datepicker", placeholder = "Birthday" })
<span class="help-block">Please enter your birthday</span>
</div>
</div>
The date has the following format when printed to the form:
M/dd/yyyy hh:mm:ss t -zzz
However, it should have this format since we just need the date part:
MM/dd/yyyy
I have tried using the DataFormatString annotation on the model property, but it still doesn't display in the correct format:
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
public DateTimeOffset Birthday { get; set; }
Does this annotation still apply for DateTimeOffset objects? How do I fix the string formatting?

Answered here: https://stackoverflow.com/a/6140014/211747
Summary: TextBoxFor doesn't respect DataFormatString, you need to use EditorFor, but that doesn't support custom HTML attributes, so you need an editor template (Views\Shared\EditorTemplates\DateTimeOffset.cshtml).

Related

Nullable Datetime in .NET CORE MVC

I have a view which is used for "Create" and "Update" a database model. The database model has a property which is a DateTime? (nullable). Now I am trying to use this nullable datetime in an ASP.NET Core MVC view which looks like the following:
#Html.TextBoxFor(model => model.MyNullableDate,"{0:dd.MM.yyyy}", new { placeholder = "dd.MM.yyyy", #class = "form-control form-control-sm", type = "date" })
This works very well for the "Create" process. If a date is set, it is written correctly into the database. But now I want to update the already existing database value model.MyNullableDate.
I read the value from the database and pass the value again to the view. The property MyNullableDate is set correctly and I saw in the debugger that the correct date is written into it.
But in the view, nothing is shown... it's only an empty textbox without the passed in value of MyNullableDate.
The property looks like this:
[DisplayFormat(DataFormatString = "{0:dd.MM.yyyy}")]
[DataType(DataType.Date)]
public DateTime? MyNullableDate{ get; set; }
What am I doing wrong? How can I show the value of MyNullableDate in the TextBoxFor?
This is related to the date format rather than the nullability.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
The displayed date format will differ from the actual value — the
displayed date is formatted based on the locale of the user's browser,
but the parsed value is always formatted yyyy-mm-dd.
When I passed the format as below, the date displayed :)
#Html.TextBoxFor(
expression: model => model.MyNullableDate,
format: "{0:yyyy-MM-dd}",
htmlAttributes: new
{
placeholder = "dd.MM.yyyy",
#class = "form-control form-control-sm",
type = "date"
})

Why storing the date like dd-MMM-yyyy is getting converted to dd-MM-yyyy?

I have a very different kind of problem.
I have deployed my mvc application to live server.
It has date time format like this '01/07/2019'.
I have a textbox which is populated from jquery datetimepicker. It populates like this 27/Jul/2019 but in sql table it stores like 2019-07-17 00:00:00.000
and after binding the data from database to textboxfor, it appears like this 27-07-2019.
And upon saving it throws error for all the dates that are greater than 12 as a day e.g. 13/07/2019 but for 13/Jul/2019 it works good.
how to tackle this?
#Html.EditorFor(model => model.InspectionReport.InspectionDate, new { htmlAttributes = new { #class = "form-control input-sm pull-right text-box single-line" } })
jquery:
$("#InspectionReport_InspectionDate").datepicker({ dateFormat: 'dd/M/yy' });
class:
[Required]
[Display(Name = "Inspection Date")]
[DisplayFormat(DataFormatString = "{0: dd-MMM-yyyy}")]
public DateTime InspectionDate { get; set; }
In a date field of data type DateTime(2), a date value is stored as a value with no format.
Thus, to display the value, apply the format you wish, or a default format will be applied.
Try this,
#Html.TextBoxFor(model => model.InspectionReport.InspectionDate, "{0:dd-MMM-yyyy}", htmlAttributes: new { #type="date" })

How to handle invalid date in mvc

I have a textbox for date of birth on the index page. I have to validate user to enter complete date format(mm/dd/yyyy), but its allowing to post 03/12(mm/dd) without year and in c# side it converted to 03/12/2015.
My requirement is to validate user to enter complete date format.
I used data annotation but that also not handling (mm/dd) as invalid date.
#Html.TextBoxFor(m => m.Search.DOB, new { #class = "form-control datepicker" })
Maybe you could use regular expression in javascript,
when fucusout event be triggered!
or solve the problem by following
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")]
public DateTime StartDate { get; set; }
You can use the html5 form validation it works without javascript.
For example:
<input type="text"
name="DOB"
placeholder="MM/dd/yyyy"
title="MM/dd/yyyy"
required
pattern="^([1-9]|1[0-2])/([1-9]|1[0-9]|2[0-9]|3[0-1])/\d{4}$" />

auto-mapping of element in view to model from type dateTime

I have value of text box with some date time format (the default that DatePicker supplies - for example - 01/23/2014).
<input type="text" name="OrderDate" value="" id="OrderDate" class="datepicker field field119 datepicker-init" />
I have correlative Property in the model class with the same name and ID as the element in the view.
public DateTime OrderDate { get; set; }
at this point everything is matched and once submit I get the right value in my controller.
Now - I'd like to change the default DatePicker format -
for example:
$(".datepicker").datepicker({
minDate: 0,
dateFormat: 'dd/mm/yy'
});
and I fail to "explain" the model proprty how to serlizae the text box value - instead I get the default DateTime and not my time.
the question : how to change the text box date format that the DateTime property will know how to serialize that?
Ok, here is how you get this working.
Firstly jQuery UI formats the date you need using dd/mm/y, so you need to change your javascript to this:
$(".datepicker").datepicker({
minDate: 0,
dateFormat: 'dd/mm/y'
});
See jsFiddle here:
http://jsfiddle.net/hutchonoid/Fa8Xx/1376/
Then you need to format the model date in the view, you can do this like so:
#Html.TextBoxFor(m => m.OrderDate, String.Format("{0:dd/M/yy}", Model.OrderDate),
new { #class = "datepicker field field119 datepicker-init" })
This works nicely with model binding to when posting the date back to the server.

EditorTemplate and DateTimeOffset not working in MVC4

I am using an EditorTemplate for a DateTimeOffset field that consists of...
#model DateTimeOffset?
#Html.TextBox("", String.Format("{0:u}", Model.HasValue ? Model : DateTimeOffset.UtcNow), new { #class = "datepicker" })
This works in 90% of my forms, I get values like 2012-07-31 11:30:09Z. However, I have one form that will not apply any formatting. The HTML output of the working input field and the non-working input field are the same.
Working...
<input class="datepicker hasDatepicker" data-val="true" data-val-required="&#39;Launch Time&#39; must not be empty." id="LaunchTime" name="LaunchTime" type="text" value="2012-07-31 11:30:09Z">
Non-working...
<input class="datepicker hasDatepicker" data-val="true" data-val-required="&#39;Launch Time&#39; must not be empty." id="LaunchTime" name="LaunchTime" type="text" value="07/31/2012 11:30:09 +00:00">
The only thing that I have found that fixes the problem is to change the TextBox name field...
#Html.TextBox("asdf", String.Format("{0:u}", Model.HasValue ? Model : DateTimeOffset.UtcNow), new { #class = "datepicker" })
However, this then changes my input field to...
<input class="datepicker hasDatepicker" id="LaunchTime_asdf" name="LaunchTime.asdf" type="text" value="2012-07-31 11:30:09Z">
which will then break the form submission, and removes the validation rules.
The model...
[DisplayFormat(DataFormatString = "{0:u}" , ApplyFormatInEditMode = true)]
public DateTimeOffset LaunchTime { get; set; }
The problem is that the only format that seems to work for the datetime value is yyyy-mm-dd. /s do not work.

Categories