Проверка того, совместим ли браузер с HTML5, прежде чем принимать решение о типе поля ввода

Question

Скажем, у меня есть некоторый код JavaScript, который выглядит следующим образом:

 function CheckDateField()
    {
    if (!Modernizr.inputtypes.date) {
        $(function () {
            $(".datefield").datepicker();
        });
    }
    }

Это проверяет, совместима ли версия браузера с HTML 5, и использует поле даты, если это так;еще текстовое поле.

В моем представлении .NET Core есть поле наподобие этого:

<div class="form-group">
                <label asp-for="DOB" class="control-label"></label>
                @*@Html.TextBox("datepicker")*@
                @Html.TextBox("datepicker", null, new { @readonly = "readonly" })

Как использовать это поле в JavaScript?Я пробовал это:

<label asp-for="DOB" class="control-label" onload="CheckDateField()"></label>

Было бы хорошо поместить JavaScript прямо в уровне, если это возможно.Я потратил два часа на поиски в Google и попробовал несколько вещей, которые не сработали.

Answer 1

Вы можете упростить свой код, просто проверив функцию HTML5 input date, когда страница загружена и действует соответствующим образом.Кроме того, селектор, который вы используете для захвата элемента, не будет работать, так как input не имеет установленного класса datefield.

Ваша сгенерированная разметка будет выглядеть примерно так:

<label for="dob">Date of birth</label>
<input type="date" name="dob" id="dob" class="datefield">

Обратите внимание на отсутствие обработчика событий onload и на установку input type в date для начала.

Ваш бит сценария для обработки datepicker должен бытьпримерно так:

// When the document is ready.
$(function () {
    // If input type date isn't supported.
    if (!Modernizr.inputtypes.date) {
        var el = $(".datefield");

        // In a single call (chained) set the input type to text
        // and attach the datepicker.
        el.prop("type", "text").datepicker();
    }
});

Демо