mvc添加日期控件datepicker

最新推荐文章于 2024-04-26 00:20:48 发布

草莓味少女vv

最新推荐文章于 2024-04-26 00:20:48 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hdy14/article/details/85250966

本文介绍在Visual Studio中实现日期选择控件的两种方法。第一种使用bootstrap-datepicker控件，通过NuGet安装并配置css和js文件，编写特定的cshtml和js代码实现。第二种采用layDate插件，下载后直接拖入UI层，简单编写html和js代码即可完成日期选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方式：

使用vs自带的日期控件即可。（过程有一点点的复杂）
1.首先找到NuGet程序包，自行查找控件：bootstrap-datepicker,安装到UI层。
在这里插入图片描述

2。导入相应的css和js文件
在这里插入图片描述

3.代码添加：
在cshtml页添加：

<div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>

在js里添加：

$('.form_datetime').datetimepicker({
        weekStart: 0, //一周从哪一天开始
        todayBtn:  1, //
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });

第二种方式

可参照这篇博客的步骤下载添加。
注意：文件下载解压之后可全部将文件夹直接拖到UI层，然后再cshtml中编写代码即可，其中的js文件如果自己觉得路径不会写，可以直接拖动js文件到代码中。
https://www.layui.com/laydate/
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用 layDate 独立版</title>
</head>
<body>
    <input type="text" id="test1">

    <script src="~/layDate/layDate/laydate/laydate.js"></script>
    <script>
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
    </script>
</body>
</html>

在这里插入图片描述