jQuery的日期选择器，但日月和年在单独的下拉菜单中 [英] jquery date picker but day month and year in separate dropdowns

问题描述

我正在研究一个jQuery日期选择器。我需要选择一个日期，但从日历中选择日期后，我需要将日期分成三个单独的下拉菜单。一个月为一个月，一个为一年。这是我的jquery脚本。

 < script type =text / javascript> 
 $（document）.ready（function（）{
 
 $（function（）{
 $（#fullDate）.datepicker（{
 onClose：函数（dateText，inst）{
 $（'＃day'）.val（dateText.split（'/'）[2]）; 
 $（'＃month'）.val（dateText。 split（'/'）[1]）; 
 $（'＃year'）。val（dateText.split（'/'）[0]）; 
} 
}）; 
}）; 
}）; 
< / script> 
  

HTML

 < div class =demo> 
 
< p>日期：< input id =fullDatetype =textstyle =display：block>< / p> 
 day：< select name =dayid =daystyle =width：100px> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< option> 4< / option> 
< option> 5< / option> 
< / select> 
 
月份：< select name =monthid =monthstyle =width：100px> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< option> 4< / option> 
< option> 5< / option> 
< / select> 
 
年：< select name =yearid =yearstyle =width：100px> 
< option> 1< / option> 
< option> 2< / option> 
< option> 3< / option> 
< option> 4< / option> 
< option> 5< / option> 
< / select> 
< / div><！ - 结束演示 - > 
  

解决方案

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

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

需要注意 dateText.split（'/'）[2] 是year not day :)如果您将切换代码的​​位置。

即 dateText.split（'/'）[2] ：year; dateText.split（'/'）[0] ：month; dateText.split（'/'）[0] ：day rest demo会帮助您清楚。

该演示有额外的功能，但它可以帮助你！

代码

<$ p $ {
onClose：function（dateText，inst）{
$（' val（dateText.split（'/'）[2]）;
$（'＃month'）。val（dateText.split（'/'）[0]）;
$（'＃day'）.val（dateText.split（'/'）[1]）;
}
}）;
}）;

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

code （$ {$ b $（＃fullDate））。

  $（function（）{
 $ b 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]）; 
} 
}）; 
}）; 
 
 
  

图片

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.

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

解决方案

Working demo please click here : ] http://jsfiddle.net/gvAbv/13/ or 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.

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

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/

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

这篇关于jQuery的日期选择器，但日月和年在单独的下拉菜单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！