ブートストラップ日付ピッカー-月と年のみ


122

私はブートストラップ日付ピッカーを使用しており、私のコードは次のようです、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'
    });

上記のコードは問題なく機能していますが、私がしようとしているのは、ユーザーが月と年のみを選択できるようにすることです。

その方法を教えて頂けますか?


2つの選択ボックスを使用するだけです...カレンダーウィジェットを使用して実際のカレンダーを非表示にするよりもはるかに理にかなっています。

6
このjsfiddle.net/Kz2sW/1のようなオプションがある場合でも、2つの選択ボックスを使用しますか?:)
black_belt 2013

回答:


272

これはどう :

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

参照:ブートストラップの日付ピッカー


バージョン1.2.0以降でviewModeは、に変更されているためstartView、次を使用します。

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

ドキュメントも参照してください。


1
おかげで、私はと交換format: " mm"する必要がありましたformat: "mm-yyyy"。その作業は今:)
black_belt 2013

1
-mm-yyyyにスペースを置いた場合、月と年の間に表示されませんformat: " mm-yyyy",。もう一度回答を編集していただけませんか?
black_belt 2013

完璧です。どうもありがとうございました。
Tigin

ドキュメントによると、viewModeは有効なオプションではないと思います。しかし、他のオプションでは、必要なディスプレイを機能させることができました。
Prathamesh Datar

自動クローズのオプションはありますか?
Alauddin Ahmed


4

私はバージョン2(ブートストラップv2とv3の両方をサポートしています)を使用していますが、私にとってはこれでうまくいきます:

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

変更minViewminViewMode
Raghavendra N

3

最新版bootstrap-datepicker(執筆時点では1.4.0)の場合、これを使用する必要があります。

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

出典:Bootstrap Datepicker Options


ブートストラップで月をクリックすると、日付が表示され、mm / yy形式でテキストが入力されます
Shiva Saurabh

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 delañoactual、visualiza solo los meses、y con el formato solo toma los meses de eseaño。tambien se puede confirurar 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
このコードスニペットをありがとうございます。このコードスニペットは、限られた、即時のヘルプを提供する場合があります。適切な説明が大幅にこれは問題に良い解決策であり、他、同様の質問を将来の読者にそれがより便利になるだろう、なぜ示すことによって、その長期的な価値を向上させるであろう。答えを編集して、仮定を含めて説明を追加してください。
Ismael Padilla

Se agrego unapequeñadescripcion de lo que hace el codigo
マルコプエナヤン

-1

$('.input-group.date').datepicker("remove");selectステートメントが変更されたときにを呼び出して、日付ピッカービューを設定してから、$('.input-group.date').datepicker("update");

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.