asp.netでJquery Dateピッカーがブートストラップモデルのポップアップに表示されない

Question

jqueryの日付がポップアップモデルに表示されません。以下は私がやっていることです。以下は

<div class="modal fade" id="DateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
          <h4 class="modal-title">Attachment</h4> 
         </div> 
         <div class="modal-body"> 
          <div class="row"> 
           <div class="col-md-6"> 
            <div class="form-group"> 
             <div class="row"> 
              <label class="col-sm-5 control-label" for="Description">Date</label> 
              <div class="col-sm-7"> 
               <div class="input-group date"> 
                <div class="input-group-addon"> 
                 <i class="fa fa-calendar"></i> 
                </div> 
                <input type="text" class="form-control pull-right" id="datepicker"> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 

          </div> 
         </div> 
         <div class="modal-footer"> 
          <button data-dismiss="modal" class="btn btn-danger" type="button">OK</button> 

         </div> 
        </div> 

       </div> 
      </div> 

私が間違っているのどこ私は知らない私のクライアント側のコード

$(function() { 
    $('#datepicker').datepicker({ 
     autoclose: true 
     }) 

です。また、エラーが発生しましたUncaught ReferenceError：$が定義されていません。

Answer 1

あなたは;と参照jqueryライブラリを以下のように追加する必要があります。

$(function() { 
 
    $("#datepicker").datepicker({ 
 
    autoclose: true}); 
 
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="modal fade" id="DateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
       <div class="modal-dialog"> 
 
        <div class="modal-content"> 
 
         <div class="modal-header"> 
 
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
          <h4 class="modal-title">Attachment</h4> 
 
         </div> 
 
         <div class="modal-body"> 
 
          <div class="row"> 
 
           <div class="col-md-6"> 
 
            <div class="form-group"> 
 
             <div class="row"> 
 
              <label class="col-sm-5 control-label" for="Description">Date</label> 
 
              <div class="col-sm-7"> 
 
               <div class="input-group date"> 
 
                <div class="input-group-addon"> 
 
                 <i class="fa fa-calendar"></i> 
 
                </div> 
 
                <input type="text" class="form-control pull-right" id="datepicker"> 
 
               </div> 
 
              </div> 
 
             </div> 
 
            </div> 
 
           </div> 
 

 
          </div> 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <button data-dismiss="modal" class="btn btn-danger" type="button">OK</button> 
 

 
         </div> 
 
        </div> 
 

 
       </div> 
 
      </div>