Вывод выбора HTML5 не отображается в Safari

Ранее использовав jQuery date picker, я теперь преобразовал некоторые поля даты в формы на своем веб-сайте в блок выбора даты HTML5.

В документации говорится, что Safari поддерживается: однако в настоящее время он отображает только текстовое поле (в то время как Chrome и другие браузеры правильно отображают дату).

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

(то же самое применяется без атрибута min)

Это моя строка кода - я делаю что-то неправильно или я просто неправильно читаю документацию и не поддерживается в Safari?

Спасибо!

Ответ 1

Safari не включает в себя родной datepicker для своей настольной версии (хотя это делает для iOS). Кстати, и IE. Это очень расстраивает, так как это может спасти разработчиков много времени, если они это сделают.

Это полезная ссылка для поддержки отслеживания: http://caniuse.com/#feat=input-datetime

Ответ 2

Взято с http://www.javascriptkit.com/javatutors/createelementcheck2.shtml

С помощью jQuery и jQuery UI вы можете создать кроссбраузерный указатель даты, который появляется только тогда, когда браузер не поддерживает его изначально. Если у вас уже есть jQuery в вашем проекте, просто выполните:

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();
    }); 
}

Ответ 3

Хотя в Safari (или IE) нет встроенного средства выбора даты, довольно неплохой обходной путь - добавить атрибут- placeholder для ввода даты. Это информирует пользователей Safari и IE о том, каким форматом должен быть запасной текстовый ввод (это yyyy-mm-dd).

Заполнитель не отображается в браузерах, которые поддерживают type="date" поэтому этот обходной путь не повлияет на другие браузеры.

например, <input type="date" placeholder="yyyy-mm-dd"/>