jQueryで日付プルダウン

Dateオブジェクトで日付用のプルダウンを生成

jQuery

$(function() { // 現在日時 var current = new Date(); var year_val = current.getFullYear(); var month_val = current.getMonth() + 1; var day_val = current.getDate(); // プルダウン生成 $('#year_pulldown').html('<select name="year">'); // 昇順 for (var i = 2000; i <= year_val + 1; i++) { $('#year_pulldown select').append('<option value="' + i + '">' + i + '</option>'); } // 降順 // for (var i = year_val + 1; i >= 2000; i--){ // $('#year_pulldown select').append('<option value="' + i + '">' + i + '</option>'); // } $('#year_pulldown').append('年'); $('#month_pulldown').html('<select name="month">'); for (var i = 1; i <= 12; i++) { $('#month_pulldown select').append('<option value="' + i + '">' + i + '</option>'); } $('#month_pulldown').append('月'); $('#day_pulldown').html('<select name="day">'); for (var i = 1; i <= 31; i++) { $('#day_pulldown select').append('<option value="' + i + '">' + i + '</option>'); } $('#day_pulldown').append('日'); // デフォルト $('select[name=year] option[value=' + year_val + ']').prop('selected', true); $('select[name=month] option[value=' + month_val + ']').prop('selected', true); $('select[name=day] option[value=' + day_val + ']').prop('selected', true); });

HTML

<span id="year_pulldown"></span> <span id="month_pulldown"></span> <span id="day_pulldown"></span>

jQuery

$(function() { // 現在日時 var current = new Date(); var year_val = current.getFullYear(); var month_val = current.getMonth() + 1; var day_val = current.getDate(); // プルダウン生成 $('#ymd_pulldown').html('<select name="ymd">'); for (var i = 0; i < 10; i++) { var date = new Date(year_val, month_val - 1, day_val + i); var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); $('select[name=ymd]').append('<option value="' + y + '/' + m + '/' + d + '">' + y + '/' + m + '/' + d + '</option>'); } });

HTML

<span id="ymd_pulldown"></span>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。