ドロップダウンでアイテムを選択した後の日付ピッカー

Question

ドロップダウン値を持つ入力フィールドを作成しようとしています。また、特定の項目（日付の選択）が選択されている場合、日付を選択できるように日付ピッカーを表示したいと考えています。

私の問題は、次のとおりです。

1. 日付ピッカーダイアログがポップアップしませんすぐに「選択日付」を選択した場合。フィールドを再度クリックして表示する必要があります。

2. 「日付の選択」を選択すると、フィールドがクリックされるたびに日付ピッカーが表示されるようになりました。 datepickerは、 "Select Date"が選択されたときにのみ表示する必要があります。

   $('.dropdown-menu a').click(function() { 
    
       var selectValue = $(this).attr('data-value'); 
    
       var selectText = $(this).attr('data-text'); 
    
   
    
       if (selectValue == 3) { 
    
       $('#date_select').datepicker({ 
    
        daysOfWeekDisabled: "0,6", 
    
        autoclose: true, 
    
        todayHighlight: true 
    
       }); 
    
       $("#date_select").datepicker("show"); 
    
       } else { 
    
       $("#date_select").val(selectText); 
    
       } 
    
   });

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    
   <script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> 
    
   <div id="pickDate" class="input-group dropdown date"> 
    
       <input type="text" id="date_select" class="form-control" data-toggle="dropdown" required/> 
    
       <ul class="dropdown-menu" id="date_menu"> 
    
       <li><a href="#" data-value="1" data-text="Soon">Soon</a></li> 
    
       <li><a href="#" data-value="2" data-text="Someday">Someday</a></li> 
    
       <li><a href="#" data-value="3" data-text="Select Date">Select Date</a></li> 
    
       </ul> 
    
       <span class="input-group-addon" data-toggle="dropdown"> 
    
        <span role="button" class="caret"></span> 
    
       </span> 
    
   </div>

   私は、ブートストラップ日付ピッカーを使用しています：

は、ここに私のコードです。

Answer 1

これは、あなたが誰3は、それが隠されたwillbeないオプションを選択した場合のみ、日付ピッカーを表示します2

$('.dropdown-menu a').click(function() { 
    var selectValue = $(this).attr('data-value'); 
    var selectText = $(this).attr('data-text'); 
    if (selectValue == 3) { 
    $('#pickDate').datepicker({ 
    daysOfWeekDisabled: "0,6", 
    autoclose: true, 
    todayHighlight: true 
    }); 
    $('.ui-datepicker').css("display","block"); 
    } 
    else { 
    $('#date_select').val(selectText); 

    $('.ui-datepicker').css("display","none"); 
    } 
}); 

問題＃のために変更されたコードを見てみてください。

あなたのために働くかどうか教えてください。

問題1：「表示するには、もう一度フィールドをクリックする必要があります。期待される成果は？