Pracuję z atrybutami wprowadzania elementów HTML5 i tylko Google Chrome obsługuje atrybuty daty i czasu. Próbowałem Modernizr, ale nie mogę zrozumieć, jak zintegrować go na mojej stronie internetowej (w jaki sposób go kodować/jaka jest składnia/obejmuje). Dowolny fragment kodu dotyczący sposobu pracy z atrybutami daty i czasu we wszystkich przeglądarkach.Jak ustawić <typ wejścia = "datę"> we wszystkich przeglądarkach? Jakieś alternatywy?
Każda przeglądarka nie obsługuje typ wejścia date domyślną wartością będzie standardowy typ, który jest text, więc wszystko trzeba zrobić, to sprawdzić typ nieruchomości(nie atrybut), jeśli to nie jest date, wejście data nie jest obsługiwany przez przeglądarkę i dodawać własne datepicker:
if ($('[type="date"]').prop('type') != 'date') {
$('[type="date"]').datepicker();
}
Możesz oczywiście użyć dowolnego datepaksu, którego najbardziej potrzebujesz, datepicker jQuery UI, ale dodaje całkiem sporo javascriptu, jeśli nie używasz biblioteki UI do niczego innego, ale są setki alternatywnych datepickerów do wyboru.
Atrybut type nigdy się nie zmienia, przeglądarka powróci do domyślnego typu text, dlatego należy sprawdzić właściwość.
Ten atrybut może nadal być używany jako selektor, jak w powyższym przykładzie.
Może lepiej użyć jQuery, aby sprawdzić właściwość, zamiast sprowadzać ją do DOM? '$ ('input') .project ('type')! = 'date'' – IMSoP
DOM jest szybszy, nie? –
Możesz także użyć filtru dla wprowadzania tekstu, w którym chcesz przechowywać fragmenty tekstu, można to zrobić, dodając klasę = "date" lub coś w rodzaju –
Po prostu użyj <script type="text/javascript" src="modernizr.js"></script> w sekcji <head>, a skrypt doda klasy, które pomogą oddzielić dwa przypadki: jeśli jest obsługiwany przez bieżącą przeglądarkę, lub jeśli nie jest.
Plus śledzić linki opublikowane w tym wątku. Pomoże Ci: HTML5 input type date, color, range support in Firefox and Internet Explorer
Modernizor nie zmienia nic o tym, jak obsługiwane są nowe typy wejść HTML5. Jest to cecha, która nie jest podkładką (z wyjątkiem <header>, <article> itp., Która to podkładka może być obsługiwana jako elementy blokowe podobne do elementów o kodzie podobnym do <div>).
Aby użyć <input type='date'>, musisz sprawdzić Modernizr.inputtypes.date w swoim własnym skrypcie, a jeśli jest on fałszywy, włącz inną wtyczkę, która udostępnia selektor daty. Masz tysiące do wyboru; Modernizor utrzymuje a non-exhaustive list of polyfills, który może dać ci miejsce do rozpoczęcia. Alternatywnie możesz po prostu odpuścić - wszystkie przeglądarki cofają się do text, gdy prezentowane są z typem wejściowym, którego nie rozpoznają, więc najgorszym, co może się zdarzyć, jest wpisanie daty przez użytkownika. (Być może chcesz dać im zastępczy lub użyć czegoś podobnego jQuery.maskedinput aby utrzymać je na torze.)
Poprosiłeś o przykład Modernizatora, więc proszę. Ten kod używa Modernizr do wykrywania, czy typ wejścia "data" jest obsługiwany. Jeśli nie jest obsługiwany, oznacza to, że wraca do JQueryUI datepicker.
Uwaga: Będziesz musiał pobrać JQueryUI i ewentualnie zmienić ścieżki do plików CSS i JS w swoim własnym kodzie.
<!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>
Mam nadzieję, że to zadziała.
Zauważ, że dla Modernizr 3, musisz wygenerować config używając https://modernizr.com/download?inputtypes-setclasses i skompilować javascript jak opisano na 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>
chrom wersja 50.0.2661.87 m nie obsługuje MM-DD-yy gdy przypisany zmiennej. Używa yy-mm-dd. IE i Firefox działają zgodnie z oczekiwaniami.
najlepiej łatwy i pracy rozwiązanie znalazłem to, pracując na następujących przeglądarkach
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>
Miałem z tym problemy, zachowując brytyjski format dd/mm/yyyy, początkowo użyłem odpowiedzi z adeneo https://stackoverflow.com/a/18021130/243905, ale to nie działało na safari dla mnie tak zmienione, o ile mogę powiedzieć, że działa na wszystkich - używając jquery-ui datepicker, walidacja 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;
}
}
Jakiego rodzaju kontroli używasz Datepicker? może JQuery UI byłby idealny? – Sebastien
Należy pamiętać, że jeśli nie polegasz już na jQueryUI za coś, w tym jego olbrzymia waga tylko po to, aby podać datę wejścia, nie powinna być domyślną decyzją. – jfmatt
Kompletny przykład znajduje się na stronie http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/ – koppor