How to add html title attribute to jquery ui date picker widget?
Question
In an ASP.NET MVC 5 project,How do I add a html title attribute to jquery ui date picker widget? I have tried adding it directly to the HTML element and also using JQuery. I have also tried using .prop from one of the answers below.
HTML from the Index page
<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" />
Jquery from the _Layoyut.cshtml
$("#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>© @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")
}
2 answers
solution1
0 2017-11-16 16:27:21
$('#id').prop('title','your new title');
您也可以使用此属性。
solution2
0 ACCPTED 2017-11-16 18:37:18
If you are looking for a placeholder on for the datepicker input field you can just add the placeholder attribute: placeholder="Enter start date"
If you are looking to add text at the top of your datepicker you can implement the following:
$('#testID').datepicker().bind('click keyup', function() {
if ($('#ui-datepicker-div:first').is('div'))
$('#ui-datepicker-div').prepend('<p>Enter Start Date</p>');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery UI Basics: How to use date picker widget?
How to validate jQuery UI Date Picker “From Date” to “To Date”
jQuery UI date picker does not add button to page
How to add date picker jquery plugins to bootstrab?
how to set current date using jquery ui date picker?
Jquery Ui Date Picker Not Working?
Jquery Ui date time picker
JQuery UI Date Picker Focus
Jquery UI date picker is not working
How to add html color picker using jquery?
Related Tags