2016-09-19 3 views
1

У меня есть таблица, где у меня есть два выбора даты и возможность добавить новую строку. Проблема заключается в том, что когда я добавляю новую строку, функция datepicker не работает.Datepicker не работает при добавлении строки

Я создал https://jsfiddle.net/3uhkeq1h/2/

<script> 
$(document).ready(function() { 

    $('.txtDate22').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'MM yy', 
      showButtonPanel: true, 

     onClose: function() { 
      var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      $(this).datepicker('refresh'); 
     }, 

     beforeShow: function() { 
      if ((selDate = $(this).val()).length > 0) { 
       iYear = selDate.substring(selDate.length - 4, selDate.length); 
       iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1)); 
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      } 
     } 
    }); 

    $(".txtDate22").focus(function() { 
     $(".ui-datepicker-calendar").hide(); 
     $("#ui-datepicker-div").position({ 
      my: "center top", 
      at: "center bottom", 
      of: $(this) 
     }); 
    }); 

    $(".txtDate22").blur(function() { 
     $(".ui-datepicker-calendar").hide(); 
    }); 
}); 

</script> 

ответ

1

Datepicker не является обязательным для вновь созданных элементов. Я обновил ваш ответ. Единственные изменения, которые я сделал, это поместить ваши элементы в нагрузку, в отдельную функцию и вызвать их как при загрузке, так и при щелчке.

function date_picker(){ 
$('.txtDate').datepicker({ 

     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'MM yy', 
      showButtonPanel: true, 

     onClose: function() { 
      var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      $(this).datepicker('refresh'); 
     }, 

     beforeShow: function() { 
      if ((selDate = $(this).val()).length > 0) { 
       iYear = selDate.substring(selDate.length - 4, selDate.length); 
       iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1)); 
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      } 
     } 
    }); 
    $('.txtDate22').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'MM yy', 
      showButtonPanel: true, 

     onClose: function() { 
      var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      $(this).datepicker('refresh'); 
     }, 

     beforeShow: function() { 
      if ((selDate = $(this).val()).length > 0) { 
       iYear = selDate.substring(selDate.length - 4, selDate.length); 
       iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1)); 
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      } 
     } 
    }); 
} 

Так что если вы хотите добавить подобные действия, как вы это делаете, просто добавьте эти действия здесь.

+0

Умм не уверен, что вы сделали изменения? –

+0

@ anatp_123 проверить обновленный jsfiddle –

+0

umm, если вы имеете в виду этот https://jsfiddle.net/3uhkeq1h/2/? –

0

Вы, вероятно, не вызывая datepicker() для вновь добавленных элементов. Даже если они являются одним и тем же классом, функция не будет вызываться автоматически для элементов, добавленных позже в DOM.

Смежные вопросы