2013-03-28 85 views
0

任何人都知道在bootstrap /剃刀html代碼中實現日期/時間選擇器的最簡單方法是什麼?我目前有程序運行良好直接輸入爲:簡單的方法來實現日期/時間選擇器

<div class="editor-label"> 
     @Html.LabelFor(model => model.date) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.date) 
     @Html.ValidationMessageFor(model => model.date) 
    </div> 

但是會喜歡日期/時間選擇器彈出時選擇日期?有什麼建議麼?

簡單是關鍵,因爲代碼是一些基本的學生看到的。

編輯,但不工作:

我的新頭,仍然沒有工作:

<meta charset="utf-8"> 
<title>App Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet"> 
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Content/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#date").datepicker(); 
    }); 
</script> 
+0

看到我更新帖子,JavaScript和jQuery代碼,您需要在節去。 – Rob

+0

唉,仍然沒有工作,已經移動了我的頭(如上)。有任何想法嗎? – NickP

+0

你使用的是舊版本的jQuery,你不包括jQuery UI。從我的代碼複製並粘貼,並擺脫你的jQuery參考。另外請務必添加jquery-ui.css參考。 – Rob

回答

1

jQuery UI的日期選擇器

http://jqueryui.com/datepicker/

<head> 
<link rel="stylesheet" type="text/css" media="screen" href="http://code.jquery.com/ui/1.10.2/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.2/jquery-ui.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#date").datepicker(); 
    }); 
</script> 
</head> 

更新:

#date指名在你的模型中。如果您需要添加其他日期選擇器,請確保將#date更改爲新的屬性名稱

+0

Lol,你打敗了我。 – IyaTaisho

+0

我以前從未使用過JQuery,它將它添加到HTML中簡單嗎?還是需要插件等安裝? – NickP

+0

在網站上瀏覽一下。您需要在HTML中添加對jquery和jquery ui的引用。 www.jquery.com也會有一些教程。 – Rob