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放入lavel。我花了两个小时在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();
    }
});

Demo

在确定输入字段的类型之前，请检查浏览器是否兼容HTML5

1 个答案: