Jqueryui Datepickerにカレンダーが表示されない

現在、2つの入力フィールドにjquery ui datepickerを使用しています。カレンダーを呼び出すには、入力フィールドのクラスがdatepickerである必要があります。私は入力フィールドを生成するためにJavaScriptのforループを使用しています。私は可能性のある各入力フィールドにクラスdatepickerを追加しました。しかし、カレンダーは表示されません。 Firebugコンソールで、htmlは入力フィールドがクラスdatepickerであることを示しています。静的な入力フィールドでこれを行うと、うまく動作します。フィールドがクリックされているときにカレンダーを表示するにはどうすればよいですか？ jqueryのでExample Jqueryui Datepickerにカレンダーが表示されない

これは私がクラスを設定する行です：

<form action="courses.php" method="POST"> 
    <b>Select the course</b> 
    Academy<input id="academy_id" name="acad_id" placeholder="Academy ID" type="text" /> 
    Courses being offered? 
    <select name="courses_offered"> 
     <option value="default">---Select---</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 

    <div id="course_catalog"></div> 
    Static input: <input type="text" id="last_contacted_date" name="last_contacted_date" class="datepicker" /> 
    <input value="SAVE" name="submit" type="submit"> 
</form>

出典

2013-11-20 Code_Ed_Student

jQuery UIを組み込むことを忘れましたか？ – j08691

@ j08691はいそれが追加されました –

そして、datepickerを初期化してください。自動的には表示されません！ – adeneo

コンテンツを作成してDOMに追加した後に、datepickerコードが実行されていることを確認してください。これを行う最も簡単な方法は、showFieldsメソッド内のdatepickerコードを最後に移動することです。このように：

function showFields(option) { 

    . . . rest of method . . . 

    $('#course_catalog').html(content); 

    $('#course_catalog').find(".datepicker").datepicker({dateFormat: "yy-mm-dd"}); 
}

$('#course_catalog').find(".datepicker")部分は（あなたが静的なものに対して、それを再度実行する必要はありません）のみ動的に追加datepickerフィールドが初期化されることを確認します。

出典

2013-11-20 18:45:36 talemyn

このメソッドは完全に機能しました！ –

Cool。。。それがうまくいってうれしい。 :) – talemyn

content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>';

のフルjQueryのコード

<script> 
    $(document).ready(function() { 
     $('select').change(function() { 
      var option = $(this).val(); 
      showFields(option); 
      return false; 
     }); 

     function showFields(option) { 
      var content = ''; 
      for (var i = 1; i <= option; i++) { 
       content += '<div id="course_'+i+'"><label>Course # '+i+'</label><br /><label>Course Name:</label> <select id="coursename_'+i+'" name="coursename_'+i+'"><option value="">--- Select ---</option>"' 
        <?php 
         $course_query = $db_con->prepare("SELECT course_id, course_name FROM courses_selection_list "); 
         $course_query->execute(); 
         $data = $course_query->fetchAll(); 
         foreach ($data as $row) { 
          //dropdown values pulled from database 
          echo 'content += \'<option value="' . $row['course_id'] . ':'.$row['course_name'].'">' . $row['course_name'] . '</option>\';'; 
         } 
        ?> 
       '"';     

       content += '</select></br>Class Start Date: <input type="text" id="start_date_'+i+'" name="start_date_'+i+'" class="datepicker" />Class End Date: <input type="text" id="end_date_'+i+'" name="end_date_'+i+'" class="datepicker" /><div>'; 

      } 

      $('#course_catalog').html(content); 
     } 
    }); 

    $(function() { 
     $(".datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val(); 
    }); 
</script>

HTMLをあなたのページにjQueryのUIを含めます。 <head>で

http://jqueryui.com/download/

：

<script type=text/javascript src="your_jquery_ui.js"></script>

[OK]を、あなたは今、あなたのクラスをチェックするhasDatepickerの代わりdatepickerないjQueryのUIを、含まれ？

あなたがここで見るとおり：http://jqueryui.com/datepicker/

出典

2013-11-20 18:24:33

'hasDatepicker'クラスは、日付が選択されたときにのみ表示されます。 –

あなたが入力（datepickers）を追加しているので、動的に、最も簡単な解決策は、これを追加することです：あなたは、

$('body').on('focus',".datepicker", function(){ 
    $(this).datepicker(); 
});

jsFiddle example

をBTW実際には、ページ内で1つのドキュメントレディコールが必要です。

出典

2013-11-20 18:32:22 j08691

非常に滑らかです！ちょうど不思議なことに、 '.datepicker'が何度もフォーカスされているときにこれが問題を引き起こすでしょうか？'this' datepickerがすでに作成されているかどうかをチェックする方法はありますか？それは問題なの？ – zgood

私はあなたが問題に遭遇するとは思わないが、閉鎖後にいつもデートピッカーを破壊することができる。 – j08691

Jqueryui Datepickerにカレンダーが表示されない

答えて

関連する問題