I´m making an MVC5 site, as you already know. And now I just created a View using Crete template that has a BirthDate Field. Andit is not showing in IE and shows horibly in Chrome with lots of gliphs inside the textbox as you can compare in the image below.
What is going on and how can I make IE to show a date picker just as easy as Chrome does, and how to clena it up a bit. Those levers I think are useless and confusing.
Here is how I defined that property in my model
[Display(Name = "Fecha de nacimiento")]
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
public DateTime BirthDate { get; set; }
and in the View
<div class="form-group">
@Html.LabelFor(model => model.BirthDate, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.BirthDate)
@Html.ValidationMessageFor(model => model.BirthDate)
</div>
</div>
If you don't like the built in datepicker (which is being rendered by the browser because it is input type="date"), then there are plenty of 3rd party plugins available such as jQuery UI.
One thing you will need to potentially change is instead of using EditorFor
you might need to use TextBoxFor
so the browser just treats it as a normal text box. Below is an example using jQuery UI:
@Html.TextBoxFor(m => m.BirthDate)
<script>
$(function() {
$('#BirthDate').datepicker();
});
Thanks to @Dissmissile I figure it out with bootstrap datepicker but a bit different in my view
@Html.TextBoxFor(model => model.Date, new { @class = "datepicker" })
then I added the next js code to configure format and behaviour
$(document).ready(function () {
$(".datepicker").datepicker({
format: "yyyy/mm/dd",
autoclose: true
});
$(".datepicker").datepicker('setValue', new Date());
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With