c# - 在 .NET 中使用 DatePicker
问题描述
我使用 .NET Core 创建了一个非常简单的 DatePicker。这是我的模型:
public class MemberViewModel
{
public string Name { get; set; }
[DisplayFormat(DataFormatString = @"{0:dd\/MM\/yyyy}", ApplyFormatInEditMode = true)]
public DateTime DOB { get; set; }
}
这是我的观点:
@model DatePicker.Models.MemberViewModel
@{
ViewData["Title"] = "MemberView";
}
<h2>MemberView</h2>
<h4>MemberViewModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="MemberView">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DOB" class="control-label"></label>
@Html.TextBox("datepicker")
@*<input asp-for="DOB" class="form-control" />
<span asp-validation-for="DOB" class="text-danger"></span>*@
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
这是我的布局:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<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({ minDate: -20, maxDate: "+1M +10D", dateFormat: "dd/mm/yy" });
});
</script>
当我单击文本框(在所有浏览器中)时,DatePicker 什么都不做。奇怪的是;如果我将生成的 HTML 复制并粘贴到 HTML 文件中,然后双击 HTML 文件,则 DatePicker 将按预期工作。问题是什么?
更新
请查看下面生成的 HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Restrict date range</title>
<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({ minDate: -20, maxDate: "+1M +10D", dateFormat: "dd/mm/yy" });
});
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MemberView - DatePicker Hotla</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">DatePicker</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
<h2>MemberView</h2>
<h4>MemberViewModel</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form action="/Home/MemberView" method="post">
<div class="form-group">
<label class="control-label" for="Name">Name</label>
<input class="form-control" type="text" id="Name" name="Name" value="" />
<span class="text-danger field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label class="control-label" for="DOB">DOB1</label>
<input id="datepicker" name="datepicker" type="text" value="" />
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8AZxPMp7tE9EgVGFaTl7fvF-ALxvEVCrHkYj_isQTt5HUG2iu3EPMhNjR_6OlI2xtybr9grj4e4c3eFwe5jY-8r5YWeWIdtSNkc5IsvYnt9JYc5ftpPSzAqzINzih1yg85DFHJLEkWRZ2EjvupuQQ5E" /></form>
</div>
</div>
<div>
<a href="/">Back to List</a>
</div>
<hr />
<footer>
<p>© 2018 - DatePicker</p>
</footer>
</div>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
</body>
</html>
如果我注释掉以下行,那么它会按预期工作:
<script src="/lib/jquery/dist/jquery.js"></script>
解决方案
您包含 jQuery两次。第二个 jQuery 包含覆盖您的$
变量,删除您预先加载的 jQuery ui 插件。
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
和
<script src="/lib/jquery/dist/jquery.js"></script>
jQuery 插件通过扩展$
变量来工作。您第二次包含 jQuery 会破坏先前加载的插件。
推荐阅读
- django - 在 Django 应用程序中显示 PDF 并且需要选择一个被单击的单词并在警报框中显示相同的单词
- numbers - 不同的一列返回选定的列并使用 sybase 按日期 desc 排序
- visual-studio-2019 - Visual Studio 2019 - 设备按钮缺少 Hololens 模拟器
- reactjs - 从 React Bootstrap 表中禁用/删除分页号
- ios - 使用 [Navigation Controller, TabBarViewcontroller] 再次设置根控制器时发生内存泄漏 UIViewController
- c++ - 程序告诉我论点不匹配,即使它们明显匹配
- python - Python中链表的多重赋值
- google-sheets - 为什么我的 INDEX/MATCH 函数返回错误值?
- javascript - E/启动器 - 无效的会话 ID。运行黄瓜量角器框架时出现错误。我该如何解决它并运行多个功能文件?
- c++ - 视觉工作室。无法启动程序''系统找不到指定的文件