【问题标题】:Need help getting the DatePicker to work in javascript / ASP.NET MVC需要帮助让 DatePicker 在 javascript / ASP.NET MVC 中工作
【发布时间】:2014-05-19 22:08:13
【问题描述】:

我正在尝试使用数据选择器来选择日期并使用我创建的模型将事件添加到日历中。与此处的示例不同,还始终显示日历:http://jqueryui.com/datepicker/

我有以下索引视图

<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
</head>


@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>

</p>

<div id="datepicker"></div>



<a onclick='getEvents()'>Click here to see a surprise</a>


<div id="searchresults">This should be replaced.</div>



<script>    
    //function getEvents(month, year) {
    function getEvents() {
        $.ajax({
            url: '@Url.Action("/GetEntitiesByDate")',
            type: 'POST',
            success: function (data) {
                $('#searchresults').html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $("#datepicker").datepicker("hide"); 
            },
            complete: function (x, y) {
                $("#datepicker").datepicker("refresh"); 
            }
        });
    }


    $(function () {
        $("#datepicker").datepicker({
            beforeShowDay: function (date) {
                var day = date.getDate();
                if (day in calendarEvents) {
                    if (calendarEvents[day] == undefined) {
                        return [true, 'isActive'];
                    }
                    return [true, 'isActive', calendarEvents[day]];
                }
                return [false, ''];
            },
            onChangeMonthYear: function (year, month, inst) {
                calendarEvents = {};
                getEvents(month, year);
            },
            dateFormat: "dd-M-yy",
            onSelect: function (dateText, inst) { window.location = '@Url.Action("Events")/' + dateText; }
        });
        var calendarDate = $("#datepicker").datepicker("getDate");
        getEvents(calendarDate.getMonth() + 1, calendarDate.getFullYear());
    });
</script>

页面出现,但页面上没有日历。

【问题讨论】:

  • 任何浏览器控制台错误?
  • 你的代码sn-p的上下文是什么?所以首先:html 和 body 标签丢失了?并且script标签的类型应该设置为text/javascript。
  • 你能显示html吗?

标签: javascript jquery asp.net asp.net-mvc datepicker


【解决方案1】:

日期选择器与标准表单输入字段相关联。专注于 输入(单击或使用 tab 键)打开交互式日历 在一个小的叠加层中。选择一个日期,点击页面上的其他地方(模糊 输入),或按 Esc 键关闭。如果选择了日期,反馈 显示为输入的值。

你将它绑定到一个 div 元素

<p>Date: <input type="text" id="datepicker"></p>

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

【讨论】:

  • jQuery datepicker 可以绑定到一个 div。见jqueryui.com/datepicker/#inline
  • 他的要求是他希望日期选择器在加载 dom 时弹出而不是站在那里。 dom 加载后,div 会让 datepicker 站在那里。
  • 这就是我要找的 Lee,我今晚会尝试,看看我是否可以合并该代码。我想知道是否需要升级我正在使用的脚本版本?
  • @programmerNOOB 是的,您使用的是非常旧的 jQuery (1.5.1) 版本。
  • 好吧,我已经更新了 javascript,但仍然没有得到任何东西,也没有出现错误。我发送警报以确保它到达那里的测试即将到来。
猜你喜欢
  • 1970-01-01
  • 2017-09-22
  • 2015-02-11
  • 2011-02-25
  • 1970-01-01
  • 2014-10-10
  • 1970-01-01
  • 2020-11-15
  • 1970-01-01
相关资源
最近更新 更多