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

原文参考:如何在MVC中添加jQuery Datepicker_mvc datepicker-CSDN博客

好文章被埋没了,可能和时间发的早有关。

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

html 复制代码
<!-- ... -->
<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

cs 复制代码
      <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代码

javascript 复制代码
<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代码绑定即可

相关推荐
英俊潇洒美少年1 小时前
MVC / MVVM 和 Vue3、React18 到底啥关系?
mvc
武超杰21 小时前
Spring MVC进阶与SSM整合实战
java·spring·mvc
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于.net mvc剧本杀预约与管理为例,包含答辩的问题和答案
mvc·.net
不想看见4042 天前
QAbstractItemModel 自定义实现--Qt 模型 / 视图(MVC)
开发语言·qt·mvc
cyforkk2 天前
警惕生产环境中的“日志炸弹”:Spring MVC 异常处理最佳实践
spring·mvc·状态模式
洛洛呀。3 天前
DDD架构为何拆分Entity层?从MVC到领域模型的演进之道
架构·mvc·ddd
毕设源码-赖学姐4 天前
【开题答辩全过程】以 基于.NET MVC的婚庆服务系统设计为例,包含答辩的问题和答案
mvc·.net
小旭95276 天前
Spring MVC :从入门到精通(下)
java·后端·spring·mvc
希望永不加班6 天前
如何在 SpringBoot 里自定义 Spring MVC 配置
java·spring boot·后端·spring·mvc
稻草猫.6 天前
MyBatis进阶:动态SQL与MyBatis Generator插件使用
java·数据库·后端·spring·mvc·mybatis