实现日期/时间选择器的简便方法

时间:2013-03-28 13:12:23

标签: c# asp.net-mvc-3 razor twitter-bootstrap

任何人都知道在bootstrap / razor 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>

3 个答案:

答案 0 :(得分:1)

jQuery UI Datepicker

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更改为新的属性名称

答案 1 :(得分:0)

我使用AjaxControlToolkit库中的Calendar控件非常好。您可以在此链接中了解如何实现它:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx

答案 2 :(得分:0)

使用MVC,您可能需要查看以下帖子。 无论模型中的字段名称如何,所有日期或日期/时间字段都可以正常工作。

http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx