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
Related
I have a razor view (MVC5) with 2 date fields (Effective Date and Action Date), I am trying to accomplish the following: the moment a date has been chosen from the date picker for Effective Date then I want that chosen date to be shown directly in the Action Date field, basically, the effective date and the action date should always be the same. What is the best and cleanest way to accomplish this?
I think use js is a good choice.Here is a demo:
View:
<input id="Effective" type="date" />
<input id="Action" type="date" />
<script>
$("#Effective").change(function () {
$("#Action").val($(this).val());
})
</script>
Result:
The situation
I want to use ui-date to set/edit a date in my app. I use the latest stable versions of angular, angular-ui, jquery-ui etc.
The problem
As soon as a date is selected using the datepicker the date in my model will equal the selected date minus 1 day. It will also get send to my server and saved in my database this way.
The plunker
http://plnkr.co/edit/Ft14Wa?p=preview
Initially the date in the datepicker input and the date in my model are the same. After picking a date they differ.
The question
What is going (wr)on(g) here???
ui-date expects your model to be an actual date object. In your case it's a string. If you take a look at the console you'll see that angularUI actually informs you about that. Then it advises you to add additional ui-date-format tag with the specified date format with which your date string will be parsed into date object.
Long story short, your need to adjust your input as this:
<input ui-date="{dateFormat: 'yy-mm-dd'}" ui-date-format="yy-mm-dd" ng-model="customer.contract_end_date"></input>
Working plunker.
this solves my problem.
angularjs uses default timezone which considers hour time. seting timezone option of ng-model to UTC clear hour times......
ng-model-options="{timezone:'UTC'}"
The problem is that angular is using its default timezone when parsing the date selected on the datepicker. To resolve the issue you can use the ng-model-options directive which accepts a "timezone" parameter.
<input type="text" ng-model-options="{timezone:'UTC'}" ... >
I set date format as dd-mm-yyyy as my requirement. then set date-type as string.
<input type="text" class="form-control col-xs-9"
data-date-format="dd-MM-yyyy" data-autoclose="1"
ng-model="modelName"
date-type="string" bs-datepicker required>
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:
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" />