jquery日期选择器，但逐日、逐月、逐年删除

I am working on a jquery date picker. I need to select a date but after date selection from the calendar I need the date to divide into three separate drop downs. One for day one for month and one for year. Here is my jquery script.

我正在开发一个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

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 -->

2 个解决方案

#1

Working demo please click here : ] http://jsfiddle.net/gvAbv/13/ or http://jsfiddle.net/gvAbv/8/

请点击这里:http://jsfiddle.net/gvAbv/13/或http://jsfiddle.net/gvAbv/8/。

In demo click on the text box and select dates and bingo you will get the drop downs auto populated.

在demo中，点击文本框，选择日期，bingo，你会自动填充下拉菜单。

Point to note dateText.split('/')[2] is year not day :) if you will switch over the place your code will work.

如果您要切换代码工作的位置，请指向dateText.split('/')[2]是年份而不是年份:)。

i.e. dateText.split('/')[2] : year ; dateText.split('/')[0] : month ; dateText.split('/')[0] : day rest demo will help you to make it clear.

即dateText.split('/')[2]:年;dateText.split(“/”)[0]:一个月;dateText.split('/')[0]:休息日演示将帮助您清楚地了解它。

The demo has extra bits but it will help you!

演示程序有额外的位元，但它将帮助你!

code

代码

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

ANother Demo for image click: http://jsfiddle.net/zwwY7/

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

code

代码

$(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]);
        }
    });
});

​

Images

图片

#2

Use the datepicker onselect method to get the date values you need :: onselect info

使用datepicker onselect方法获取所需的日期值::onselect info

Like:

如:

onSelect: function(dateText, inst) {            
        var datePieces = dateText.split('/');
        var month = datePieces[0];
        var day = datePieces[1];
        var year = datePieces[2];
        //define select option values for
        //corresponding element
        $('select#month').val(month);
        $('select#day').val(day);
        $('select#year').val(year);

}

Did you mean something like that

你是说那种东西吗