I'm new to razor and .net, i have a page on an ASP Net Razor project where i popup a modal with a form inside. Inside the form there is a datepicker and i want to set the system date when the page loads and evenly keep it editable.
i've already tried with
#{ string dateNow = DateTime.Now.ToString("dd MM yyyy"); }
<input asp-for="intervento.Data" class="form-control" type="date" value="#dateNow" />
it retrieves the correct date but can't display it. how can i solve this?
Your date should be in the following format yyyy-MM-dd.
So it would look like this:
<input type="date" value="2020-10-23">
Presumably, Intervento.Data is a DateTime property of your PageModel? If so, you should add a DataType attribute to specify that it represents a date, not a time:
[DataType(DataType.Date)]
public DateTime Data { get; set; }
Then you don't need to specify the type on the input. The tag helper will generate the correct value based on the attribute. Also, if you set a default value on the property:
[DataType(DataType.Date)]
public DateTime Data { get; set; } = DateTime.Now;
you won't need to set the value of the input either. ASP.NET will take care of formatting the value correctly to an ISO 8601 format that the input can work with. So the following will suffice:
<input asp-for="intervento.Data" class="form-control" />
Related
I have a DateTime property in my model decorated as
[Display(Name = "Valid From")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd-MMM-yyyy}", ApplyFormatInEditMode = true)]
public DateTime ValidFrom { get; set; }
When I am using it in html's table's td its format is rendering correctly. This is how I am using it when it renders correctly - #Html.DisplayFor(modelItem => item.ValidFrom)
Its not working in edit/create mode. This is how it created in view by default by scaffolding
<input asp-for="ValidFrom" class="form-control" />
When edit/create form loads it has
Tried by specifying explicit date format but not working
<input asp-for="ValidFrom" class="form-control" data-date-format="dd-MMM-yyyy" />
This is how it renders on the form. Can you please guide what actually missing. Also, how can I set date format of date picker control to dd-MMM-yyyy?
<input asp-for="ValidFrom" class="form-control" />
By using above code, it will generate a <input type= "date" /> element, by default the date format is "mm/dd/yyyy". To change the date format, you could try to change the date type to text type, like this:
<input asp-for="ValidFrom" class="form-control" data-date-format="dd-MMM-yyyy" type="text" placeholder="dd-MMM-yyyy" />
Then, the output as below:
Then, when you change the date, you could use Bootstrap-datepicker or JQuery UI datepicker to select date and change the date format.
[Note] If you are using both Bootstrap and JQuery UI, you might meet the JQuery conflict error, here is a similar thread, you could check it.
It looks like you are not specifying the type on your input
Your date format looks incorrect
I have found issues using asp-for with DateTime model properties (although these may work with string values)
Here is what I have been using in MVC Core 3. Hopefully this will be of help
<input type="date" value="#Model.DateTo.ToHtmlInputDate()" asp-for="DateTo" min="#Model.EarliestDate.ToHtmlInputDate()" max="#Model.LatestDate.ToHtmlInputDate()" onchange="$('form').submit();" class="form-control">
Here is my static helper to extend DateTime
public static string ToHtmlInputDate(this DateTime d)
{
return d.ToString("yyyy-MM-dd");
}
By setting false to the DisplayFormat attribute, I could have it to work in .net 6 and .net 5 MVC
[DataType(DataType.Date)]
[Display(Name = "Date saisine")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = false)]
public DateTime? Birth {get; set;}
Out side an EditForm I want to use a input type="time" as the following code shows:
<input type="time" class="form-control" id="sTime" #bind="#StartTime">
the Bound Property should be a DateTime variable otherwise it does not allow, As this code shows:
DateTime StartTime { get; set; } = DateTime.Now;
private async Task AddingVisit()
{
...
VisitStart = startDate.Date + TimeSpan.Parse(StartTime.ToShortTimeString());
...
}
But when the code in the method reaches to the point that uses StartTime property, It jumps out from code to HTML and begins doing some works and then does not come back to execute the remaining code, Why this happens and how to solve this?
Strangely, Removing TimeSpan.Parse Solved the problem:
DateTime VisitStart = startDate.Date + StartTime.Value.TimeOfDay;
The execution now is normal, and does not jump to Html.
How can I set date picket format in dd/mm/yyyy
I have used this format in the model. But input type is not showing like The model that I have created.
[Display(Name = "Dredger Time")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}",
ApplyFormatInEditMode = true)]
public DateTime DredgingTime { get; set; }
I want its functionality in ASP.
I've tried some jQuery method, but none of them working.
<div class="form-group">
<label asp-for="DredgingTime" class="control-label"></label>
<input id="datepicker" asp-for="DredgingTime" class="form-control" />
<span asp-validation-for="DredgingTime" class="text-danger"></span>
</div>
Another help, I don't understant where "asp-for" these sort of functionality works... I'm new to ASP, Its not as simple as PHP
When you apply the the [DataType(DataType.Date)] attribute, Razor renders the input with a type of "date". This is an HTML 5 input type, and in all modern browsers, will be rendered as a browser control (the calendar you get by default). However, the browser control also forces two things:
The date will be displayed localized (i.e. MM/DD/YYYY in the U.S.)
The value will be set as ISO (YYYY-MM-DD) and must be provided as ISO. A value set not in ISO format will be treated as null, and no date will be set.
These are actually good things, though. The date should be display localized, and you should be working with ISO dates going back and forth from the server. However, if you are totally against that for some reason, then you cannot use this browser control. The only way around that is to specifically set the type as text:
<input id="datepicker" asp-for="DredgingTime" type="text" class="form-control" />
Then, the input will be rendered as a plain text field, and whatever format you've set will apply. However, you'll also now be discarding all built-in validation of the date. It's just plain text, now, so the user could put anything in there. As such, you should employ a JS library of some sort to ensure both that it's a valid date and in the format that you expect.
Set format of datepicker in your JQuery like below :
#section Scripts
{
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").datepicker({
format: 'dd/mm/yyyy'
})
});
</script>
}
Result :
I am building a dropdownlist using the answer here: SelectListItem with data-attributes. This will allow me to add a different class and data annotations to different <option>'s
However I am struggling with building the <select> initially. I have
<select name="#Html.NameFor(a=>a.ValueType)"
id="#Html.IdFor(a=>a.ValueType)">
</select>
My ViewModel looks like
[Required(ErrorMessage = "Value Type is required")]
public string ValueType { get; set; }
How do I get the Required annotation validation into the view?
The final html in the browser should look like:
<select id="ValueType" name="ValueType" data-val-required="Value Type is required" data-val="true"></select>
but I currently have:
<select id="ValueType" name="ValueType"></select>
Is there a #Html method to get these data-val from the ViewModel attributes or how do i do this? Do I have to hard-code it?
I have the following model property
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:d/M/yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Date of Screening")]
public DateTime? ScreeningDate { get; set; }
and the following view:
#Html.TextBoxFor(model => model.ScreeningDate, new { #class="date maintainState" })
and yet I get this markup for the textbox:
<input value="18/06/2013 12:00:00 AM" class="date maintainState" ... type="text" />
I want the value to be 18/06/2013
It works when I apply #Html.EditorFor, but I need control over the class attribute. What am I doing wrong? Thank you very much.
It works when I apply #Html.EditorFor, but I need control over the
class attribute. What am I doing wrong?
Nothing, it's how things work. Only the EditorFor and DisplayFor helpers respect the [DisplayFormat] attribute.
I understand that you are using TextBoxFor because you want to apply a custom class to the field which is what the EditorFor doesn't allow you to. But that's not true. All that the EditorFor helper does is to render the corresponding editor template. And if you do not have a custom template it renders the default one.
So what?
Well, you write a custom editor template for the DateTime type that will behave as you want. Just like that in ~/Views/Shared/EditorTemplates/DateTime.cshtml:
#Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, ViewData)
And then simply:
#Html.EditorFor(model => model.ScreeningDate, new { #class="date maintainState" })
Now killed 2 rabbits with one bullet:
We applied the desired format
We applied the desired class to the input field
And if you wanna kill a third rabbit and be able to validate this custom format when the form is submitted back (because remember that the default model binder doesn't care much about this [DisplayFormat] attribute) you could write a custom model binder that will respect the [DisplayFormat] attribute, just as I explained here: https://stackoverflow.com/a/7836093/29407