web-dev-qa-db-fra.com

Le sélecteur de date HTML5 ne s'affiche pas sur Safari

Après avoir utilisé le sélecteur de date jQuery, j'ai maintenant converti certains des champs de date dans les formulaires de mon site Web en sélecteur de date HTML5.

Sur la documentation, il indique que Safari est pris en charge: cependant, il n'affiche actuellement qu'un champ de texte (alors que Chrome et d'autres navigateurs affichent correctement le sélecteur de date).

echo "<input type='date' name='Date' min='$todaymin'>";

(la même chose s'applique sans l'attribut min)

Ceci est ma ligne de code - est-ce que je fais quelque chose de mal ou est-ce que je ne lis pas la documentation correctement et elle n'est PAS prise en charge dans Safari?

Merci!

html5safari
25
Will WP

Safari n'inclut pas de sélecteur de date natif pour sa version de bureau (bien qu'il le fasse pour iOS). Par ailleurs, IE non plus. C'est très frustrant car cela pourrait faire gagner beaucoup de temps aux développeurs s'ils le faisaient.

Ceci est un lien utile pour suivre le support de celui-ci: http://caniuse.com/#feat=input-datetime

42
kevin

Tiré de http://www.javascriptkit.com/javatutors/createelementcheck2.shtml

Avec jQuery et jQuery UI, vous pouvez créer un sélecteur de date croisé qui n'apparaît que lorsque le navigateur ne le prend pas en charge de manière native. Si vous avez déjà jQuery dans votre projet, faites simplement:

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.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n') 
}        
if (datefield.type != "date"){ //if browser doesn't support input type="date", initialize date picker widget:
    $(document).ready(function() {
        $('#your-date').datepicker();
    }); 
}
6
drjorgepolanco

Bien qu'il n'y ait pas de sélecteur de date natif pour Safari (ou IE), une bonne solution consiste à ajouter un attribut placeholder à l'entrée de date. Cela informe Safari et IE les utilisateurs qui doivent formater la saisie de texte de secours (qui est yyyy-mm-dd).

L'espace réservé ne s'affiche pas sur les navigateurs prenant en charge type="date" afin que cette solution de contournement n'affecte pas les autres navigateurs.

par exemple. <input type="date" placeholder="yyyy-mm-dd" />

2
Finlay Percy