使用Jquery设置TextBox值,其中TextMode =“date”属性设置

时间:2014-07-07 11:01:23

标签: jquery validation date textbox

我有这个文本框,textmode属性设置为date:

<asp:TextBox ID="dateBox" runat="server" TextMode="Date"></asp:TextBox>

我有一个日期字符串,我使用AJAX从我的XML文件检索到我的JS函数:

$docDate = $(this).attr("date");

现在我已经验证了输入XML文件的日期,所以我只想将我的文本框值设置为我从XML文件获得的日期,现在是$ docDate。

我该怎么做?我尝试过使用.val($ docDate)函数和其他东西而且它对我不起作用。

提前致谢!

顺便说一下,textBox看起来像这样: textbox set to date mode

根据要求,这是整个代码。

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="shortcut icon" href="Images/site_icon.ico" />
    <title>מבואת המזכירות</title>
    <link href="Style/CPStyle.css" rel="stylesheet" />
    <link href="Style/RecordsStyle.css" rel="stylesheet" />
    <script src="Scripts/Jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#idBox").change(function () {
                selectedID = $('#idBox').val();
                // מציאת נתוני הרשומה המבוקשת באמצעות אג'קס
                $.ajax({
                    type: "GET",
                    url: "LobbyFiles.xml",
                    dataType: "xml",
                    success: xmlParser
                });
            });
            function formatDateForInput(date) {
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var day = ("0" + date.getDate()).slice(-2);
                return String.format("{0}-{1}-{2}", year, month, day);
            }
            function xmlParser(xml) {
                // מציאת מספר רשומה מבוקש
                $docId = $('#idBox').val();
                // אתחול משתנים
                $docName = "";
                $docType = "";
                $docDate = "";
                $docLink = "";
                $docAuthor = "";
                $docPlce = "";

                foundNode = false;
                // מציאת הרשומה בעלת מספר רשומה המבוקש
                $(xml).find("link").each(function () {

                    $nodeId = $(this).attr("id");
                    if ($nodeId == $docId) {
                        foundNode = true;
                        // הכנסת ערכי הרשומה למשתנים המאותחלים
                        $docName = $(this).text();
                        $docType = $(this).attr("type");
                        $docAuthor = $(this).attr("author");
                        $docDate = $(this).attr("date");
                        $docLink = $(this).attr("url");
                        $docPlce = $(this).attr("place");
                        return false;
                    }
                });
                // לאחר הלולאה אם לא נמצאה רשומה בעלת מספר זה, יחזיר את הערך לאפס ויודיע למשתמש
                // במידה ויימצא - ייקח את כל הערכים הנמצאים במשתנים ויכניסם לטופס
                if (foundNode) {
                    $("#DocNameBox").val($docName);
                    $("#urlBox").val($docLink);
                    $("#placeBox").val($docPlce);
                    $("#authorNameBox").val($docAuthor);

                    switch ($docType) {
                        case "protocol":
                            $("#typeList").val("protocol");
                            break;
                        case "schedule":
                            $("#typeList").val("schedule");
                            break;
                        case "olympus":
                            $("#typeList").val("olympus");
                            break;
                        case "formalPaper":
                            $("#typeList").val("formalPaper");
                            break;
                    }

                    var id = "<%= dateBox.ClientID %>";
                    alert(id);
                    $("#" + id).val(formatDateForInput($docDate));
                }
                else {
                    $("#idBox").val("0");
                    alert("מספר רשומה מבוקש לא נמצא!");
                }
            }
            // פונקציה זו מקבלת את נתוני הרשומה ומטמיעה אותם בפקדי הדף
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div> <a href="Records.aspx"><img class="linkIcon" src="Images/back.ico" /></a>
        <a href="Home.html"> <img id="homeIcon" src="Images/home.ico" class="linkIcon" /></a>
            <div id="main_wrapper">
                <h1>לוח ניהול המבואה</h1>
                <h5 id="details">
                    ניתן להוסיף רשומה חדשה למבואה - או לחילופין לעדכן רשומה קיימת. 
                     על מנת להוסיף רשומה חדשה - השאר את מספר המסמך על 0. 
                     כדי לעדכן רשומה קיימת - הכנס את מספר הרשומה שברצונך לעדכן.
                            </h5>              
            <asp:Label ID="status" runat="server" Text=""></asp:Label>
            <table>
                <tr>
                    <td>
                        מספר מסמך:
                    </td>
                    <td>
                        <asp:TextBox ID="idBox" runat="server" TextMode="Number" Text="0"></asp:TextBox>
                    </td>
                </tr>
                                <tr>
                    <td>
                        שם המסמך:
                    </td>
                    <td>
                        <asp:TextBox ID="DocNameBox" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        סוג המסמך:
                    </td>
                    <td>
                        <asp:DropDownList ID="typeList" runat="server">
                            <asp:ListItem Text="מסמך רשמי" Value="formalPaper" Enabled="true"></asp:ListItem>
                            <asp:ListItem Text="פרוטוקול/סיכום ישיבה" Value="protocol" Enabled="true"></asp:ListItem>
                            <asp:ListItem Text="מרכז תנועה/עולימפוס" Value="olympus" Enabled="true"></asp:ListItem>
                            <asp:ListItem Text="לוח זמנים" Value="schedule" Enabled="true"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>

                    <td>
                        קישור:
                    </td>
                    <td>
                        <asp:TextBox ID="urlBox" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>נכתב ע"י:</td>
                    <td>
                        <asp:TextBox ID="authorNameBox" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>מקום כתיבה (להשאיר ריק אם לא במחנה):</td>
                    <td>
                        <asp:TextBox ID="placeBox" runat="server"></asp:TextBox></td>
                </tr>
                <tr>
                    <td>בתאריך:</td>
                    <td>
                        <asp:TextBox ID="dateBox" runat="server" TextMode="Date"></asp:TextBox></td>
                </tr>
            </table>
            <asp:Button ID="Button1" runat="server" Text="הוסף נתונים לקובץ XML" OnClick="Button1_Click" />
        </div>
    </div>
    </form>
</body>
</html>

2 个答案:

答案 0 :(得分:2)

确实需要一种特定的格式 - 我自己也完全做了同样的事情。这是我用过的......

function formatDateForInput(date) {
    var year = date.getFullYear();
    var month = ("0" + (date.getMonth() + 1)).slice(-2);
    var day = ("0" + date.getDate()).slice(-2);
    return String.format("{0}-{1}-{2}", year, month, day);
}

该功能只会强制日期格式正确 yyyy-mm-dd

然后你可以将它应用到像这样的元素......

$("[id$=dateBox]").val(formatDateForInput($docDate));

以下是一个工作和失败的示例,具有不同的日期格式......

http://jsfiddle.net/CMxGR/1/

答案 1 :(得分:1)

您需要使用clientID来获取确切的元素。然后,只有您可以使用.val("new value")来设置值。试试这段代码,

var id="<%= dateBox.ClientID %>";
$("#"+id).val("new date here");