Input type=“date” not working in certain browsers

问题

I've got an ASP.NET web forms page where I'm setting the value of an input (type="date") in code-behind and it displays correctly in IE 11 and Firefox 51, but in Chrome 56 and Opera 43, it merely displays the mm/dd/yyyy placeholder. Below is my code.

The 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>

And the code-behind...

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

回答1:

Before answering your question. There are two types input date in asp.net, server side and client side.
On the client side the input date like this:

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

On the server side the input date is like this:

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

You can use both of them for your purpose but before that, you need set your time exactly input date want it.
input date only accepts these format types yyyy-MM-dd or dd-MM-yyyy.
you must choose - as date separators and certainly 4 digits on the year, two digits on month and two digits on days.
to clear my answer I wrote my code here:

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

Or in custom dates, you can use this method:

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

Now you can set input value like this:
On client side :

datePicker.Value = today;

On server side:
datePicker.Text= today;

来源：https://stackoverflow.com/questions/42451770/input-type-date-not-working-in-certain-browsers

标签

ASP.NET

html5

webforms

browser-support