2013-04-17 3 views
1

Я пытаюсь сделать datepicker, который будет показывать только годы и месяц.ASP.NET MVC4 Datepicker с месяцем и только годом

Я видел эти вопросы в разных местах, но все решения, которые я тестировал, не работают.

Я следовать этому примеру: 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> 

Но в моей странице есть только текстовое поле, и ничего всплывало, когда я нажимаю его. Я не знаю, что я делаю неправильно.

+0

вы получаете любую ошибку Javascript? – Saanch

+0

Нет, у меня нет никаких ошибок. –

+0

Код, который вы скопировали, имел синтаксическую ошибку. Не могли бы вы подтвердить его правильность? – Saanch

ответ

5

Вы начали с интернет-шаблона 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) 

screenshot

+1

Это работает, единственное, что отсутствовало, было '@ Scripts.Render (" ~/bundles/jqueryui ")' в _Layout.cshtml Спасибо! –

+0

У меня есть другой вопрос, знаете ли вы, какой файл мне нужно изменить, чтобы иметь годы до этого года (так что ничего после 2013 года)? –

+0

Проблема решена, просто добавьте эту строку в мой скрипт: 'yearRange:" -20: +0 "' –

Смежные вопросы