jquery日期选择器，但日月和年在单独的下拉列表中

Posted 2023-05-07

【中文标题】jquery日期选择器，但日月和年在单独的下拉列表中

【英文标题】：jquery date picker but day month and year in separate dropdowns

【发布时间】：2012-06-08 06:05:57

【问题描述】：

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

【问题讨论】：

那么你得到了什么错误？

错误是从日历中选择日期后，它不会在其相关下拉列表中以日月和年显示。

拆分是否与 IE 一起使用。？

【参考方案1】：

工作演示请点击这里 : ] http://jsfiddle.net/gvAbv/13/ 或 http://jsfiddle.net/gvAbv/8/

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

注意dateText.split('/')[2] 是年而不是日:) 如果您要切换代码工作的地方。

即dateText.split('/')[2]：年份； dateText.split('/')[0]：月； dateText.split('/')[0] : day rest demo 会帮你说清楚。

演示有一些额外的内容，但它会帮助你！

代码

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

​

图片

【讨论】：

它工作正常，但如果我想点击日历图像并获得你提到我的全部功能，我应该做些什么改变。？？

嗨@KashifWaheed 嗯，如果您使用我的 jsfiddle 并创建您的问题，是否有可能 - 我会帮助您。我觉得很难理解，因为在演示中你可以点击弹出的日历图片jsfiddle.net/gvAbv/13 我也会给你放一张图片，让我知道，很乐意帮助你:)

非常感谢 Tats_innit 先生。事实上，我在本地工作，但有人注意到我和我一起生活，所以我可以给你发链接，我真的很抱歉。但是为了说服您，我向您发送了此演示链接jsfiddle.net/gvAbv/8 在此演示中有一个文本框，单击它时会出现一个日历，等等。我需要相同但不同的是我想用图像替换文本框并希望获得相同的功能。如果您感到麻烦，希望您理解并抱歉。

非常感谢 Tats_innit 先生和其他所有为我的问题发布解决方案的人......

这个问题是假设每个月有 31 天。例如，二月应该显示基于年份的天数。

【参考方案2】：

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

你的意思是这样的

【讨论】：

当然可以。 Tats_innit 先生给我发送了一些演示链接，它解决了我的问题，但现在我的问题是，如果我想添加图像而不是文本框，意味着在三个下拉列表的末尾有一个日历图像，当我单击图像时是一个日历弹出，我选择任何日期，它分为日月和年，正如我之前提到的。我是 jquery 的新手。感谢帮助