Fatal编程技术网
  • javascript/
  • Javascript jQuery日期选择器和引导日期选择器之间的区别

Javascript jQuery日期选择器和引导日期选择器之间的区别

javascript jquery html model-view-controller

Javascript jQuery日期选择器和引导日期选择器之间的区别,javascript,jquery,html,model-view-controller,datepicker,Javascript,Jquery,Html,Model View Controller,Datepicker,我搜索了很多博客，但我不清楚应该使用哪个版本的jQuery和bootstrap。在我的代码中，我面临着类似datepicker不是函数的错误。我不清楚这里到底缺少什么 我已经提到index.cshtml、布局和bundle配置代码块。如果有人能给我提供能够区分jQuery和bootstrap小部件的教程，这也会非常有帮助 我到底需要在头部添加什么 渲染脚本 代码： @{ ViewBag.Title=“Index”； Layout=“~/Views/Shared/_Layout.cshtml”；

我搜索了很多博客，但我不清楚应该使用哪个版本的jQuery和bootstrap。在我的代码中，我面临着类似datepicker不是函数的错误。我不清楚这里到底缺少什么

我已经提到index.cshtml、布局和bundle配置代码块。如果有人能给我提供能够区分jQuery和bootstrap小部件的教程，这也会非常有帮助

  • 我到底需要在头部添加什么
  • 渲染脚本
    • 代码：

    @{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
指数
$（文档）.ready（函数（）{
$（'#datepicker'）。datepicker（）；
});
日期：
    
layout.cshtml：
@视图包。标题
@style.Render（“~/Content/css”）
@Scripts.Render（“~/bundles/modernizer”）
@RenderBody（）
@Scripts.Render（“~/bundles/jqueryui”）
@Scripts.Render（“~/bundles/jquery”）
@RenderSection（“脚本”，必需：false）
使用System.Web；
使用System.Web.Optimization；
命名空间日期选择器测试
{
公共类BundleConfig
{
//有关捆绑的更多信息，请访问http://go.microsoft.com/fwlink/?LinkId=254725
公共静态无效注册表绑定（BundleCollection绑定）
{
添加（新脚本包（“~/bundles/jquery”）。包括(
“~/Scripts/jquery-{version}.js”）；
添加（新脚本包（“~/bundles/jqueryui”）。包括(
“~/Scripts/jqueryui-{version}.js”）；
添加（新脚本包（“~/bundles/jqueryval”）。包括(
“~/Scripts/jquery.unobtrusive*”，
“~/Scripts/jquery.validate*”）；
//使用Modernizer的开发版本进行开发和学习
//准备生产时，请使用以下位置的构建工具：http://modernizr.com 只选择您需要的测试。
添加（新脚本包（“~/bundles/modernizer”）。包括(
“~/Scripts/modernizer-*”）；
添加（新样式包（“~/Content/css”）。包括（“~/Content/site.css”）；
添加（新样式包（“~/Content/themes/base/css”）。包括(
“~/Content/themes/base/jquery.ui.core.css”，
“~/Content/themes/base/jquery.ui.resizeable.css”，
“~/Content/themes/base/jquery.ui.selective.css”，
“~/Content/themes/base/jquery.ui.accordion.css”，
“~/Content/themes/base/jquery.ui.autocomplete.css”，
“~/Content/themes/base/jquery.ui.button.css”，
“~/Content/themes/base/jquery.ui.dialog.css”，
“~/Content/themes/base/jquery.ui.slider.css”，
“~/Content/themes/base/jquery.ui.tabs.css”，
“~/Content/themes/base/jquery.ui.datepicker.css”，
“~/Content/themes/base/jquery.ui.progressbar.css”，
“~/Content/themes/base/jquery.ui.theme.css”）；
}
}
}
    Datepicker在jQuery ui中可用，而不是在jQuery核心中。当您实际询问客户端问题时，请不要发布整个服务器端Razor视图。您在服务器上使用的技术与您的问题无关，请删除您没有询问的所有内容，并在浏览器看到时发布HTML和Javascript。 
    @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<!doctype html>
<html lang="en">
<head>          
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script  type="text/javascript">    
     $(document).ready(function () {
       $( '#datepicker' ).datepicker();
     });
  </script>
</head>
<body>     
<p>Date: <input type="text" id="datepicker" /></p>      
</body>
</html> 
layout.cshtml:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>       
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>       
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script>  <script src="~/Scripts/jquery.validate.min.js"></script>
</head>
<body>
    @RenderBody()       
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>   
using System.Web;
using System.Web.Optimization;
namespace DatePickerTest
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));    
            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));    
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));    
            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}