Sto lavorando con gli attributi di input di elementi HTML5 e solo Google Chrome supporta gli attributi di data e ora. Ho provato Modernizr ma non riesco a capire come integrarlo sul mio sito web (su come codificarlo/qual è la sintassi/include). Qualche frammento di codice lì su come lavorare con gli attributi data, ora a tutti i browser.Come rendere <input type = "date"> supportato su tutti i browser? Qualche alternativa?
Qualsiasi browser che non supporta il tipo di ingresso date predefinita sarà il tipo standard, che è text, così tutti quello che dovete fare è controllare il tipo proprietà(non l'attributo), se non è date, l'ingresso della data non è supportata dal browser, e aggiungere il proprio datepicker:
if ($('[type="date"]').prop('type') != 'date') {
$('[type="date"]').datepicker();
}
Ovviamente puoi usare qualsiasi datepicker che vuoi, il datapicker di jQuery UI è probabilmente quello più usato, ma aggiunge un bel po 'di javascript se non stai usando la libreria dell'interfaccia utente per nient'altro, ma ci sono centinaia di datepickers alternativi tra cui scegliere.
L'attributo type non cambia mai, il browser tornerà al tipo predefinito text per la proprietà, quindi è necessario verificare la proprietà.
L'attributo può ancora essere utilizzato come selettore, come nell'esempio sopra.
Potrebbe essere meglio usare jQuery per controllare la proprietà piuttosto che scendere verso il basso DOM? '$ ('input'). prop ('type')! = 'date'' – IMSoP
DOM è più veloce, no? –
Si può anche filtrare l'input di testo che si desidera contenere bit di testo, può essere fatto aggiungendo un class = "date" o qualcosa –
Basta usare <script type="text/javascript" src="modernizr.js"></script> nella sezione <head> e lo script aggiungerà classi che consentono di separare i due casi: se è supportato dal browser corrente o se non lo è.
E seguire i collegamenti pubblicati in questa discussione. Ti aiuterà: HTML5 input type date, color, range support in Firefox and Internet Explorer
Modernizr non modifica in realtà nulla su come vengono gestiti i nuovi tipi di input HTML5. È una funzione rilevatore, non uno spessore (eccetto per <header>, <article>, ecc., Che può essere gestito come elementi di blocco simili a <div>).
Per utilizzare <input type='date'>, è necessario controllare lo Modernizr.inputtypes.date nel proprio script e, se è falso, attivare un altro plug-in che fornisca un selettore di data. Hai migliaia tra cui scegliere; Modernizr mantiene a non-exhaustive list of polyfills che potrebbe darti da qualche parte per iniziare. In alternativa, puoi lasciarlo andare: tutti i browser tornano a text quando vengono presentati con un tipo di input che non riconoscono, quindi il peggio che può accadere è che l'utente debba digitare la data. (Si potrebbe voler dare loro un segnaposto o di usare qualcosa come jQuery.maskedinput per tenerli in pista.)
Hai chiesto l'esempio di Modernizr, quindi eccoti qui. Questo codice utilizza Modernizr per rilevare se il tipo di input 'data' è supportato. Se non è supportato, fallisce nuovamente in JQueryUI datepicker.
Nota: è necessario scaricare JQueryUI ed eventualmente modificare i percorsi dei file CSS e JS nel proprio codice.
<!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>
Spero che questo funzioni per voi.
Nota che per Modernizr 3, devi generare la configurazione usando https://modernizr.com/download?inputtypes-setclasses e compilare il javascript come descritto su https://modernizr.com/docs/#downloading-modernizr – koppor
<script type="text/javascript">
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"></p>
</form>
</body>
<html>
<head>
<title>Date picker works for all browsers(IE,Firefox,Crome)</title>
<script type="text/javascript">
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>
Chrome versione 50.0.2661.87 m non supporta il formato gg-mm-aa quando viene assegnato a una variabile. Usa yy-mm-dd. IE e Firefox funzionano come previsto.
migliore soluzione facile e di lavoro che ho trovato è, lavorando su seguenti browser
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>
Avevo problemi con questo, mantenendo il formato UK gg/mm/aaaa, inizialmente ho usato la risposta da adeneo https://stackoverflow.com/a/18021130/243905 ma questo non ha funzionato in safari per me, così cambiato con questo, che per quanto posso dire funziona tutto - usando jquery-ui datepicker, validazione jquery.
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;
}
}
Che tipo di controllo si utilizza un Datepicker ?? forse l'interfaccia utente di JQuery sarebbe perfetta ?? – Sebastien
Si noti che se non si sta già facendo affidamento su jQueryUI per qualcosa, incluso il suo peso gigantesco solo per inserire un input di data non dovrebbe essere una decisione predefinita. – jfmatt
Un esempio completo è disponibile su http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/ – koppor