jquery日期選擇器，但日日月和年在單獨的下拉列表

我正在jquery日期選擇器上工作。我需要選擇一個日期，但從日曆中選擇日期後，我需要將日期分成三個單獨的下拉菜單。一個月爲一個月，一個爲一年。這是我的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 -->

來源

2012-06-04 Kashif Waheed

所以，你做了什麼錯誤？ – UVM

錯誤在於，從日曆選擇日期後，它不會在其相關的下拉菜單中顯示在日月和年中。 –

分裂正在與IE。？ –

工作演示請點擊這裏：] http://jsfiddle.net/gvAbv/13/或http://jsfiddle.net/gvAbv/8/

在文本框，然後選擇日期演示點擊賓果您將得到填充下拉菜單自動。

注意事項dateText.split('/')[2]是年不是日:)如果您將切換您的代碼將工作的地方。

即dateText.split('/')[2]：年; dateText.split('/')[0]：月; dateText.split('/')[0]：一天休息演示將幫助你清楚。

該演示有額外的位，但它會幫助你！

代碼

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

圖片 enter image description here

enter image description here

來源

2012-06-04 05:44:45

其工作正常，但我應該做什麼，如果我想點擊一個日曆圖像，並得到你提到我的全部功能。 –

Hi @KashifWaheed嗯，如果你使用我的jsfiddle並創建你的問題是否可能 - 我會幫你解決的。我發現很難理解，因爲在演示中，您可以點擊http://jsfiddle.net/gvAbv/13/中彈出的日曆圖像，我也會爲您呈現圖像，讓我知道，很高興爲您提供幫助出:) :) –

非常感謝你先生Tats_innit。事實上，我在當地工作，但現在有與我同住，以便我可以發送你的鏈接，我真的很抱歉。但爲了您的說服我給你演示鏈接http://jsfiddle.net/gvAbv/8/在這個演示中有一個文本框，當點擊它時出現一個日曆和等等等等。我需要相同的，但不同的是，我想用圖像替換文本框，並希望獲得相同的功能。希望你明白和抱歉，如果你感到麻煩。 –

使用日期選擇器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); 

}

難道喲ü意味着類似的東西

來源

2012-06-04 05:42:46

當然工作得很好。先生Tats_innit給我一些演示鏈接，它解決了我的問題，但現在我的問題是，如果我想添加一個圖像，而不是文本框，意味着有一個日曆圖像在三個下拉的結尾，當我點擊圖像日曆彈出，我選擇任何日期和它分裂成一天一年和一年，因爲我提到我是新的jquery.thanks幫助 –

jquery日期選擇器，但日日月和年在單獨的下拉列表

回答

相關問題