1

ページで 2 つの日付ピッカーを使用しています。1 つの日付ピッカーは日、月、年を表示し、もう 1 つの日付ピッカーは月と年のみを表示する必要があります。

私は次のようないくつかの方法を試しました。 cssを変えてみました。 

.ui-datepicker-calendar {
    display: none;
}

しかし、これは両方の日付ピッカーに影響します。

関数onClickを呼び出してみました。 

$('.month-picker').click(function(){
    $('.ui-datepicker-calendar').css('display','none');
});

この関数が ui-datepicker-calendar クラスを非表示にすると、ui-datepicker-header と入力ボックスの間にギャップが表示されます。

問題を解決するのを手伝ってください。よろしくお願いします。

jsfiddleも追加されます

4

3 に答える 3

1

以下のアプローチを試してください。

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

});

これが同じ JsFiddleです。

編集

カスタムスタイルに修正。今すぐフィドルをチェックしてください。

于 2013-09-18T07:44:47.660 に答える
0

ガッチャ!! いくつかの試行錯誤の後、回避策を見つけたと思います。このようなクリックイベントハンドラーを追加します

$('.month-picker').on('click', function() {
    $('.ui-datepicker-calendar').hide();    
});

ただし、まだ彫る必要があります。

JSFiddleで確認してください

于 2013-09-18T07:00:37.353 に答える