javascript - ASP .NET MVC4 日期选择器只有月份和年份

Question

我正在尝试制作一个仅显示年份和月份的日期选择器。

我在不同的地方看到了这个问题，但我测试过的所有解决方案都不起作用。

我按照这个例子：http: //jsfiddle.net/bopperben/DBpJe/

这是我的 .cshtml 文件：

@using Site.Models
@{
    ViewBag.Title = "Rapports";
}

<script type="text/javascript">
    $(function() {
    $('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    }
    });
    });
</script>
<style type="text/css">
    .ui-datepicker-calendar {
    display: none;
    }
</style>

<h2>Rapports</h2>

<div>

    @using (Html.BeginForm()) {
        <input name="startDate" id="startDate" class="date-picker" />
        <input type="submit" value="Rechercher" />
    } 

</div>

但是在我的页面中只有一个文本框，当我单击它时没有弹出任何内容。我不知道我做错了什么。

Answer 1

您是从 ASP.NET MVC4 互联网模板开始的吗？

我已经在上面尝试了你的代码，并让它在两个细节上工作。

我在部分脚本中添加了脚本标记（这将确保它在加载 jquery 后呈现）

@section scripts
{
    <script type="text/javascript">
        $(document).ready(function() {
            $('.date-picker').datepicker({
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                dateFormat: 'MM yy',
                onClose: function(dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            });
        });
    </script>
}

在 _Layout.cshtml 我添加了 jquerui 包（脚本和样式）（在页面中加载 jqueryui）

//In head tag
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")

//After closing footer tag

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

@RenderSection("scripts", required: false)