I find it odd that input type="date" is still not supported in Firefox after all of this time. In fact, I don't think they added in much (if any) of the HTML 5 new types on an input element. Not surprised that it is not supported in IE10. So, my question is...
How to get type="date" on an input element working without adding, yet another, .js file (namely jQueryUI DatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers? Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers?? Trying to target IE 8+ Browsers and for Firefox, doesn't matter, newest version (28.0) will be fine.
UPDATE: Firefox 57+ supports input type=date
You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.
Here is a demo with CDN:
http://jsfiddle.net/trixta/BMEc9/
<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
<input type="date" />
In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.
Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.
It is in Firefox since version 51 (January 26, 2017),
but it is not activated by default (yet)
To activate it:
about:config
dom.forms.datetime -> set to true
https://developer.mozilla.org/en-US/Firefox/Experimental_features
There's a simple way to get rid of this restriction by using the datePicker component provided by jQuery.
Include jQuery and jQuery UI libraries
(I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
Use the following snip
$(function() {
$( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'});
});
See jQuery UI DatePicker - Change Date Format if needed.
The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.
http://caniuse.com/#search=date
I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?
Here is a full example with the date formatted in YYYY-MM-DD
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
dFormat: '-',
dateSigns: '-',
patterns: {
d: "yy-mm-dd"
}
}
};
</script>
<input type="date" />
While this doesn't allow you to get a datepicker ui, Mozilla does allow the use of pattern, so you can at least get date validation with something like this:
pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'
Ultimately I agree with #SuperUberDuper in that Mozilla is way behind on including this natively.
This is just a suggestion that follows Dax's answer. (I would put it in a comment at that answer, but I don't have enough reputation yet to comment on others questions).
Id's should be unique for every field, so, if you have multiple date fields in your form (or forms), you could use the class element instead of the ID:
$(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });
and your input as:
<input type="text" class="datepicker" name="your-name" />
Now, every time you need the date picker, just add that class. PS I know, you still have to use the js :(, but at least you're set for all your site.
My 2 cents...
The latest version of firefox the firefox 57(Quantum) supports date and other features it was released on November 14, 2017. You can download it by clicking this link
Sometimes you do not want use Datepicker http://jqueryui.com/datepicker/ in your project because:
You do not want use jquery
Conflict of jquery versions in your project
Choice of the year is not convenient. For example you need 120 clicks on the prev button for moving to 10 years ago.
Please see my very simple cross browser code for date input. My code apply only if your browser is not supports the date type input
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov anhr#mail.ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- For compatibility of IE browser with audio element in the beep() function.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
</head>
<body>
<h1>Date field</h1>
Date:
<input type='date' id='date' />
New date: <span id="NewDate"></span>
<script>
CreateDateFilter('date', {
formatMessage: 'Please type date %s'
, onblur: function (target) {
if (target.value == target.defaultValue)
return;
document.getElementById('NewDate').innerHTML = target.value;
}
, min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
, max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
, dateLimitMessage: 'Please type date between "%min" and "%max"'
}
);
</script>
</body>
</html>
You can use this datepicker functionality in anywhere just need to call on Master.aspx or Layout page
Include jQuery and jQuery UI libraries (I'm still using an old one)
src="js/jquery-1.7.2.js"
src="js/jquery-ui-1.7.2.js"
then add this script and this is working on all platforms.
<script>
jQuery(function ($) { // wait until the DOM is ready
$(".editorDate").datepicker({ dateFormat: 'yy-mm-dd' });
});`
</script>
you can add this "editorDate" on multiple pages.
#Html.TextBoxFor(model => model.FromDate, "{0:yyyy-MM-dd}", htmlAttributes: new {
#class = "form-control editorDate"})
Thank Alexander, I found a way how to modify format for en lang. (Didn't know which lang uses such format)
$.webshims.formcfg = {
en: {
dFormat: '/',
dateSigns: '/',
patterns: {
d: "yy/mm/dd"
}
}
};
$.webshims.activeLang('en');
Here is the proper solution.
You should use jquery datepicker everywhere
<script>
$( function() {
$( ".simple_date" ).datepicker();
} );
</script>
Below is the link to get the complete code
https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Here is the perfect solution. You should use JQuery datepicker to user input date. It is very easy to use and it have lot of features that HTML input date don't have.
Click here to copy the JQuery datepicker code
I had to use bootstrap-datepicker plugin to get the calendar working on Firefox 55 Portable:
https://bootstrap-datepicker.readthedocs.io/en/latest/
Compatible with Bootstrap v2 and v3. It comes with a standalone stylesheet so you don't have to depend on Bootstrap.
Usage:
<input class="datepicker">
$('.datepicker').datepicker({
format: 'mm/dd/yyyy'
});
I am using one JQuery plugin which is giving me Calendar with Time selection on click of that textbox this plugin very flexible to use.
below is the code which I am referring to use this plugin.
<link href="DateTimePicker/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
<script src="DateTimePicker/jquery.js" type="text/javascript"></script>
<script src="DateTimePicker/jquery.datetimepicker.full.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#datetimepicker_mask').datetimepicker({
mask: '9999/19/39 29:59'
});
});
</script>
<h3>Mask DateTimePicker</h3>
<input type="text" value="" id="datetimepicker_mask"/><br><br>
Above code works fine for me for single Textbox.
but I have to use this plugin for more then one textbox so this I can use only if this plugin is taking by Class instaed of Id.
so I am not getting what change I have to do in the Jquery to achieve the task.
there are so many Jquery & Css which is dependent on this.
Can anyone help me for this.
JQuery's selectors are very similar to CSS selectors. So you can use .class to select by class.
In your example you would change your selector to
$('.datetimepicker_mask')
And use a class on your input instead of id
<input type="text" value="" class="datetimepicker_mask"/>
I am using Angular. I am curious to how I can remove these arrows:
Also, if its possible to click the date picker box(Where mm/dd/yyyy is) and allow it to show the Date Selector instead of clicking the far right arrow.
I don't think it does this across all browsers; narrow down where you see this and where you don't want to see this; and then do something like the below but specific to the browser your targeting.
input::-webkit-calendar-picker-indicator{
display: none;
}
You can do this with jquery here is a demo (I couldn't get it to work in the snippet)
JsFiddle
$(document).ready(function() {
$("#datepicker").datepicker();
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<body>
<form>
<input id="datepicker" />Choose a date
</form>
</body>
You can resize the datepicker by doing something like
div.ui-datepicker{
font-size:10px;
}
I'm having a sort of conflict between two libraries I'm using, Bootstrap and Mathquill. I'm using bootstrap for the layout, structure, and overall UI of the website, and Mathquill for interactive LaTeX rendering- basically, letting the user type in math in a nice, "textbook style" format.
My problem is that bootstrap seems to conflict with Mathquill, in the rendering of the math. Here is the structure of my page:
HTML
<div id="container">
<span id="input" class="mathquill-editable"></span>
</div>
CSS
#container {
padding: 5px;
width: 80%;
}
#input {
width: 100%;
padding: 15px;
margin: 5px;
}
Without Bootstrap running, the math renders perfectly. Here is a fiddle, and below is a screenshot:
With Bootstrap, I have the same code, except that I add the classes panel and panel-default to div#container. User inputted math, doesn't render well, because the spacing seems to be wrong, and it doesn't respect the boundaries of span#input. Here is a fiddle, and below is a screenshot:
I think the problem here is the bootstrap causes MathQuill's math spans (inside of span#input) to have more padding, thus the problems with MathQuill. Is there a way to let bootstrap ignore the area inside span#input?
Obviously, I could just copy the styling I need from bootstrap and just apply it to the areas I need the styling for, but this would be a hassle considering that I'm using it quite extensively.
Any thoughts?
This can be corrected by modifying the mathquill-rendered-math class in mathquill.css file.
just add the following.
.mathquill-rendered-math * {
box-sizing: content-box;
top: auto;}
You could use a iframe for applying the mathematical stylesheet only. I don't think it will cost too much speed to load if you're using MathQuill extensively.
I would do something like this:
<html>
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<iframe src="math.php#f=2*2"></iframe>
<iframe src="math.php#f=3*5"></iframe>
</body>
</html>
And then let math.php output something like this:
<html>
<head>
<link href="mathquill.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
// Generate content dynamically with JavaScript from parameter `f` so the this page can be cached.
</script>
</body>
</html>
Another approach would be creating your own custom bootstrap stylesheet. You can download the LESS sourcecode on its website.
Thanks #Tim for the great answer, but I found a better solution here. I will wrap the rules in my own class bootstrap-enabled, so that bootstrap's styles only apply where I want them to.
What I've done to solve this is find the areas where they conflict and use my custom CSS to override Bootstrap for those elements.
For instance, the powers look bad/go beyond the border because of
sup {
top: -0.5em;
}
in Bootstrap. I've reset this to 0 for mathquill elements in my CSS.
You correctly point out that Bootstrap is fiddling with padding, which makes the denominator wrap around. Specifically Bootstrap uses "border-box" rather than the default "content-box" for box-sizing. Setting:
.denominator {
box-sizing: content-box;
}
fixes this.
This fixes the two problems in your example. I'll update this post as I find more conflicts (and their sources).
I just solved mathquill + bootstrap conflict by adding css-resetter from this answer into beginning of mathquill.css (change .reset-this to .mathquill-rendered-math *)
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/