javascript - jquery 日期选择器，但日期月份和年份在单独的下拉列表中

Question

我正在开发一个 jquery 日期选择器。我需要选择一个日期，但在从日历中选择日期后，我需要将日期分为三个单独的下拉菜单。一个用于一个月的第一天，一个用于一年。这是我的 jquery 脚本。

  <script type="text/javascript">
    $(document).ready(function() {

   $(function() {
    $( "#fullDate" ).datepicker({
    onClose: function(dateText, inst) {
       $('#day').val( dateText.split('/')[2] );
       $('#month').val( dateText.split('/')[1] );
   $('#year').val( dateText.split('/')[0] );
    }
 });
});
}); 
</script> 

HTML

<div class="demo">

<p>Date: <input id="fullDate" type="text" style="display:block"></p>
day:<select name="day" id="day" style="width:100px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

 month:<select name="month" id="month" style="width:100px">
 <option>1</option>
 <option>2</option>
  <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>

year:<select name="year" id="year" style="width:100px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div><!-- End demo -->

Answer 1

工作演示请点击这里:] http://jsfiddle.net/gvAbv/13/ 或 http://jsfiddle.net/gvAbv/8/

在演示中，单击文本框并选择日期和宾果游戏，您将自动填充下拉菜单。

请注意 dateText.split('/')[2] 是年份而不是日期 :) 如果您要切换代码的​​工作位置。

即dateText.split('/')[2]:年份； dateText.split('/')[0]:月份； dateText.split('/')[0] :day rest demo 将帮助您弄清楚。

该演示有额外的内容，但它会对您有所帮助!

代码

$(function() {
    $("#fullDate").datepicker({
        onClose: function(dateText, inst) {
            $('#year').val(dateText.split('/')[2]);
            $('#month').val(dateText.split('/')[0]);
            $('#day').val(dateText.split('/')[1]);
        }
    });
});

图像点击的另一个演示: http://jsfiddle.net/zwwY7/

代码

$(function() {
    $("#fullDate").datepicker({
         buttonImage: 'icon_star.jpg',
        buttonImageOnly: true,
        onClose: function(dateText, inst) {
            $('#year').val(dateText.split('/')[2]);
            $('#month').val(dateText.split('/')[0]);
            $('#day').val(dateText.split('/')[1]);
        }
    });
});

​

图片