如何在 ASP 形式的 MVC Core 上使用日期选择器
How to use datepicker on MVC Core in ASP form
在我的 MVC 核心 Web 应用程序中,我没有在所有浏览器上看到日期选择器,所以我想使用 jQuery 日期选择器。
目前在我的模型中有:
[Required]
[Display(Name = "RegisterDate")]
//[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd hh:mm:ss}")]
public override DateTime RegisterDate { get; set; }
在我的 .html 文件中:(这些只是一些代码)
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
...
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>
我的问题是如何让 jquery 日期选择器处理这个?
由于对项目的某些依赖性,我不想下载任何 NuGet 包。
我更喜欢使用 CDN。
在此先感谢您的帮助。
您需要在输入字段中添加 datepicker
id:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
...
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" id="datepicker" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")"/>
<span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>
对于asp.net核心,如果使用默认的MVC模板并且没有禁用Layout,则需要添加@section Scripts{}
.
参考:
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.1#sections
还要确保输入的类型应该是文本以避免Html5默认日期选择器:
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" id="datepicker" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
@section Scripts
{
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
}
结果(我用的是GoogleChrome):
更新:
如果你想使用日期时间选择器,这里有一个像下面这样的工作演示:
@model Test
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<div class='input-group date' id='datepicker'>
<input asp-for="RegisterDate" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
@section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script>
$(function () {
$('#datepicker').datetimepicker();
});
</script>
}
结果:
#datepicker 指出要添加日期选择器功能的文本框的 ID,但我在您的文本框上的任何地方都看不到这个 ID。这就是它不起作用的原因。
也不需要将值设置到文本框,因为在你 select 日期之后它会自动将 selected 日期设置到文本框。
注意:请运行代码段
$(function() {
$("#datepicker").datepicker();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" id="datepicker" class="form-control" placeholder="select date" />
<span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>
在我的 MVC 核心 Web 应用程序中,我没有在所有浏览器上看到日期选择器,所以我想使用 jQuery 日期选择器。
目前在我的模型中有:
[Required]
[Display(Name = "RegisterDate")]
//[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd hh:mm:ss}")]
public override DateTime RegisterDate { get; set; }
在我的 .html 文件中:(这些只是一些代码)
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
...
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>
我的问题是如何让 jquery 日期选择器处理这个? 由于对项目的某些依赖性,我不想下载任何 NuGet 包。 我更喜欢使用 CDN。
在此先感谢您的帮助。
您需要在输入字段中添加 datepicker
id:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
...
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" id="datepicker" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")"/>
<span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>
对于asp.net核心,如果使用默认的MVC模板并且没有禁用Layout,则需要添加@section Scripts{}
.
参考:
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/layout?view=aspnetcore-3.1#sections
还要确保输入的类型应该是文本以避免Html5默认日期选择器:
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" id="datepicker" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
@section Scripts
{
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
}
结果(我用的是GoogleChrome):
更新:
如果你想使用日期时间选择器,这里有一个像下面这样的工作演示:
@model Test
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<div class='input-group date' id='datepicker'>
<input asp-for="RegisterDate" type="text" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<span asp-validation-for="RegisterDate" class="text-danger"></span>
</div>
@section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script>
$(function () {
$('#datepicker').datetimepicker();
});
</script>
}
结果:
#datepicker 指出要添加日期选择器功能的文本框的 ID,但我在您的文本框上的任何地方都看不到这个 ID。这就是它不起作用的原因。
也不需要将值设置到文本框,因为在你 select 日期之后它会自动将 selected 日期设置到文本框。
注意:请运行代码段
$(function() {
$("#datepicker").datepicker();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group">
<label asp-for="RegisterDate" class="control-label"></label>
<input asp-for="RegisterDate" id="datepicker" class="form-control" placeholder="select date" />
<span asp-validation-for="RegistertDate" class="text-danger"></span>
</div>