Question

在ASP.NET MVC 5项目中，如何向jquery ui日期选择器窗口小部件添加html title属性？我已经尝试将它直接添加到HTML元素并使用JQuery。我也尝试过使用以下答案之一的.prop。

来自索引页面的HTML

<input class="form-control" type="text" id="datepicker1" title="Enter Date"/> 
<input class="form-control" type="text" id="datepicker2"/>    
<input class="btn" id="sbmtCustomDates" type="submit" value="Submit" />

来自_Layoyut.cshtml的Jquery

$("#datepicker1").attr("title", "Enter Start Date");
$("#datepicker2").attr("title", "Enter End Date");

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body id="bgrnd">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink(" EDI", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "Home" ? "active" : "")">
                    @Html.ActionLink("Home", "Index", "Home")</li>
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "Error_Summaries" ? "active" : "")">
                    @Html.ActionLink("BOL-Errors", "Index", "Error_Summaries")</li>
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "web_BOL_Summary_TMS" ? "active" : "")">
                    @Html.ActionLink("BOL-", "Index", "web_BOL_Summary_TMS")</li>
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "web_BOL_Summary_Ext" ? "active" : "")">
                    @Html.ActionLink("BOL-Partners", "Index", "web_BOL_Summary_Ext")</li>
                    <li class="@(ViewContext.RouteData.Values["Controller"].ToString() == "Utilities" ? "active" : "")">
                    @Html.ActionLink("Utilities", "Index", "Utilities")</li>
                </ul>
                <p class="nav navbar-text navbar-right">@User.Identity.Name</p>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Company Name</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/jqueryuicss")
    @RenderSection("scripts", required: false)

    @*Datepicker for BOL- Page*@
    @if (ViewContext.RouteData.Values["Controller"].ToString() == "web_BOL_Summary_TMS")
    {
        <script>
            $(function ()
            {
                $('#datepicker1').prop('title', 'Enter Start Date');
                $("#datepicker2").prop("title", "Enter End Date");
                //$("#datepicker1").datepicker({});
                //$("#datepicker2").datepicker({});

            });

        </script>
    }

    @*Background picture for Home Page*@
    @if (ViewContext.RouteData.Values["Controller"].ToString() == "Home")
    { <script>document.getElementById("bgrnd").className+="bgrnd"</script>
    }

</body>
</html>

的index.html

@{
    ViewBag.Title = "EDI_";  

}
    <div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <h2>Bill of Ladings from  TMS</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 text-center"></div>
        <div class="col-md-4 text-center">
            <ul class="list-group">
                <li class="list-group-item ">
                    <p class="h4">PD5200 Truck Loads Report</p>

                        @Html.ActionLink("This Week", "pd5200", "web_BOL_Summary_TMS", new { week = 1 }, null) |
                        @Html.ActionLink("Last Week", "pd5200", "web_BOL_Summary_TMS", new { week = 0 }, null) <br /> 
                    <div class="h5">Enter Dates</div>                     
                    <div class="form-group-sm form-horizontal">                        
                        @using (Html.BeginForm("pd5200", "web_BOL_Summary_TMS", FormMethod.Post))                        {   
                            <input class="form-control" type="text" id="datepicker1" title="Enter Date"/> <input class="form-control" type="text" id="datepicker2"/>
                            <input class="btn" id="sbmtCustomDates" type="submit" value="Submit" />
                        }
                   </div>
</li>
                <li class="list-group-item">
                    <p class="h4">View  BOL</p>
                    <div class="form-group-sm form-horizontal">
                        @using (Html.BeginForm("ViewBol", "web_BOL_Summary_TMS"))
                        {
                            <input class="form-control" name="bolnumber" type="number" placeholder="Enter  BOL Number" title="Enter  BOL Number" />
                            <input id="btnViewBol" class="btn" type="submit" value="View" required="required" />
                        }
                    </div>
                </li>
                <li class="list-group-item">
                    <p class="h4">View Midnight Cut-offs</p>
                    @using (Html.BeginForm("ViewMidnightCutOffs", "web_BOL_Summary_TMS"))
                    {
                        DateTime currentDate = DateTime.Today;
                        for (int i = 1; i <= 3; i++)
                        {
                            @Html.ActionLink(currentDate.AddDays(-i).ToShortDateString(), "ViewMidnightCutOffs", "web_BOL_Summary_TMS", new { dateToCheck = currentDate.AddDays(-i) }, null)

                            if (i < 4)
                            {
                                <span> | </span>
                            }
                        }


                    }
                </li>
                <li class="list-group-item">
                    <p class="h4">View Missing BOLS</p>
                    @using (Html.BeginForm("ViewMidnightCutOffs", "web_BOL_Summary_TMS"))
                    {
                        DateTime currentDate = DateTime.Today;
                        for (int i = 1; i <= 3; i++)
                        {
                            @Html.ActionLink(currentDate.AddDays(-i).ToShortDateString(), "ViewMidnightCutOffs", "web_BOL_Summary_TMS", new { dateToCheck = currentDate.AddDays(-i) }, null)

                            if (i < 4)
                            {
                                <span> | </span>
                            }
                        }

                        @Html.ActionLink("Custom", "pd5200", "web_BOL_Summary_TMS", new { week = 1 }, null) <span> | </span>
                        @Html.ActionLink("All", "pd5200", "web_BOL_Summary_TMS", new { week = 1 }, null)
                    }
                </li>
            </ul>
        </div>
        <div class="col-md-4 text-center">            
        </div>
    </div>
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

$('#id').prop('title','your new title');

您也可以使用此属性。

Answer 2

如果您正在为datepicker输入字段寻找占位符，则只需添加占位符属性：placeholder="Enter start date"

如果您要在日期选择工具的顶部添加文字，可以实施以下内容：

$('#testID').datepicker().bind('click keyup', function() {
    if ($('#ui-datepicker-div:first').is('div'))
        $('#ui-datepicker-div').prepend('<p>Enter Start Date</p>');
});

如何将html title属性添加到jquery ui日期选择器小部件？

2 个答案: