输入类型=“日期”在某些浏览器中不起作用

Posted 2023-03-10

技术标签:

【中文标题】输入类型=“日期”在某些浏览器中不起作用【英文标题】：Input type="date" not working in certain browsers 【发布时间】：2017-07-16 01:27:15 【问题描述】：

我有一个 ASP.NET 网页表单页面，在其中我在代码隐藏中设置输入 (type="date") 的值，它在 IE 11 和 Firefox 51 中正确显示，但在 Chrome 56 中和 Opera 43，它只显示 mm/dd/yyyy 占位符。下面是我的代码。

ASPX...

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="../Content/formValidation.min.css" />

    <script type="text/javascript" src="../Scripts/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery-ui-1.11.4.min.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="//momentjs.com/downloads/moment.min.js"></script>
    <script type="text/javascript" src="../Scripts/formValidation.popular.js"></script>
    <script type="text/javascript" src="../Scripts/framework/bootstrap.js"></script>
    <script type="text/javascript" src="../Scripts/bootbox.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
        <div class="col-xs-1">
            <input type="date" class="form-control" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" runat="server" />
        </div>
    </div>
    </form>
</body>

还有代码隐藏...

        protected void Page_Load(object sender, EventArgs e)
    
        this.txtChildDOB1.Value = new DateTime(2002, 3, 19).ToShortDateString();

【问题讨论】：

对此您无能为力。较旧的浏览器无法识别这些字段类型，并将其显示为普通的type=text 字段。如果您想确保所有用户看到相同的内容，最好使用 jQuery 插件。但这些都不是旧浏览器。它们都是最新版本。也许将文档类型设置为 HTML 5 standard <!DOCTYPE html> 会有所帮助。已被使用。见***.com/a/57165475/475997 【参考方案1】：

在回答您的问题之前。 asp.net中有两种输入日期，server side和client side。在客户端，输入日期如下：

<input type="date" id="datePicker" class="form-control" runat="server" />

在服务器端输入日期是这样的：

<asp:TextBox TextMode="Date" ID="datePicker" class="form-control" runat="server" ></asp:TextBox>

您可以将它们都用于您的目的，但在此之前，您需要准确设置您的时间输入日期。输入日期只接受yyyy-MM-dd或dd-MM-yyyy这些格式类型。您必须选择 - 作为日期分隔符，并且肯定选择 4 位年份、2 位月份和 2 位日期。为了清除我的答案，我在这里写了我的代码：

string makeDate = DateTime.Now.ToString("yyyy") +
            "-" + DateTime.Now.ToString("MM") +
            "-" + DateTime.Now.ToString("dd");

或者在自定义日期，你可以使用这个方法：

public static string makeDate8(DateTime dt)

    string date = dt.Year.ToString().PadLeft(4,'0') + "-" + dt.Month.ToString().PadLeft(2, '0') + "-" + dt.Day.ToString().PadLeft(2, '0');
    return date;

现在您可以像这样设置输入值：在客户端：

datePicker.Value = today;

服务器端：datePicker.Text= today;

【讨论】：

以上是关于输入类型=“日期”在某些浏览器中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

输入类型='文件'在 Instagram 应用内浏览器中不起作用

Html 5 [input type=Date] 控件，最大日期在 iPhone/Ipad 中不起作用

多个 HTML 输入类型文件在 IE 中不起作用

日期输入在 Firefox 中不起作用

Bootstrap Datepicker 在 chrome 中不起作用

为啥具有 ISO 8601 值的日期时间字段在 iOS webkit 浏览器中不起作用？