Bootstrap Datepicker - только месяцы и годы

122

Я использую bootstrap datepicker, и мой код выглядит следующим образом: Демо кода на jsfiddle

<div class="input-append date" id="datepicker" data-date="02-2012" 
     data-date-format="mm-yyyy">

 <input  type="text" readonly="readonly" name="date" >    
 <span class="add-on"><i class="icon-th"></i></span>      
</div>      


$("#datepicker").datepicker({
        viewMode: 'years',
         format: 'mm-yyyy'
    });

Приведенный выше код работает нормально, но я пытаюсь позволить пользователям выбирать только месяцы и годы.

Подскажите, пожалуйста, как это сделать?

черный пояс
источник
Я бы просто использовал два поля выбора ... в этом было бы намного больше смысла, чем использование виджета календаря и попытки скрыть настоящий календарь.
6
Вы бы по-прежнему использовали два поля выбора, даже если бы у вас был такой вариант, как jsfiddle.net/Kz2sW/1 ? :)
black_belt

Ответы:

272

Как насчет этого :

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});

Ссылка: Datepicker для Bootstrap


Для версии 1.2.0 и новее viewModeизменилось на startView, поэтому используйте:

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
});

Также смотрите документацию .

Iswanto San
источник
1
Спасибо, но мне пришлось заменить format: " mm"на format: "mm-yyyy". Теперь он работает :)
black_belt
1
Он не показывает -между месяцами и годами , если вы держите пробел перед mm-yyyyв format: " mm-yyyy",, не могли бы вы измените свой ответ еще раз?
black_belt
Отлично. Большое спасибо.
ТИГИН
Я не думаю, что viewMode - допустимый вариант согласно документации. Но другие варианты позволяли требуемый дисплей работать.
Prathamesh Datar
Есть ли опция автозакрытия?
Алауддин Ахмед
4

Я использую версию 2 (поддерживает как bootstrap v2, так и v3), и для меня это работает:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});
Таня
источник
изменить minViewнаminViewMode
Raghavendra N
3

Для последней bootstrap-datepickerверсии (1.4.0 на момент написания) вам необходимо использовать это:

$('#myDatepicker').datepicker({
    format: "mm/yyyy",
    startView: "year", 
    minViewMode: "months"
})

Источник: параметры Bootstrap Datepicker

Sheharyar
источник
при щелчке месяца в начальной загрузке отображается дата, а затем вводится текст в формате мм / гг
Шива
1

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

var j = jQuery.noConflict();
        j(function () {
            j(".datepicker").datepicker({ dateFormat: "dd-M-yy" }).val()
        });

        j(function () {
            j(".Futuredatenotallowed").datepicker({
                changeMonth: true,
                maxDate: 0,
                changeYear: true,
                dateFormat: 'dd-M-yy',
                language: "tr"
            }).on('changeDate', function (ev) {
                $(this).blur();
                $(this).datepicker('hide');
            }).val()
        });
вишал кумар саксена
источник
1

Вам нужно будет добавить только minViewMode: "months"функцию datepicker.

Нисарг Бхавсар
источник
0

Para visualiar los meses del año actual, visualiza solo los meses, y con el formato solo toma los meses de ese anño. tambien se puede confirmurar para que se visualice una cierta cantidad de meses

<script>
('#txtDateMMyyyy').datetimepicker({
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
}).datetimepicker("setDate", new Date());
</script>
Марко Пуенян
источник
5
Спасибо за этот фрагмент кода, который может оказать некоторую немедленную помощь. Надлежащее объяснение будет значительно улучшить свою долгосрочную ценность, показывая , почему это является хорошим решением проблемы и сделает его более полезным для читателей будущих с другими подобными вопросами. Пожалуйста , измените свой ответ , чтобы добавить некоторые объяснения, в том числе допущений , которые вы сделали.
Исмаэль Падилья,
Seagreego una pequeña descripcion de lo que hace el codigo
Марко Пуэнян,
-1

Почему бы не вызвать $('.input-group.date').datepicker("remove");при изменении оператора select, затем установить представление datepicker, а затем вызвать$('.input-group.date').datepicker("update");

Киль
источник