jquery - 誕生日/生年月日形式の HTML 選択メニューで jQuery を使用する

Question

生年月日を選択するための標準の HTML 選択メニューを探しています。日月年。選択した年/月などに応じて、jQueryを使用して月の正しい日数をフォーマットする正しい方向に誰かが私を向けることができますか? これを実現するためのプラグインはありますか、またはこれを自分でどのように記述しますか? アドバイスをいただければ幸いです。

Answer 1

基本的に、年と月の onchange イベントを含む 3 つの選択ボックス (日、月、年) が必要です。

年と月の選択ボックスの変更は、年と月に依存するため、日数を更新する必要があります。特定の月/年の日数を計算するには、この記事が役立ちます。

http://www.electrictoolbox.com/javascript-days-in-month/

作業例JSFIDDLE

html

<select id="days"></select>
<select id="months"></select>
<select id="years"></select>

js

$(function() {

    //populate our years select box
    for (i = new Date().getFullYear(); i > 1900; i--){
        $('#years').append($('<option />').val(i).html(i));
    }
    //populate our months select box
    for (i = 1; i < 13; i++){
        $('#months').append($('<option />').val(i).html(i));
    }
    //populate our Days select box
    updateNumberOfDays(); 

    //"listen" for change events
    $('#years, #months').change(function(){
        updateNumberOfDays(); 
    });

});

//function to update the days based on the current values of month and year
function updateNumberOfDays(){
    $('#days').html('');
    month = $('#months').val();
    year = $('#years').val();
    days = daysInMonth(month, year);

    for(i=1; i < days+1 ; i++){
            $('#days').append($('<option />').val(i).html(i));
    }
}

//helper function
function daysInMonth(month, year) {
    return new Date(year, month, 0).getDate();
}

Answer 2

jQuery UI ライブラリには、日付ピッカーと呼ばれる優れた高度に調整可能なウィジェットがあります。ウィジェットのページと参照として使用できるコードはすべて、http: //jqueryui.com/datepicker/にあります。

必要なのは、ヘッダーに jQuery と jQuery UI ライブラリを次のように含めることだけです。

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

次に、通常のテキスト ボックスを作成します。

<input name="Date" id="Date" value="" />

次に、次のコードを使用して日付ピッカーを初期化します。

<script type="text/javascript">

    $(function() {
        $("#Date").datepicker({
            changeMonth: true,
            changeYear: true
            });
    };

</script>

datepicker ウィジェットに追加したオプションを使用すると、数年前に生まれた人が必要とするように、特定の月/年に簡単にジャンプできます。