div要素にjQueryのdatepickerを割り当てて、値を取得する

Question

ユーザーがテキストをクリックしたときにdatepickerを使用して、datepickerで日付を選択した後、javascript変数として日付ピッカーから値を取得できます。 。私のコードは次のようである：私は日付ピッカー、ポップアップ上の日付を選択しようとしたとき、DatePickerのポップアップが、それはDatePickerのポップアップが閉じないとき

<div id="datepicker-container" style="display: none;"> 
    <div id="select-delivery-date-input"> </div> 
</div> 
<a id="show-datepicker">Select Delivery Date</a> 
<script> 
    $("#show-datepicker").click(function(){ 
     $("#datepicker-container").show(); 
    }); 
    $('#select-delivery-date-input').datepicker({ 
     dateFormat:'yy-m-d', 
     minDate: new Date(), 
    }); 
</script> 

問題があります。

Fiddle example

Answer 1

あなたは日付ピッカーのonSelectオプションを使用することができます。日付ピッカーが選択されているときに呼び出され

。この関数は、選択された日付をテキストとして、datepickerインスタンスをパラメータとして受け取ります。

次に、jQuery hide()を使用できます。ここで

ライブのサンプル：

$(document).ready(function() { 
 
    $("#show-datepicker").click(function(){ 
 
    $("#datepicker-container").show(); 
 
    }); 
 
    $('#select-delivery-date-input').datepicker({ 
 
    dateFormat:'yy-m-d', 
 
    minDate: new Date(), 
 
    onSelect: function(selectedDate){ 
 
     console.log(selectedDate); 
 
     $("#datepicker-container").hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 

 
<div id="datepicker-container" style="display: none;"> 
 
    <div id="select-delivery-date-input"> </div> 
 
</div> 
 
<a id="show-datepicker">Select Delivery Date</a>

Answer 2

変更されたコードの下に見つけてください：

$(document).ready(function() { 
var selectedDate; 

    $("#show-datepicker").click(function(){ 
     $("#datepicker-container").show(); 
    }); 
    $('#select-delivery-date-input').datepicker({ 
     dateFormat:'yy-m-d', 
     minDate: new Date(), 
     onSelect: function(date){ 
     selectedDate = date; 
     alert(selectedDate);//selected date is assigned to date1, you can use date1 anywhere 
     $("#datepicker-container").hide(); 
    } 
    } 
    ); 
});