第一种方式:

使用vs自带的日期控件即可。(过程有一点点的复杂)
1.首先找到NuGet程序包,自行查找控件:bootstrap-datepicker,安装到UI层。
mvc添加日期控件datepicker

2。导入相应的css和js文件
mvc添加日期控件datepicker
mvc添加日期控件datepicker

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/
mvc添加日期控件datepicker

<!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>

mvc添加日期控件datepicker

ps:自己使用的是第二种方式,第一种还么有实现,等第一种实现再分享给大家更加详细的步骤。

文件参考于:https://blog.csdn.net/qq_28633249/article/details/77142352

相关文章: