[英]Adding date picker to textbox
I need to pass two dates to my controller as a filter. 我需要将两个日期作为过滤器传递给我的控制器。 I have two text boxes in the View where I need the datepicker to pop up when clicked.
我在“视图”中有两个文本框,单击它们后需要弹出日期选择器。
I have tried many variants given on the net. 我尝试了网络上给出的许多变体。 I have tried using Bootstrap Datepicker and JqueryUI.
我尝试使用Bootstrap Datepicker和JqueryUI。 But both doesn't seem to give me any output
但是两者似乎都没有给我任何输出
<th>
@*<input class="date-picker" />
<input type="text" name="from" class="date-picker"/>*@
<p>
From : <input type="text" name="from" id="from"/>
<br />
To : <input type="text" name="to" id="to"/>
</p>
</th>
Scripts 剧本
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#from').datepicker();
$('#from').focus(function () {
$('#from').datepicker('show');
});
$('#from').click(function () {
$('#from').datepicker('show');
});
//$('#ui-datepicker-div').show();
$('#from').datepicker('show');
});
</script>
Is there any specific place where I should add these scripts. 有没有应该在其中添加这些脚本的特定位置。 Now i have added the scripts in the head.
现在,我已经在脚本中添加了脚本。 But I have already tried adding it after the body.
但是我已经尝试过将其添加到正文之后。 I have also added the following at the end of the layout.
我还在布局的末尾添加了以下内容。
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryajax")
@Scripts.Render("~/bundles/bootstrap") in the layout
Is there an issue with the order of the script files? 脚本文件的顺序是否有问题?
And my intellisense doesnt show datepicker instead shows datetimepicker.. But i have tried using both with no result. 而且我的intellisense不显示datepicker而是显示datetimepicker ..但是我尝试使用两者都没有结果。 Working with razor.
使用剃须刀。
I added datepicker to your page in this example: http://jsfiddle.net/zkLc8vpj/ 在此示例中,我向您的页面添加了日期选择器: http : //jsfiddle.net/zkLc8vpj/
And I am still trying to understand why did you use all those javascript code, u only need to: 而且我仍在尝试了解您为什么使用所有这些javascript代码,您只需要:
$(document).ready(function () {
$('#from, #to').datepicker();
});
So i have found that the issue is with the ordering of the script files. 所以我发现问题出在脚本文件的排序上。 this helped me find a solution.
这帮助我找到了解决方案。 I added the script files in the following order in the head of the html file
我在html文件的开头按以下顺序添加了脚本文件
@Styles.Render("~/Content/themes/base/css", "~/Content/css", "~/Content/datepicker3.css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/Content/bootstrap-datepicker.js")
and in the bundle config i added the following. 并在捆绑包配置中添加了以下内容。 The complete bundle file is added to avoid any confusion for a future reader
添加了完整的捆绑软件文件,以避免对以后的读者造成任何混乱
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Custom.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/core.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/.dialog.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/theme.css"));
}
I made no changes in the layout though. 我没有对布局进行任何更改。 And the answer has it how to call the date picker.
答案在于如何调用日期选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.