僅帶月份和年份的ASP .NET MVC4 Datepicker

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 Internet模板開始的嗎？

我已經在上面嘗試了您的代碼，並使它可以處理兩個細節。

我在腳本節中添加了腳本標記（這將確保在加載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)