2010-01-06 228 views
0

我有一个使用三个选择(日/月/年)的日期输入表格为什么在第一次设置日期选择时,此代码没有正确设置ui.datepicker.js日历?

以下脚本允许使用datepicker设置选择。另外,一旦你完成了这一次,选择可以改变,改变反映在datepicker。

但是,如果您先设置选择,然后单击打开datepicker它不会选择更改选择并突出显示datepicker中正确的日期。它只适用于你先使用日期选择器!

这里的JQuery的:

$(document).ready(function() { 

     $('.installDatePicker').append('<img src="assets/images/ico-calendar.png" width="20" height="22" alt="Pick date" /><div class="cal"/>') 

     $('.installDatePicker').each(function(i){ 
      $(this).find('.cal').datepicker({ 
       beforeShow: readSelected, 
       onSelect: updateSelected, 
       minDate: new Date(2010, 1 - 1, 1), 
       maxDate: new Date(2012, 12 - 1, 31),  
      }).hide(); 
     }) 

     $(this).find('img').click(function(){ 
      $(this).parent().find('.cal').datepicker({ 
       beforeShow: readSelected 
      }).show() 
     }) 
    }); 

    // Get values of select boxes and send to datepicker 
    function readSelected() { 
     return { 
      setDate: $(this).parent().val(
       $(this).find('select:eq(1)').val() + '/' + 
       $(this).find('select:eq(0)').val() + '/' + 
       $(this).find('select:eq(2)').val()) 
      }    
    } 

    // Set values of select boxes from datepicker 
    function updateSelected(date) { 
     $(this).parent().find('select:eq(1)').val(date.substring(0, 2)); 
     $(this).parent().find('select:eq(0)').val(date.substring(3, 5)); 
     $(this).parent().find('select:eq(2)').val(date.substring(6, 10)); 
     $(this).hide(); 
    } 

,这里是一个日期控制的

<fieldset id="firstChoiceDate" class="installDatePicker"> 
    <select> 
     <option value="01">1</option> 
     <option value="02">2</option> 
     <option value="03">3</option> 
     <option value="04">4</option> 
     <option value="05">5</option> 
     <option value="06">6</option> 
     <option value="07">7</option> 
     <option value="08">8</option> 
     <option value="09">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
     <option value="13">13</option> 
     <option value="14">14</option> 
     <option value="15">15</option> 
     <option value="16">16</option> 
     <option value="17">17</option> 
     <option value="18">18</option> 
     <option value="19">19</option> 
     <option value="20">20</option> 
     <option value="21">21</option> 
     <option value="22">22</option> 
     <option value="23">23</option> 
     <option value="24">24</option> 
     <option value="25">25</option> 
     <option value="26">26</option> 
     <option value="27">27</option> 
     <option value="28">28</option> 
     <option value="29">29</option> 
     <option value="30">30</option> 
     <option value="31">31</option> 
    </select> 

    <select> 
     <option value="01">Jan</option> 
     <option value="02">Feb</option> 
     <option value="03">Mar</option> 
     <option value="04">Apr</option> 
     <option value="05">May</option> 
     <option value="06">Jun</option> 
     <option value="07">Jul</option> 
     <option value="08">Aug</option> 
     <option value="09">Sep</option> 
     <option value="10">Oct</option> 
     <option value="11">Nov</option> 
     <option value="12">Dec</option> 
    </select> 

    <select> 
     <option value="2010">2010</option> 
     <option value="2011">2011</option> 
     <option value="2012">2012</option> 
    </select> 
</fieldset> 

回答

0

我很好奇,您使用$(这)结构:

$(this).find('img').click(function(){ 

setDate: $(this).parent().val(

$(this).parent().find('select..... 

你究竟在期待this在这些场合?

第一个是准备就绪,所以我不知道它会是什么。

第二个和第三个是不是匿名的函数,所以我不确定这是否会引用您想要的对象。

可能是错误的,但...

0

我实际上是OP但不知何故没有登录的时候我张贴:)

要回答问题,詹姆斯,有问题的代码实际上是在“每个”循环开始说起,我设法粘贴试图修复它的“实验” - 我与这个

$('.installDatePicker img').click(function(){ 
     $(this).parent().find('.cal').datepicker({ 
      beforeShow: readSelected 
     }).show() 
}) 

相同的行为取代它,因为我在原来的问题说,那么伤心我的问题依然站立!

相关问题