I'm working with HTML5 elements input attributes and only Google Chrome supports the date, time attributes. I tried Modernizr but I can't understand on how to integrate it on my website(on how to code it/what is the syntax/includes). Any code snippet there on how to work with date, time attributes to all browsers.
Any browser that does not support the input type date will default to the standard type, which is text, so all you have to do is check the type property (not the attribute), if it's not date, the date input is not supported by the browser, and you add your own datepicker:
if ( $('[type="date"]').prop('type') != 'date' ) {
$('[type="date"]').datepicker();
}
FIDDLE
You can of course use any datepicker you want, jQuery UI's datepicker is probably the one most commonly used, but it does add quite a bit of javascript if you're not using the UI library for anything else, but there are hundreds of alternative datepickers to choose from.
The type attribute never changes, the browser will only fall back to the default text type for the property, so one has to check the property.
The attribute can still be used as a selector, as in the example above.
Modernizr doesn't actually change anything about how the new HTML5 input types are handled. It's a feature detector, not a shim (except for <header>, <article>, etc., which it shims to be handled as block elements similar to <div>).
To use <input type='date'>, you'd need to check Modernizr.inputtypes.date in your own script, and if it's false, turn on another plugin that provides a date selector. You have thousands to choose from; Modernizr maintains a non-exhaustive list of polyfills that might give you somewhere to start. Alternatively, you could just let it go - all browsers fall back to text when presented with an input type they don't recognize, so the worst that can happen is that your user has to type in the date. (You might want to give them a placeholder or use something like jQuery.maskedinput to keep them on track.)
You asked for Modernizr example, so here you go. This code uses Modernizr to detect whether the 'date' input type is supported. If it isn't supported, then it fails back to JQueryUI datepicker.
Note: You will need to download JQueryUI and possibly change the paths to the CSS and JS files in your own code.
<!DOCTYPE html>
<html>
<head>
<title>Modernizer Detect 'date' input type</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"/>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){
if(!Modernizr.inputtypes.date) {
console.log("The 'date' input type is not supported, so using JQueryUI datepicker instead.");
$("#theDate").datepicker();
}
});
</script>
</head>
<body>
<form>
<input id="theDate" type="date"/>
</form>
</body>
</html>
I hope this works for you.
<script>
var datefield = document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
}
</script>
<script>
if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
jQuery(function($) { // on document.ready
$('#birthday').datepicker();
}); <- missing semicolon
}
</script>
<body>
<form>
<b>Date of birth:</b>
<input type="date" id="birthday" name="birthday" size="20">
<input type="button" value="Submit" name="B1">
</form>
</body>
SOURCE 1 & SOURCE 2
This is bit of an opinion piece, but we had great success with WebShims. It can decay cleanly to use jQuery datepicker if native is not available. Demo here
Just use <script src="modernizr.js"></script> in the <head> section, and the script will add classes which help you to separate the two cases: if it's supported by the current browser, or if it's not.
Plus follow the links posted in this thread. It will help you: HTML5 input type date, color, range support in Firefox and Internet Explorer
Chrome Version 50.0.2661.87 m does not support the mm-dd-yy format when assigned to a variable. It uses yy-mm-dd. IE and Firefox work as expected.
best easy and working solution i have found is, working on following browsers
Google Chrome
Firefox
Microsoft Edge
Safari
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<h2>Poly Filler Script for Date/Time</h2>
<form method="post" action="">
<input type="date" />
<br/><br/>
<input type="time" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {type: 'date'});
webshims.setOptions('forms-ext', {type: 'time'});
webshims.polyfill('forms forms-ext');
</script>
</body>
</html>
Two-Script-Include-Solution (2019):
Just include Better-Dom and Better-Dateinput-Polyfill in your scripts section.
Here is a Demo:
http://chemerisuk.github.io/better-dateinput-polyfill/
I was having problems with this, maintaining the UK dd/mm/yyyy format, I initially used the answer from adeneo https://stackoverflow.com/a/18021130/243905 but that didnt work in safari for me so changed to this, which as far as I can tell works all over - using the jquery-ui datepicker, jquery validation.
if ($('[type="date"]').prop('type') !== 'date') {
//for reloading/displaying the ISO format back into input again
var val = $('[type="date"]').each(function () {
var val = $(this).val();
if (val !== undefined && val.indexOf('-') > 0) {
var arr = val.split('-');
$(this).val(arr[2] + '/' + arr[1] + '/' + arr[0]);
}
});
//add in the datepicker
$('[type="date"]').datepicker(datapickeroptions);
//stops the invalid date when validated in safari
jQuery.validator.methods["date"] = function (value, element) {
var shortDateFormat = "dd/mm/yy";
var res = true;
try {
$.datepicker.parseDate(shortDateFormat, value);
} catch (error) {
res = false;
}
return res;
}
}
<html>
<head>
<title>Date picker works for all browsers(IE, Firefox, Chrome)</title>
<script>
var datefield = document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type != "date") { // if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
}
</script>
<script>
if (datefield.type != "date") { // if browser doesn't support input type="date", initialize date picker widget:
jQuery(function($) { // on document.ready
$('#start_date').datepicker({
dateFormat: 'yy-mm-dd'
});
$('#end_date').datepicker({
dateFormat: 'yy-mm-dd'
});
})
}
</script>
</head>
<body>
<input name="start_date" id="start_date" type="date" required>
<input name="end_date" id="end_date" required>
</body>
</html>
Related
I have tried to set the value on the Autocomplete control and set the focus from java script. The value is set to the field but the list of predictions are not displayed when page is loaded.How can I also show the prediction list with the initial search string set on the field when page is loaded.Please see the below the code.
Please note as soon as user click on the control(Manually) the dropdown is displayed.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
$(document).ready(function() {
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
});
//$("#address").val('George Street');
$("#address").focus();
</script>
</body>
</html>
I have found the solution for this. I have hooked the code to set the value and set the focus on the control in the DOM Event 'load' as below
google.maps.event.addDomListener(window, 'load', function() {
$("#address").val("George Street");
$("#address").focus();
});
I couldn't for some reason get the jquery input mask plugin to work. I didn't know jquery so any person whom had worked in jquery please reply. here is my testPage.php code
<html>
<head>
<script src="view/script/jquery-2.1.1.js" type="text/javascript"></script>
<script src="view/script/jquery.inputmask.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
jQuery(function ($) {
$("#cnicFieldName").mask("99999-9999999-9");
});
</script>
ID :<input type="text" id="cnicFieldName" /> <br />
</body>
</html>
FYI: Yes I had included both the jquery (latest avalible version) and jquery.inputmask.js from the dist folder i.e. jquery.inputmask-3.x\dist\inputmask\jquery.inputmask.js. (I had downloaded both from jquery.com (both the main jquery file and the input mask plugin)
When I select the input nothing appears in it i.e. underscores etc and it didn't prevent charecter data in it. I am sure I am missing a very minute detail but I couldn't figure out what that is. Thanking you in advance for considering to reply.
You need to call mask after the document is ready. And you are using mask("99999-9999999-9") inlace of inputmask("99999-9999999-9");.
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#cnicFieldName").inputmask("99999-9999999-9");
});
</script>
ID :<input type="text" id="cnicFieldName" /> <br />
</body>
You can refer jquery.inputmask 3.x plugin or check JSFiddle
I face a problem when i try to use jqm in my website. A message of 'loading' appears on the bottom of my site. I figured out that it happens since I don't add jqm css. When I add the jqm css everything changes (color layout ect.). How is it possible to remove 'loading' message or add css without conflicts with the main css of my site?
<head>
<link href="css/site.css" rel="stylesheet" />
<!--<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" /> -->
<!-- disable loading msg -->
<script>
$(document).bind("mobileinit", function(){
$.mobile.loadingMessage = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script src="scripts/jquery.mobile-1.3.2.min.js"></script>
</head>
I add script in my code. Nothing seems to happen! My problem solved only when i uncomment jqm css code, but then i got many conflicts with the site.css which i dont know how to solve.
To disable jQuery Mobile loading message, you need to override global settings once mobileinit triggers. The code should be placed in head after loading jQuery and before loading jQuery Mobile libraries.
<head>
<script src="jquery.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.loadingMessage = false;
});
</script>
<script src="jquery-mobile.js"></script>
</head>
Is there any way to put an hook to the even before typed results are displayed ? I want to filter the ones which are not fitting to my need (ie not in the country that I implement).
Here is my current code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=es®ion=MX" type="text/javascript"></script>
<script type="text/javascript">
function hebe(){
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(18.2397859708389,-99.876708984375),
new google.maps.LatLng(20.23127464130257,-97.899169921875)
);
var input = document.getElementById('searchTextField');
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setBounds(defaultBounds)
}
</script>
</head>
<body onLoad="hebe();">
<input id="searchTextField" type="text" size="50">
</body>
</html>
Possibly componentRestrictions?
componentRestrictions can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by country. The country must be passed as as a two character, ISO 3166-1 Alpha-2 compatible country code.
https://developers.google.com/maps/documentation/javascript/places#adding_autocomplete
I'm trying to populate a div in html via ajax.
The data source is a google search for "bing sucks"
I call the method with
loadXMLDoc('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Bing%20sucks')
It works in InternetExplorer, but it doesn't work with Firefox/Chrome.
If I load just a file from the local domain (test.txt) , then it works.
What am I doing wrong ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>AJAX</title>
<script language="javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('test').innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="lol">
lol
</div>
<div id="test">
<h2>Click to let AJAX change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Bing%20sucks')">Click Me</button>
<button type="button" onclick="loadXMLDoc('test.txt')">Click Me</button></body>
</html>
You cannot use AJAX to read data from another domain.
You'll need to write a server-side script on your domain that sends a request to Google and forwards you the results.
Here comes the usual "just use jQuery" post!
Why not use jQuery? It'll get rid of all those browser inconsistencies for you:
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Bing%20sucks';
$.getJSON(url + "&jsoncallback=?", function(data){
$('#test').html(data);
});
</script>
You'd need some server-side programming to to intercept the request to get around the cross-domain issue. Normally you can't make an ajax request from one domain to the other.
See the jQuery docs on .getJSON. Previous question of similar nature.