javascript - すべてのフィールドにドロップダウン メニューを使用する日付ピッカー JavaScript および JQuery W/O Calendar

Question

良い一日、

すべてのフィールド (YMD) がすべてドロップ ダウン メニューである日付ピッカーを作成しようとしています。選択された月は、日付フィールドで選択できる日数に自動的に影響します。

カレンダーを表示したくありません。

何をすべきかについての提案に感謝します。

ありがとう。

Answer 1

ここからjquery datepickerをダウンロードして含めることができます :- その後、次の js をページに含めます。

(function()
{

    // initialise the "Select date" link
    $('#date-pick')
        .datePicker(
            // associate the link with a date picker
            {
                createButton:false,
                startDate:(new Date()).asString(),
                endDate:'31/12/2020'
            }
        ).bind(
            // when the link is clicked display the date picker
            'click',
            function()
            {
                updateSelects($(this).dpGetSelected()[0]);
                $(this).dpDisplay();
                return false;
            }
        ).bind(
            // when a date is selected update the SELECTs
            'dateSelected',
            function(e, selectedDate, $td, state)
            {
                updateSelects(selectedDate);
            }
        ).bind(
            'dpClosed',
            function(e, selected)
            {
                updateSelects(selected[0]);
            }
        );

    var updateSelects = function (selectedDate)
    {
        var selectedDate = new Date(selectedDate);
        $('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
        $('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
        $('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
    }
    // listen for when the selects are changed and update the picker
    $('#d, #m, #y')
        .bind(
            'change',
            function()
            {
                var d = new Date(
                            $('#y').val(),
                            $('#m').val()-1,
                            $('#d').val()
                        );
                $('#date-pick').dpSetSelected(d.asString());
            }
        );

    // default the position of the selects to today
    var today = new Date();
    updateSelects(today.getTime());

    // and update the datePicker to reflect it...
    $('#d').trigger('change');
});

これにより、日付ピッカーは、指定された範囲で選択可能な未来の日付のみを持つ選択ボックスに変換されます。

参考までに: http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerIntoSelects.html