jquery - 在 asp.net mvc 中使用 jQuery datepicker 的问题
问题描述
我想将 Jquery 日期选择器添加到 TimeofCreation 表单。我无法获取日期选择器或选择按钮。请帮助在 jquery 中使用日期选择器。
我希望在用户单击 TimeofCreation 表单时出现日期日历。
捐助者类代码如下
public class Donor
{
[Key]
public int Id { get; set; }
public string FullName { get; set; }
public int PhoneNumber { get; set; }
public DateTime TimeofCreation { get; set; }
public string Emergency { get; set; }
public string Address { get; set; }
public BloodType BloodList { get; set; }
public string BagsNumber { get; set; }
public DateTime LastTimeDonation { get; set; }
}
我的视图代码如下。
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new {
@class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.TimeofCreation, new {
htmlAttributes = new { @class = "datepicker" } })
@Html.ValidationMessageFor(model => model.TimeofCreation, "", new
{ @class = "text-danger" })
</div>
</div>
@section Scripts {
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
<script>
$('.datepicker').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
</script>
</script>
}
解决方案
这里的问题是您没有添加jquery-ui.css
文件,其他问题是您已经上传了多次jquery
和jquery-ui
js 文件。要么使用外部脚本 js 文件,要么使用 bundle。
而且你的外部脚本文件的顺序也是错误的,它应该jquery
在使用jquery-ui
文件之后
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
例如,我使用了这个并删除了 bundle 。
并添加您的jquery-ui.css
文件
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
之后你可以看到你的datepicker
更改后代码看起来像
@model MVC5.Models.Donor
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(model => model.TimeofCreation, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.TimeofCreation, new { htmlAttributes = new { @class = "datepicker" } })
@Html.ValidationMessageFor(model => model.TimeofCreation, "", new { @class = "text-danger" })
</div>
</div>
}
@section Scripts {
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.datepicker').datepicker({
dateFormat: "dd/M/yy",
changeMonth: true,
changeYear: true,
yearRange: "-60:+0"
});
</script>
}
我希望这应该对你有所帮助。如果需要更多信息,请告诉我。
推荐阅读
- c++ - 自顶向下动态编程 VS 递归朴素解决方案。检查运行时执行
- python - 如何从 TensorFlow Dataset map 函数输出列表?
- node.js - Nodejs POST未接收文件
- scala - 如何将格式为“3/22/2018 12:24:29 PM”的日期时间字符串格式化为sql时间戳以插入内存数据库中的h2?
- jenkins - jenkins 管道附加参数
- javascript - 节点 WPAPI 媒体无法上传“rest_upload_no_data”
- arduino - 调用其他 void 函数后 Arduino/Teensy 主循环未执行
- r - 根据分组属性添加新列
- c++ - 如何通过平均法线算法平滑网格表面?
- php - 使用php bindParam时:name中的冒号是什么意思