jquery日期选择器,但是单独的下拉列表中的日月和年份

时间:2012-06-04 05:36:36

标签: javascript jquery html

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

2 个答案:

答案 0 :(得分:7)

工作演示请点击此处:] http://jsfiddle.net/gvAbv/13/ http://jsfiddle.net/gvAbv/8/

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

注意事项dateText.split('/')[2]是一年而不是一天:)如果您将切换代码将起作用的地方。

即。 {{1年 ; {{1个月 ; dateText.split('/')[2]:日休息演示将帮助您明确说明。

该演示有额外的位,但它会帮助你!

代码

dateText.split('/')[0]

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

<强>码

dateText.split('/')[0]

图片 enter image description here

enter image description here

答案 1 :(得分:1)

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

像:

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

}

你的意思是什么