日期选取器不会启动 - Datepicker doesn't launch

Datepicker doesn't launch

本文关键字：启动选取日期 | 更新日期: 2023-09-27

我用ajax加载数据（通过PHP）：

     $retour.= '
 <table id="dates_stages_comp">
  <tr>
   <th>Nom</th><th>Prénom</th><th>Matricule</th><th>Année</th><th>Dates début</th><th>Date fin</th><th>&nbsp;</th>
  </tr>';
 foreach($resultatSQL as $ligneSQL)
 {
     $retour .= '<tr><td>'.$ligneSQL->nom.'</td>';
     $retour .= '<td>'.$ligneSQL->prenom.'</td>';
     $retour .= '<td>'.$ligneSQL->matricule . '</td>';
     $retour .= '<td>'.$ligneSQL->annee.'</td>';
     $retour .= '<td>'.$ligneSQL->date_debut_stage_comp.'</td>';
     $retour .= '<td><input id="datepicker_debut_s_c" type="text" value="'.$ligneSQL->date_fin_stage_comp.'" /></td>';
     $retour .= '<td><input id="datepicker_fin_s_c" type="text" value="'.$ligneSQL->date_fin_stage_comp.'" /></td>';
 } 
 $retour.='</table>';
 echo $retour;
retour is back in french
This is my js code :
    $('#datepicker_debut_s_c').datepicker(
    {
        dateFormat: 'dd-mm-yy',
        changeYear: true,
        maxDate: null
    });
    $('#datepicker_fin_s_c').datepicker(
    {
        dateFormat: 'dd-mm-yy',
        changeYear: true,
        maxDate: null
    });
    alert($('#datepicker_debut_s_c').length);
   $.ajax
   (
      {
         type: 'POST',
         url: 'dates_stages_complermentaires.php',
         dataType: 'text',
         success: function(retour)
         {
           $('#dates_infos_stages_comp').html(retour);   
        },
        error:function(retour)
        {
            alert(retour);
        }
      }  
   );

问题是我的日期选择器无法启动...

alert($('#datepicker_debut_s_c').length);

给我 0

上面的代码在里面：

$(document).ready(function() {

加载

页面后添加到页面的元素不会自动分配事件侦听器，您必须在 ajax 调用后自己执行此操作。

所以你应该做这样的事情：

$.ajax({ 
    type: 'POST', 
    url: 'dates_stages_complermentaires.php', 
    dataType: 'text', 
    success: function(retour) { 
        $('#dates_infos_stages_comp').html(retour);
        $('#datepicker_debut_s_c').datepicker({
            dateFormat: 'dd-mm-yy',
            changeYear: true,
            maxDate: null
        });     
        $('#datepicker_fin_s_c').datepicker({
            dateFormat: 'dd-mm-yy',
            changeYear: true,
            maxDate: null
        });
    }, 
    error:function(retour) { 
    alert(retour); 
    } 
});

还要检查 javascript 控制台是否存在错误，并确保通过 ajax 创建多个元素时日期选择器元素上的 ID 是唯一的。