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>
So if I copy and paste the google translate plugin code snippet:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
It changes all my site css [from headings, animations to even boostrap css].
I did some research and ofcourse I found class="notranslate" and yes I applied for headings and stuff.
I will try by myself, but an answer would be cool.
It was easy.
So for everyone who has this problem you just have to add class="notranslate" to the stylesheet's Link tag, for each one which actually does something on that specific page.
e.g:
<link rel="stylesheet" type="text/css" href="/Templates/CSS/bootstrap.min.css" title="standard" class="notranslate" />
I have solution width config javascript
<script>
$(".class-name").addClass("notranslate");
</script>
Have installed the angularjs and Twitter.Bootstrap packages succesfully
This is my index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
This is my app.js:
var TodoApp = angular.module("TodoApp", []).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
And, this is my list.html:
<h1>Test: {{test}}</h1>
This should work fine. However the index.html is not showing the content of list.html. I think the angularjs part is not working properly.
No idea about what am i doing wrong?
Once you have defined a module, you need to define your controllers for that module and not independently.
Thus, your controller should be rewritten as:
TodoApp.controller('ListCtrl', [ '$scope', '$location',
function ($scope, $location) {
$scope.test = "Testing";
}
]);
This should show the view in question.
I would say, that if you check errors in console (in Chrome or IE press F12) you should see:
...Failed to instantiate module TodoApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider...
The reason for this expectation is that we ask IoC to inject $routeProvider while not correctly listing dependent modules. This is the above code:
var TodoApp = angular
// here we say: we do not need any other module
.module("TodoApp", [])
// here we ask: inject $routeProvider from other module
.config(function ($routeProvider)
So to make it runing we have to include the module 'ngRoute'
var TodoApp = angular
// here we say: we need these modules to make our module working properly
.module("TodoApp", [
'ngRoute'
])
// now we can ask for the provider,
// using minification-safe syntax
.config(
[ '$routeProvider',
function ($routeProvider) {
$routeProvider.
...
}]);
And also do not forget to also reference this module scripts:
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<!-- here we have to load this module -->
<script src="Scripts/angular-route.js"></script>
What is your directory structure can you check if list.html is in the same directory as index.html, if not specify a relative path from the application root?
Since no one has posted a full correct answer to this question and it hasn't been closed yet, here is another answer.
This is your function:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
This is a bare function, which isn't of much use. You need a controller so that Angular knows what to do with {{ test }}:
<div ng-controller="someController">
<h1>{{ test }}</h1>
</div>
If you insist on keeping the function as a separate variable, you could do so and still have a controller:
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
TodoApp.controller('someController', ListCtrl);
This also works.
Despite of this, your UI won't show, as there's an error in it:
var TodoApp = angular.module("TodoApp", [])
You're using $routeProvider and .when(),.otherwise(), for which you need ngRoute as a dependency:
var TodoApp = angular.module("TodoApp", ['ngRoute'])
Your app should work after that.
I'm using the googlemaps package and I'm unable to get the map to render.
main.html contains:
<body>
<div id="map-canvas"></div>
</body>
and main.js contains:
GoogleMaps.init(
{ ... });
Everything is set correctly (API Key, mapOptions, etc.) but the map is not rendering. What am I missing? Thanks.
The reason this does not work is when the JS runs, the HTML may not be drawn yet. This style should work instead which waits for the DOM to be drawn, then inits the map.
<body>
{{>mapTemplate}}
</body>
<template name="mapTemplate">
<div id="map-canvas"></div>
</template>
Then your JS
Template.mapTemplate.rendered = function() {
GoogleMaps.init(
{ ... });
}
An alternative to not splitting your map into mapTemplate is to init your map in the UI.body.rendered callback
I have 2 files in a very simple web application
The first is a standard index.html and it looks something like the below
<body>
<div id="add-stuff"></div>
<script id="the-template" type="text/x-handlebars-template" src="some-template.erb.html"></script>
<script type="text/javascript">
var data = [];
var source = $("#the-template").html();
var template = Handlebars.compile(source);
$('#add-stuff').html(template(data));
</script>
</body>
The second is my handlebars template "some-template.erb.html" and it looks something like the below
<table>
{{#each item}}
<tr><td>{{ item.name }}</td></tr>
{{/each}
</table>
The problem with the inline javascript I have above is that when I try the ".html()" part it always returns an empty string (as I'm linking in the erb.html file).
I've found a work around that lets me achieve this if I use $.ajax to pull in the template but I'd much prefer something like the above (so I can include the template client side w/out any nested jQuery callbacks).
Is this possible? If not what can I do do improve the $.ajax based approach?
** the ajax based approach that works is shown below **
<body>
<div id="add-stuff"></div>
<script type="text/javascript">
$.ajax({
url: 'some-template.erb.html',
cache: true,
success: function (source) {
var data = [];
var template = Handlebars.compile(source);
$('#add-stuff').html(template(data));
}
});
</script>
</body>
Here is a link to the stackoverflow question that showed the $.ajax version in a bit more detail
maybe its already outdated, but I found your question today and I have a suggestion for you or people who are dealing with the same problem. It's not a perfect one, but for small templates an option if you don't want to use ajax.
What do you think about writing the template as string in a variable in an external JS-file and inlcude it via script tag?
template.js
var source = '<table>\
{{#each item}}\
<tr><td>{{ item.name }}</td></tr>\
{{/each}';
index.html
<body>
<div id="add-stuff"></div>
<script src="template.js"></script>
<script type="text/javascript">
var data = [];
var template = Handlebars.compile(source);
$('#add-stuff').html(template(data));
</script>
</body>