简单的方法实现日期/时间选择器
本文关键字:时间 选择器 日期 实现 方法 简单 | 更新日期: 2023-09-27 18:06:31
有人知道在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>
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
更改为新属性名称
我使用AjaxControlToolkit库中的日历控件,非常好。你有一切如何实现它在这个链接:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Calendar/Calendar.aspx使用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