当前位置：首页 > news >正文

用JQueryUI库在.net MVC中配置datepicker(时间日期控件)

news 2025/8/2 0:28:41

原文参考：如何在MVC中添加jQuery Datepicker_mvc datepicker-CSDN博客
好文章被埋没了，可能和时间发的早有关。

1.首先我们引入JQuery和JQuery UI

<!-- ... -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

2.我们给我生成的要用的地方加一个ID,这个参考你们自己就行,主要是给输入框加一个ID

      <div class="form-group">@Html.Label("入校时间", htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.entry_time, new { htmlAttributes = new { @class = "form-control", id = "entry_time" } })@Html.ValidationMessageFor(model => model.entry_time, "", new { @class = "text-danger" })</div></div><div class="form-group">@Html.Label("毕业时间", htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.graduate_time, new { htmlAttributes = new { @class = "form-control", id = "graduate_time" } })@Html.ValidationMessageFor(model => model.graduate_time, "", new { @class = "text-danger" })</div></div>

3.导入我们相关的JQuery代码

<script>$(document).ready(function () {if (!$.fn.datepicker) {// 如果 datepicker 还未初始化，尝试加载它$.getScript('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', function () {// 确保 datepicker 加载完成后再调用$("#entry_time").datepicker();$("#graduate_time").datepicker();});} else {// 如果 datepicker 已经初始化，直接调用$("#entry_time").datepicker();$("#graduate_time").datepicker();}});</script>

总结：我们所需要做的就是导入相关的JS和JQuery,用链接导入就行。然后给输入框加一个ID,

然后用JQuery代码绑定即可

查看全文

http://www.lryc.cn/news/387420.html