jQuery 单击文本框时如何添加DatePicker？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19634588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add DatePicker when i click on text box?
提问by Shu
In my MVC4 razor engine, i need to pick date from text box its my View
在我的 MVC4 剃刀引擎中，我需要从文本框中选择日期作为我的视图
<tr>
<td>Start Date</td>
<td>@Html.TextBox("RateListStartDate")</td>
</tr>
<tr>
<td>End Date</td>
<td>@Html.TextBox("RateListEndDate")</td>
</tr>
When i click on text box of start date or end date, it should display calendar, Any links/code/suggestions ?
当我点击开始日期或结束日期的文本框时，它应该显示日历，任何链接/代码/建议？
回答by Marco
Since you use MVC, jQuery "should" already referenced in your layout page. You will also need the jqueryUI.
由于您使用 MVC，jQuery“应该”已经在您的布局页面中引用。您还需要jqueryUI。
If the datepicker code is throwing erros at you, add the following 2 lines, to your view or your layouts page:
如果日期选择器代码向您抛出错误，请将以下两行添加到您的视图或布局页面：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Then you need to declare the elements, which should be get the datepicker functionality.
然后你需要声明元素，这应该是获取日期选择器功能。
$(document).ready(function(){
$(".getdate").each(function() {
$(this).datepicker();
});
});
and edit your Html.TextBoxFor() accordingly:
并相应地编辑您的 Html.TextBoxFor()：
@Html.TextBox("RateListStartDate", new {@class="getdate"})
This should do the trick. Kind regards
这应该可以解决问题。亲切的问候
回答by Nullify
<!doctype html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -100, maxDate: "+0D" });
$("#datepicker").datepicker("setDate",new Date());
$( "#datepicker" ).datepicker( "option", "dateFormat", "dd/mm/yy");
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
回答by Saritha.S.R
You can use jquery datepicker. DATEPICKER DEMO
您可以使用 jquery 日期选择器。 日期选择器演示
$(document).ready(function(){
$(".datepicker").each(function() {
$(this).datepicker();
});
});
回答by Aritra B
$(document).ready(function () {
$('#txtBoxId').datepicker();
});
refer this to your Layout
将此参考您的布局
@Scripts.Render("~/bundles/jqueryui")
回答by Minal Raniga
<script>
$(function()
{
$("#date").datepicker();
$("#date").datepicker
({
dateFormat: "dd-mm-yyyy"
});
});
</script>
<tr>
<td>Start Date</td>
<div class="form-group">
@Html.LabelFor(model => model.date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.date, new { htmlAttributes = new { @class = "date" } })
@Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
</div>
</div>
</tr>
<tr>
<td>End Date</td>
<div class="form-group">
@Html.LabelFor(model => model.date, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.date, new { htmlAttributes = new { @class = "date" } })
@Html.ValidationMessageFor(model => model.date, "", new { @class = "text-danger" })
</div>
</div>
</tr>
