Javascript jquery 日期选择器，但在单独的下拉列表中显示月份和年份
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10876696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery date picker but day month and year in separate dropdowns
提问by Kashif Waheed
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 -->
回答by Tats_innit
Working demo please click here: ] http://jsfiddle.net/gvAbv/13/orhttp://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.
在演示中单击文本框并选择日期和宾果游戏，您将获得自动填充的下拉列表。
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
图片
回答by Sudhir Bastakoti
Use the datepicker onselectmethod 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
你是不是这个意思
