Mobile UI Form Elements > Text Input Elements > DateTime Input |
There are two DateTime type input elements on the form: the Date Created element and the Done element. If you created these two elements in a regular jQuery Mobile application, the markup would resemble the following:
<div data-role="fieldcontain">
<label for="datetime">Datetime:</label>
<input type="datetime" name="datetime" id="datetime" value="" />
</div>
In the MVC Mobile Application, the markup and Razor syntax resembles the following sample:
<li data-role="fieldcontain">
@Html.LabelFor(model => model.CreatedAt)
@Html.EditorFor(model => model.CreatedAt)
@Html.ValidationMessageFor(model => model.CreatedAt)
</li>
When combined with the code in the TahDoList Model, this element is specified as a DateTime input element:
[Display(Name = "Date Created")]
public DateTime? CreatedAt { get; set; }
This creates a DateTime input element that resembles the following image:
If you try to enter anything other than a date in this field, you'll see the following Validation Error message: