Вибір завантажувача завантаження - лише місяці та роки


122

Я використовую boatstrap 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"
});

Довідка: Вибір дат для Bootstrap


Для версії 1.2.0 та новішої версії viewModeзмінено на startView, тому використовуйте:

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

Також дивіться документацію .


1
Спасибі , але мені довелося замінити format: " mm"з format: "mm-yyyy". Його працює зараз :)
black_belt

1
Він не показує -між місяцями і роками , якщо ви тримаєте пробіл перед mm-yyyyв format: " mm-yyyy",, НЕ могли б ви зміните свою відповідь ще раз?
black_belt

Ідеально. Велике спасибі.
Тігін

Я не думаю, що viewMode є дійсним варіантом згідно з документацією. Але інші параметри дозволили потрібному дисплею працювати.
Пратамеш Датар

Чи є варіант для автоматичного закриття?
Аладдін Ахмед

7

4

Я використовую версію 2 (підтримує і bootstrap v2 і v3), і для мене це працює:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});

зміна minViewнаminViewMode
Рагавендра N

3

Для останнього bootstrap-datepicker(1.4.0 на момент написання) вам потрібно скористатися цим:

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

Джерело: Параметри вибору дати завантаження


при натисканні місяця в завантажувальному вікні, він показує дату, а потім вводить текст у форматі мм /
Шива Саураб

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()
        });


0

Para visualiar los meses del año фактично, visualiza solo solo los meses, y con el formato solo toma los meses de ese año. tambien se puede proofurar 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
Дякуємо за цей фрагмент коду, який може надати деяку обмежену та негайну допомогу. Належне пояснення буде значно поліпшити свою довгострокову цінність, показуючи , чому це є хорошим рішенням проблеми і зробить його більш корисним для читачів майбутніх з іншими подібними питаннями. Будь ласка, відредагуйте свою відповідь, щоб додати пояснення, включаючи зроблені вами припущення.
Ісмаїл Паділья

Se agrego una pequeña опис de lo que hace el codigo
Marco Puenayan

-1

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.