0

I am trying to learn more about HTML5 dates. I have added the following code to an MVC Core 2.1 view:

<label asp-for="DOB" class="control-label"></label>

@{ 
    var minDate = DateTime.Now.AddYears(-99).Date;
    var maxDate = DateTime.Now.AddYears(-18).Date;
    var defaultDate = DateTime.Now.AddYears(-25).Date;
}

<input asp-for="DOB" class="datefield" type="date" min=@minDate max=@maxDate value=@defaultDate/>
<span asp-validation-for="DOB" class="text-danger"></span>

The HTML rendered looks like this:

<input class="datefield" type="date" min="23/10/1919 00:00:00" max="23/10/2000 00:00:00" value="23/10/1993 00:00:00" data-val="true" data-val-required="The DOB field is required." id="DOB" name="DOB" />

I have a few questions:

1) The default value of the date does not appear i.e. it says: dd/mm/yy. If I change my MVC code to this then it does work:

<input asp-for="DOB" class="datefield" type="date" min=@minDate max=@maxDate value="1900-01-01"/>

Why is it not accepting the variable specifically for the default value?

2) Are there any implications of changing the class to: datefield (from: form-control) in the MVC view.

3) Is it possible to specify a default date for the calendar, without the value appearing in the input field?

Tommy
  • 2,355
  • 1
  • 19
  • 48
w0051977
  • 15,099
  • 32
  • 152
  • 329

1 Answers1

2

Setting a value of date-input must be in yyyy-mm-dd format. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Value

AlbertVanHalen
  • 632
  • 4
  • 12
  • Thanks. Are you able to answer point three before I mark your answer? – w0051977 Oct 23 '18 at 14:26
  • https://stackoverflow.com/questions/6982692/html5-input-type-date-default-value-to-today – AlbertVanHalen Oct 23 '18 at 15:04
  • Could you explain how that link answers my question? – w0051977 Oct 23 '18 at 15:05
  • Note that I just want the calendar to prompt a certain date to start with i.e. the input textbox should not be populated. – w0051977 Oct 23 '18 at 15:12
  • I did some research but there is no default value property which behaves that way afaik – AlbertVanHalen Oct 23 '18 at 16:48
  • Thanks. What is the standard way to approach a Date of birth field? Would you put a default value in. My app is finance related and means users have to be 18+. Firefox opens the calendar at October 2018 meaning you have to scroll way back. I could add a default date, which is 18 years ago or maybe 17 years ago - so there is a validation error meaning the user has to consciously change it. What do you think? Thanks. – w0051977 Oct 23 '18 at 17:10
  • There is no way to specify a start date for the calendar if you're relying on the built-in browser control. While the native experience is generally better for the user, especially on mobile, it's not very configurable. If you want more control over the calendar, as usual, you should employ a JavaScript datepicker library in lieu of the browser control. – Chris Pratt Oct 24 '18 at 13:04
  • @Chris Pratt, thanks. I use Modernizr to detect if the browser supports HTML5 and then display Datepicker if it does not. Is it "standard practice" just to accept that Firefox starts at the current date or is there a workaround (when using a DOB field)? – w0051977 Oct 24 '18 at 15:02
  • @w0051977 The problem is that every browser handles date inputs differently. Using a library you will be assured it works the same everywhere. Specifying the max attribute works perfectly in Chrome. Expanding the datepicker defaults to the maximum available date. – AlbertVanHalen Oct 24 '18 at 17:09
  • @AlbertVanHalen, what is the standard way of approaching a Dob field? Should I be using a modernizr datepicker regardless of whether the browser supports html5? Thanks. – w0051977 Oct 24 '18 at 19:29
  • @w0051977 There is no standard way... I personally hate javascript datepickers on mobile devices because of the virtual keyboard still present and therefore not showing the generated html for the calendar in full. Native datepicker on iOS for example is perfect imo. Implementation (if supported) is different accross browsers which sucks imo too! I usually use 3 different select boxes: for day, month and year... – AlbertVanHalen Oct 25 '18 at 08:29
  • @AlbertVanHalen, thanks. Do you know of any open source (preferably .NET Core MVC projects) that use three field datepickers? I would like to have a look. +1 for the three field suggestion. – w0051977 Oct 30 '18 at 16:18