與datepicker填充日期下拉列表

Question

我有一個下拉列表，其中用戶可以選擇月/日/年，但使它更快一點的用戶我已經添加在jquery datepicker，這是工作正常，除了有沒有方式，一旦用戶從日曆中選擇了一個日期，它會自動填充下拉字段？ 正如我有這些下拉菜單設置爲導入到我的數據庫已經。

當前下拉菜單

<dd> 
     <select id="month_of_purchase" name="entry[month_of_purchase]"> 
      <option value="">Month</option> 
      <option value="1">Jan</option> 
      <option value="2">Feb</option> 
      <option value="3">Mar</option> 
      <option value="4">Apr</option> 
      <option value="5">May</option> 
      <option value="6">Jun</option> 
      <option value="7">Jul</option> 
      <option value="8">Aug</option> 
      <option value="9">Sep</option> 
      <option value="10">Oct</option> 
      <option value="11">Nov</option> 
      <option value="12">Dec</option> 
     </select> 
     <select id="day_of_purchase" name="entry[day_of_purchase]"> 
      <option value="">Day</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
      <option value="11">11</option> 
      <option value="12">12</option> 
      <option value="13">13</option> 
      <option value="14">14</option> 
      <option value="15">15</option> 
      <option value="16">16</option> 
      <option value="17">17</option> 
      <option value="18">18</option> 
      <option value="19">19</option> 
      <option value="20">20</option> 
      <option value="21">21</option> 
      <option value="22">22</option> 
      <option value="23">23</option> 
      <option value="24">24</option> 
      <option value="25">25</option> 
      <option value="26">26</option> 
      <option value="27">27</option> 
      <option value="28">28</option> 
      <option value="29">29</option> 
      <option value="30">30</option> 
      <option value="31">31</option> 
     </select> 
     <select id="year_of_purchase" name="entry[year_of_purchase]"> 
      <option value="">Year</option> 
      <option value="2011">2011</option> 
      <option value="2012">2012</option> 
      <option value="2013">2013</option> 
      <option value="2014">2014</option> 
      <option value="2015">2015</option> 
      <option value="2016">2016</option> 
     </select> 
     </dd> 

當前日期選擇器

$(document).ready(function(){ 
$("#datepicker").datepicker(); 
}); 

Answer 1

$(document).ready(function(){ 
    $("#datepicker").datepicker({dateFormat: 'mm-dd-yy', 
     onSelect: function(dateText, inst) { 
      var mydate= $(this).datepicker("getDate"); 
      $("#month_of_purchase").val(mydate.getMonth()+1);    
      $("#day_of_purchase").val(mydate.getDate()); 
      $("#year_of_purchase").val(mydate.getFullYear()); 
     } 
    }); 
}); 

看到它的工作：http://jsfiddle.net/8SYsN/

Answer 2

嘗試這種方式

jQuery代碼：

$(document).ready(function() { 
$("#tx").datepicker({ 
    buttonImage: 'http://icongal.com/gallery/image/203336/birthday_rose_for_kdc_kdc_rose_love_flower_valentine_rose.png', 
    buttonImageOnly: true, 
    changeMonth: true, 
    changeYear: true, 
    showOn: 'both' 
}); 

$("#tx").on('change', function() { 
    var dt = ($(this).val()).split('/'); 
    var mon = dt[0]; 
    var day = dt[1]; 
    var year = dt[2]; 
    $('#month_of_purchase').val(mon).attr("selected", "selected"); 
    $('#day_of_purchase').val(day).attr("selected", "selected"); 
    $('#year_of_purchase').val(year).attr("selected", "selected"); 
}); 

}）;`

HTML代碼：

<input type="hidden" id="tx" /> 
<select id="month_of_purchase" name="entry[month_of_purchase]"> 
<option value="">Month</option> 
<option value="01">Jan</option> 
<option value="02">Feb</option> 
<option value="03">Mar</option> 
<option value="04">Apr</option> 
<option value="05">May</option> 
<option value="06">Jun</option> 
<option value="07">Jul</option> 
<option value="08">Aug</option> 
<option value="09">Sep</option> 
<option value="10">Oct</option> 
<option value="11">Nov</option> 
<option value="12">Dec</option> 
</select> 
<select id="day_of_purchase" name="entry[day_of_purchase]"> 
<option value="">Day</option> 
<option value="01">1</option> 
<option value="02">2</option> 
<option value="03">3</option> 
<option value="04">4</option> 
<option value="05">5</option> 
<option value="06">6</option> 
<option value="07">7</option> 
<option value="08">8</option> 
<option value="09">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
<option value="13">13</option> 
<option value="14">14</option> 
<option value="15">15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="23">23</option> 
<option value="24">24</option> 
<option value="25">25</option> 
<option value="26">26</option> 
<option value="27">27</option> 
<option value="28">28</option> 
<option value="29">29</option> 
<option value="30">30</option> 
<option value="31">31</option> 
</select> 
<select id="year_of_purchase" name="entry[year_of_purchase]"> 
<option value="">Year</option> 
<option value="2011">2011</option> 
<option value="2012">2012</option> 
<option value="2013">2013</option> 
<option value="2014">2014</option> 
<option value="2015">2015</option> 
<option value="2016">2016</option> 
</select> 

LIVE DEMO： http://jsfiddle.net/Un7PG/21/

EDIT 1：

唯一修改我已經做的是，我已下的選項標籤的屬性值轉換的日期值從1,2,3...到01,02,03......。

編輯2：

觸發一個日期選擇在圖像而不是傳統的文本框中。

編碼快樂:)