I have a DateTime field in my model in a .Net MVC4 application. I would like the Edit view to display the date value, while presenting the user an option of using a calendar control.
Adding attribute [DisplayFormat(DataFormatString = "{0:d}",ApplyFormatInEditMode = true)] shows the user the current value as a text field:
Adding [DataType(DataType.Date)] shows "mm/dd/yyyy" and hides the current value:
and provides a nice calendar widget when selecting the down arrow:
Is there a way to combine this functionality, so the user can see the current selected date and the calendar widget?
Update
This is browser behavior. The markup produced by the control contains the current date value:
<input class="text-box single-line" data-val="true" data-val-date="The field Dining Date must be a date." data-val-required="The Dining Date field is required." id="DiningDate" name="DiningDate" type="date" value="2/15/2013">
IE9 renders this markup by showing the date without the widget, whereas Chrome hides the date.
IE9 renders this markup by showing the date without the widget
IE9 doesn't support the date input at all, so you can forget about any widgets in this web browser. Not even IE10 supports it :-) Please take a look at the following article to see the web browsers that support the HTML5 date input. All other browsers that don't support it will simply display a standard textbox without any datetime picker widget.
whereas Chrome hides the date.
The HTML specification states that the value attribute of a date input field must use the RFC 3339 format in order for this default value to be shown:
<input id="Date" name="Date" type="date" value="2013-02-17" />
If the value uses a different format then this default value won't be shown.
So make sure you respect the specification if you don't want to get undefined behavior:
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
and then you're gonna get the expected result:
Related
The currency formatter is not working in ASP.Net MVC. The input field in the UI is showing a blank in the field when there is a value of 100.00 in the Model.ClientLicense.Rate variable.
FYI - Model.ClientLicense.Rate is a decimal value
Here is the razor code
<input name="Rate" type="number" class="form-control" value=#(string.Format("{0:C}", Model.ClientLicense.Rate) ) >
solution - changed type="number" to "text"
can you try this, I always use it when i need to show currency format hope it works to you.
#(String.Format(System.Globalization.CultureInfo.CurrentCulture, "{0:C2}", Convert.ToDouble(Model.ClientLicense.Rate)))
also I think the type attribute of the input might affect, try changing the type to text
I have a page which has some input type="text" with a jQuery UI datepicker attached, which enters the date in the format "14 Feb 2012" into the field. Great. Now I need to adapt the interface for mobile/small screen. I am having the issue that when an iPhone user taps in the text input, the jQuery datepicker appears, and iOS also shows it's native text input keypad.
I tried using Modernizr to detect for html5 inputtype=date availability and disabling the jQuery datepicker if it's available and switching the input type to "date" so devices which understand this can use their native input. However, this enters the date on the format "2012-02-14" which the back end system does not understand. A lot of work has been done depending on the date arriving in the format "14 Feb 2012".
So if anyone can help, I'm looking for a way to get ONLY the jQuery UI datepicker to appear on all systems, or for a solution which means native date/text inputs can be forced to enter the format "14 Feb 2012".
Unfortunately, the datepicker format can't be overridden due to it being tied to the user's system settings.
What you could do though in fact is have your script do the dynamic switch from type="text" to type="date" based on available technology (e.g. Modernizr.inputtypes.date).
From there you could embed a hidden field and transition the name of the current date field to that hidden field and then parse the date format from the native datepicker into your desired format and set that value of the hidden field.
<input type="date" name="userSetDate"/>
to this:
<input type="date"/>
<input type="hidden" name="userSetDate" value="mm/dd/yyyy"/>
The difficulty would then be parsing the user defined format into your desired format because of the format variations:
10-06-13 --> is that October 6th 2013 or June 10th 2013 ?
Now you could do something that incorproates the top solution with something like styling a label to look like a button, apply an accurate [for] attribute and have the datepicker field be a type="hidden" and apply the datepicker to that.
<label for="fooDate">test</label>
<input type="hidden" name="fooDate" id="fooDate">
<script>
$('#fooDate').datepicker();
</script>
Hope you're (were, noticed the date this was posted) able to figure out!
We're working on a .NET MVC mobile site. I understand that on the iPhone, mobile safari will display a datepicker for the following input field:
<input type="date"/>
We have a standard date picker helper which spits out date picker options for various platforms. In this case we detect mobile safari and then write out an input field that is bound to our model:
<input name="StartDate" value="2008/12/21" type="date"/>
The problem is that the value portion is not shown on load. We can enter in new values, and save them back to our database. But then when we reload the page those values don't show up in the fields. If we save again, our values are all set back to null in the db.
I noticed that when you select a date with the wheels on the iPhone, the value of the text field ends up in the format similar to "Apr 6, 2012" where as I'd expect it to show 2012/04/06 or 04/06/2012.
My guess is that the mobile safari displays a different attribute of the field, and then sets the value attribute appropriately behind the scenes.
Does anyone know what's going on with this? Thanks!
AFAIK the date must be RFC3339 compliant. Have you tried 2008-12-21 (dashed instead of slashes)?
<input type="date" value"yyyy-MM-dd" />
I'm using a jQueryUI datepicker for a simple "From" & "To" date range filter in my ASP.Net MVC web-app. Works fine until I hit a machine which had its datetime format (in the Regional Settings) set to "dd-MM-yy".
In my controller I've a postback action which accepts a custom search object as a parameter which is then passed to the search function. This custom object has the properties for "To" & "From" dates and as usual the binding takes place automatically. Works normal on a machine with date format "MM/dd/yy" but if I set it to "dd/MM/yy" in the regional settings then it is unable to parse the date.
The easiest solution could be to change the datepicker's format to
"dd-MMM-yyyy" a non-culture specific date format but my client wants
the selected date to be displayed in MM/dd/yyyy format.
Any clean and easy suggestion to handle this at the datepicker or controller level?
You can use an hidden field with a custom format:
HTML:
<input name="from" type="text" id="from" />
<input name="hiddenFrom" type="hidden" id="hiddenFrom" />
Javascript:
$("#from").datepicker({
altField: "#hiddenFrom",
altFormat: "dd-mm-yy" // or whatever
});
You'll find documentation about jquery ui date format here
How do you set a string to denote the required format pattern in a text box. For instance, if I have a text box displayed such as a date field, how do I display a format of "dd/mm/yyyy" to help the User complete the field. If the field is already populated when the view is displayed then the actual data should be displayed.
If the field is a drop down list, I would like to display "Please select from the list" if the field does not contain a value.
In HTML 5 you can achieve it using Placeholder attribute of input tag like this:
<input name="email" type="email" placeholder="validemail#email.com" />
However HTML5 is not yet supported by most browsers, so you will have to live with javascript based solution. Populate the desired value in textbox when page is loading (you can use CSS to make that text dim). Using javascript empty the field on "onfocus" event.
For drop down list populate "please select..." thing with Value as 0. This way you can validate on server that user has not selected any valid value.