Question

在我的asp.net页面中，我有一个文本框，用户可以在其中输入日期。为了便于使用，我希望它在将年份与月份和月份分开时自动设置“ - ”，而无需用户自己编写。因此，当用户写道：20170911时，它将自动格式化为2017-09-11。

我已尝试使用此JavaScript代码：

if (document.getElementById('<%=TextBox1.ClientID %>').value.length == 4) {
    document.getElementById('<%=TextBox1.ClientID %>').value = document.getElementById('<%=TextBox1.ClientID %>').value + "-";
}

这将在第4个数字之后加上' - '，但是在按下第5个数字之后。然而，我正在寻找的是在按下第4个数字之后。有没有办法在asp.net中这样做？我以前在多个网站上都看过它，所以技术上应该可以，不知何故。

提前致谢！

Answer 1

尝试下面的代码段。键入时，会自动插入日期分隔符。基本上，您需要订阅在每次击键结束时触发的onkeyup事件。

我假设您的日期分隔符是短划线字符，即-。

＆＃13;

var  emt = document.getElementById("txtDate");
emt.onkeyup =formatDate;

function formatDate(event)
{
    if (event.keyCode == 8) {
                    return;
    }
    var dateValue = this.value;
    if (dateValue.match(/^\d{4}$/) !== null) {
        this.value = dateValue + '-';
    } else if (dateValue.match(/^\d{4}\-\d{2}$/) !== null) {
        this.value = dateValue + '-';
    } else if (dateValue.match(/^\d{5}$/)) {
          this.value = dateValue.substring(0, 4) + "-" + dateValue.substring(4);
    } else if (dateValue.match(/^\d{4}\-\d{3}$/)) {
         this.value = dateValue.substring(0, 7) + "-" + dateValue.substring(7);
  }

}

＆＃13;

<input type="text" id="txtDate" />

＆＃13;

如果您使用的是ASP.Net文本框，请使用如下代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DateBox.aspx.cs" Inherits="DateBox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" onkeyup="formatDate(this)"></asp:TextBox>
        </div>
        <script type="text/javascript">

            function formatDate(event) {
            if (event.keyCode == 8) {
                return;
            }
            var txtBox = document.getElementById("<%=TextBox1.ClientID%>");
            var dateValue = txtBox.value;
            if (dateValue.match(/^\d{4}$/) !== null) {
                txtBox.value = dateValue + '-';
            } else if (dateValue.match(/^\d{4}\-\d{2}$/) !== null) {
                txtBox.value = dateValue + '-';
            }
            else if (dateValue.match(/^\d{5}$/)) {
                txtBox.value = dateValue.substring(0, 4) + "-" + dateValue.substring(4);
            }
            else if (dateValue.match(/^\d{4}\-\d{3}$/)) {
                txtBox.value = dateValue.substring(0, 7) + "-" + dateValue.substring(7);
            }
         }
        </script>
    </form>
</body>
</html>

另一种方法与第一种方法类似，如下所示，但它使用ASP.Net文本框。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DateBox.aspx.cs" Inherits="DateBox" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </div>
            <script type="text/javascript">
                function pageLoad() {
                    var txtBox = document.getElementById("<%=TextBox1.ClientID%>");
                    txtBox.onkeyup = formatDate;
                }
                function formatDate(event) {
                if (event.keyCode == 8) {
                    return;
                }
                var txtBox = document.getElementById("<%=TextBox1.ClientID%>");
                var dateValue = txtBox.value;
                if (dateValue.match(/^\d{4}$/) !== null) {
                    txtBox.value = dateValue + '-';
                } else if (dateValue.match(/^\d{4}\-\d{2}$/) !== null) {
                    txtBox.value = dateValue + '-';
                }
                else if (dateValue.match(/^\d{5}$/)) {
                    txtBox.value = dateValue.substring(0, 4) + "-" + dateValue.substring(4);
                }
                else if (dateValue.match(/^\d{4}\-\d{3}$/)) {
                    txtBox.value = dateValue.substring(0, 7) + "-" + dateValue.substring(7);
                }
             }
            </script>
        </form>
    </body>
    </html>

在asp.net中的运行时期间将数字格式化为文本框中的日期

1 个答案: