[英]Adding date picker to textbox
我需要將兩個日期作為過濾器傳遞給我的控制器。 我在“視圖”中有兩個文本框,單擊它們后需要彈出日期選擇器。
我嘗試了網絡上給出的許多變體。 我嘗試使用Bootstrap Datepicker和JqueryUI。 但是兩者似乎都沒有給我任何輸出
<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>
劇本
<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>
有沒有應該在其中添加這些腳本的特定位置。 現在,我已經在腳本中添加了腳本。 但是我已經嘗試過將其添加到正文之后。 我還在布局的末尾添加了以下內容。
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryajax")
@Scripts.Render("~/bundles/bootstrap") in the layout
腳本文件的順序是否有問題?
而且我的intellisense不顯示datepicker而是顯示datetimepicker ..但是我嘗試使用兩者都沒有結果。 使用剃須刀。
在此示例中,我向您的頁面添加了日期選擇器: http : //jsfiddle.net/zkLc8vpj/
而且我仍在嘗試了解您為什么使用所有這些javascript代碼,您只需要:
$(document).ready(function () {
$('#from, #to').datepicker();
});
所以我發現問題出在腳本文件的排序上。 這幫助我找到了解決方案。 我在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")
並在捆綁包配置中添加了以下內容。 添加了完整的捆綁軟件文件,以避免對以后的讀者造成任何混亂
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"));
}
我沒有對布局進行任何更改。 答案在於如何調用日期選擇器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.