How to add datepicker in MVC without jQuery
There's no built in Datepicker in MVC. The nearest to a built-in datepicker would be the HTML 5 datetime input type
<input type="datetime " value="" />
which may show a datepicker in certain browsers, but this may not be supported across all your target browsers and is limited to how you can style it.
In light of this, you may want to look at a JavaScript based datepicker.
I don't think you can no, although when running in Chrome it will allow you to pick dates using a datepicker
Related
I have searched all over the net and have found examples of a dropdown calendar, however it didn't work in any of the web browsers.
I then used:-
<input type="date">
it works perfectly on google chrome, but not on the other browsers.
you are using html 5 datepicker, but not all browser implement datepicker.
if you want to make sure all browser show a calendar, why not use 3rd party such as jquery datepicker https://jqueryui.com/datepicker/
this is my first question on Stackoverflow, so please don't hate me for missing anything :)
I am currently trying to build a Phonegap application using jQuery Mobile.
At this point I'm having issues handling Time inputs. I need the input to only offer 15-minute steps. I've tried the DateBox plugin which offers this functionality. My code looks as follows:
<input name="txtAfzEnde" id="txtAfzEnde" type="text" data-role="datebox"
data-options='{"mode":"timeflipbox", "minuteStep":"15", "useFocus":true}' />
However on an iPhone it's not possible to switch to this input using the "Prev/Next" Buttons.
So my question is:
Is it possible to use the standard HTML-inputs like
<input name="mytime" id="mytime" type="time" />
with any customizing options to use a 15-minute step? I'm imagining something like:
<input name="mytime" id="mytime" type="time" data-options='{"minuteStep":"15"}'/>
I'd like it to use the native timepicker so it integrates well with the other UI elements.
If something like this is not possible, please suggest a plugin that allows me to customize it in the needed way and also integrates well with native UI inputs.
Greets,
Philip
I'm wondering if this is possible and if yes, how would I go about doing it? I'm trying to make the widget use a Jalali(Persian) Calender.
jQuery UI Datepicker localization
In general, to add localization to jQuery UI Datepicker you need to include a specific localization file immediately after including the Datepicker's script. For example, to set a French localization, you'd do this:
[...include jQuery and jQuery UI...]
<script type="text/javascript" src="jquery.ui.datepicker-fr.js"></script>
The localization files are included as part of the the standard jQuery UI download, in a separate directory (development-bundle/ui/i18n). For more on this, see the Datepicker API documentation (under "Localization").
Current status: Farsi in, Jalali out
Currently, jQuery UI download package doesn't seem to include a Jalali localization file. For now, there seems to be only a regular (Georgian) calendar translated into Farsi (jquery.ui.datepicker-fr.js).
Solution 1 - custom localization file
If you prefer to stick with jQuery UI's datepicker, you can create a custom localization file, based on the format of existing localization files. If you're familiar with the calendar in question, it shouldn't be difficult.
Solution 2 - use a different plugin
Consider using the jQuery Calendars plugin instead. It already includes most common world calendars in several languages and formats, so generating a Jalali or any other foreign calendar for that matter is done by the flick of a setting.
Might be too late, but since I stumbled on it, here is a demo someone has been kind enough to put up. All credits to unknown author
http://jquery-ui.googlecode.com/svn/tags/1.6rc5/demos/datepicker/localization.html
I have a ASP.NET MVC4 project with HTML5 semantic markup enabled. When using #Html.EditorFor(m => m.MyDateTimeField) the output is an input with type="datetime". I want to be able to stop EditorFor from generating HTML5 markup. How can I do this?
This is only a problem in Opera at the moment because other browsers (as far as I know) don't support type="datetime". I have a jQuery datepicker on the field so in Opera I get both the jQuery datepicker and the browser datepicker.
I can fix using any of:
a. Use js to change the input type
b. Use Html.TextBoxFor(m => m.MyDateTimeField)
c. Use a custom editor template
d. Use modernizr to detect if datetime is supported and if so, don't use jQuery datapicker
The solution I want is to disable HTML5 generation in HtmlHelper.EditorFor. I want HtmlHelper.EditorFor to function the same way it would if I hadn't ticked the "html5 semandtic markup" checkbox on project creation.
EDIT:
After a bit more searching, I've come across the DataTypeAttribute which I can apply on my model fields to force them to be rendered as input type="text" rather than the html5 match. This is a potential fix, but it is less than ideal. Surely there must be a switch somewhere to turn off html5 in EditorFor (and equivalent helpers)?
A bit more info:
I have two projects. The first one was created with "Html5 semantic markup" on, the other without. The first one uses html5 input types when using EditorFor, the second does not. I need to stop the first project EditorFor behaving the way is does without removing the EditorFor. There must be a setting somewhere?
The problem is in one of the project the package references are not updated properly and hence you are seeing the html5 semantic rendered.
This issue happens when you upgrade the ASP.NET MVC beta version to RC and there two ways you could solve the problem either updating all the packages through Nuget or manually add the reference to assemblies.
The issue and solution is clearly explained by Scott here.
That's really feature that got introduced and wasn't documented (nasty...). Basically ASP.NET MVC 4 now defines internal editor templates for Date and DateTime. In ASP.NET 3 there were no templates so I personally had an EditorTemplate (in Views\Shared\EditorTemplates) called DateTime.cshtml which was handling all DateTime types and dealing with DataTypes.Date vs DataTypes.DateTime. Now you need to override both templates. Nasty.
Edit: Basically if you just want to not touch any of your existing code define two templates Date.cshtml and DateTime.cshtml which both have #Html.TextBoxFor(model => model) in Views\Shared\EditorTemplates\
When selecting the date in the standard JQuery datepicker on a Windows 7 phone i found that the date doesn't select for me and the field doesn't fill in the date. This feature works on all other tested devices including (of course the standard desktop) iTouch, iPad and Android. It almost acts like the dom object is not triggering when the datepicker is selected sometimes causing a text field behind the control to take focus. I did manage to get the timepicker (http://fgelinas.com/code/timepicker/) work but not the datepicker.
Has anyone experienced this and found a fix? Thanks in advance for your help!
DateBox has a ton of options and it's built for jQM:
http://dev.jtsage.com/jQM-DateBox/
try to use this line of code :
document.getElementById('container div of datepicker').innerHTML = document.getElementById('container div of datepicker').innerHTML
it seems like crazy and unbeliveable but it works with me