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'
});
Consider the following code:
Inside jQuery document.ready:
$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
send: 'never',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
HTML:
<div class="editable">
superuser
</div>
This throws Uncaught TypeError: this.tip(...).find is not a function at jqueryui-editable.js:4727.
I assume this is because of incompatibilities with the jQuery UI version. But how can I get around it?
Update: Adding full example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>
<script>
$(function() {
$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
send: 'never',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
});
</script>
</head>
<body>
<div class="editable">
superuser
</div>
</body>
</html>
I had the same error, but solved it by using an older version of jquery-ui. I was on v 1.12.0, but noticed the editable demo used 1.10.1. Using the 1.10.1 version of jquery-ui allowed me to use editable.
I'm using
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css
and
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js
I think this is a bug in the source code specific to jqueryui 1.11.4.
It doesn't look like the jquery version of the source code has been touched since 2013, so I don't think it'll be fixed anytime soon. Unfortunately this is the most functional inplace editing library I've found, so I was determined to make it work.
A decent alternative is to use the "plain" version of the library which doesn't use jqueryui at all. It appears to me to be functionally equivalent. If you want the "popup" instead of "inline" mode, you need to also grab and include poshytip
I am very new in the web world. Please pardon me if my questions sound stupid?
My main aim is to capture the animation on HTML5 canvas to a video, in which I succeeded to some extent. I am able to record a video using this module https://github.com/spite/ccapture.js . This is possible only when the code has HTML5 and plain javascript drawing APIs having a canvas element.
Next, I 've been trying to capture text animations using textillate.js which is jquery based. I have no idea how to get the handle to the canvas
in this case. Since jquery is based on javascript, don't all the jquery based animation render on HTML5 canvas?
Here is the example code below. Where in this code can I get the canvas handle and how? There's also no mention of the canvas name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/animate.css" rel="stylesheet">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.tlt').textillate({
selector: '.texts',
loop: false,
minDisplayTime: 2000,
initialDelay: 0,
in: {
effect: 'bounce',
delayScale: 2,
delay: 50,
sync: false,
shuffle: true
},
autoStart: true,
inEffects: [],
outEffects: [ 'hinge' ]
});
});
</script>
</head>
<body>
<h1 class="tlt">Animate me with textillate effects</h1>
</body>
</html>
If you are looking to getContext, this was already answered here: jQuery equivalent of getting the context of a Canvas. If not, sorry.
I have a background slideshow that uses the jQuery 1.9.1 which is called here "jacksis.js" in body section and i have another submenu slider that uses jQuery 1.4.2 as in here is called "core.js" in head section. However, when i added the jQuery 1.9.1, the slider on 1.4.2 stopped working. I tried the noConflict() mode without success and the jQuery call innstead of the "$". Down below, the "ss1_wrapper" is using the 1.4.2 and the "cbp_bislideshow" the 1.9.1. What could be wrong in my
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11">
<link href="index_files/main.css" type="text/css" rel="stylesheet">
<script src="index_files/core.js"></script>
<script src="index_files/js/modernizr.custom.js"></script>
</head>
<body id="page">
<ul id="cbp-bislideshow" class="cbp-bislideshow">
...
</ul>
<form class="" name="aspnetForm" method="post" action="index.htm" id="aspnetForm">
<div class="ss1_wrapper">
......
</div>
<script>$(function() {
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 1100,
timeout: 6000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
// using the "before" function, we grab the content of the active slide and show it in our custom box overlay
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(300, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(600);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
});</script>
</form>
<script src="index_files/jacksis.js"></script>
<script src="index_files/js/jquery.imagesloaded.min.js"></script>
<script src="index_files/js/cbpBGSlideshow.min.js"></script>
<script>$(function() {
cbpBGSlideshow.init();});
</script>
<script type="text/javascript" src="index_files/quant.js"></script>
</body>
I am receiving only one error in firebug in line core.js (1.4.2) line 1993:
TypeError: jQuery.browser is undefined
and the error is in that function at line 4 (it's line 1993 in the original file)
(function($) {
$(document).ready( function() {
// Fix background image caching problem
if (jQuery.browser.msie) {
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
What couldn't be wrong in my code if i tried all the possibilities of getting away with jQuery conflict?
UPDATE:
I introduced jQuery 1.7.1 and deleted both 1.4.2 and 1.9.1, then now i have both my Slider and Background slideshow working again together BUT my drop-down menu (which could be seen on my webpage www.es-processing.com) is not working anymore. On the online version it is working, but right now, on the version i'm working on it's not functioning at all. You can have an idea from my dropdown on my webpage to see which jQuery functions it follows and how to adapt them on the new 1.7.1 i put.
I want to install the gallery and instead of using flash I wish to use this jQuery plugin. I cannot figure out how do I install and use it since it is distributed as .zip archive with two .js files inside and no index file or .css at all.
Here's plug in features demo, which I would like to achieve.
$("#container").gridalicious({
animate: true,
animationOptions: {
queue: true,
speed: 200,
duration: 300,
effect: 'fadeInOnAppear',
complete: onComplete
}
});
As per the source code...
The CSS is set in the JS itself, no need for an external style sheet.
If you'll scroll down http://suprb.com/apps/gridalicious/, you will see how to initialize it. It appears to just be a collection of divs with the class item inside of the initialized container.. <div id="container"> for example.
Update:
<!doctype html5>
<html>
<head>
<title>Test of plugin</title>
<script type="text/javascript" src="path/to/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.grid-a-licious.min.js"></script>
</head>
<body>
<div id="container">
<!--I assume it asks for divs with the "item" class, but it may be added automatically.-->
</div>
<script type="text/javascript>
//The initialize code printed above. Has parameters (read:options) you can tweak.
</script>
</body>
</html>