在MVC项目中使用Jquery脚本的日期选择器没有效果

问题遇到的现象和发生背景

在MVC项目中使用Jquery脚本的日期选择器没有效果

问题相关代码,请勿粘贴截图

<link href="~/Css/jquery-ui.theme.css" rel="stylesheet" />
<script src="~/Js/jquery.js"></script>
<script src="~/Js/jquery-ui.js"></script>
<script>
    $(function () {
        $("#date").datepicker();
    });
</script>
<p>日期:<input type="text" id="datepicker"></p>
<p>日期:<input type="text" id="date"></p>

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")


@section scripts
{

    <script>
        $(function () {
            $("#datepicker").datepicker();
        });
    </script>
    }

运行结果及报错内容

不显示日期选择器

img

我的解答思路和尝试过的方法
我想要达到的结果

img

input 标签的type类型改为date

<p>日期:<input type="date" id="datepicker"></p>
<p>日期:<input type="date" id="date"></p>