ラジオボタンでDatepickerを表示/非表示

Question

ラジオボックスから2つのオプションの中から顧客に選択させたい予約フォームを作成しています。両方のラジオボックスは、独自の日付ピッカーを表示する予定です。

問題があります。私は負荷でそれを隠す方法を理解できません、私はDivでそれを隠すなど、CSSなどでそれを隠そうとするなど、さまざまな方法を試してみました。

私の質問は、どのラジオボタンがチェックされているかに応じて、どのように各日付ピッカーを表示するのですか？一方が選択されていて、もう一方を選択したい場合、前のものが隠され、チェックされたものが表示されます。

マイコードHTMLコード：

<tr><td> Velg lengde av bookingen: </tr></td> 
<tr><td> <label for="timer">En til flere timer</label> <input type="radio" id="radiotimer" name="lengde" value="Timer"> 
     <label for="dager">En til flere dager</label><input type="radio" id=" radiodager" name="lengde" value="Dager"></tr></td> 

<div class="VisDatoValg"> 
<script>valgavdato() </script> 
    <tr><td><label for="from">Book fra:</label></tr></td> 
<tr><td><input type="text" id="fra" name="Fra"></tr></td> 
    <tr><td><label for="to">Book til</label></tr></td> 
<tr><td> <input type="text" id="til" name="Til"></tr></td> 
    </div> 

私のJavascriptコード：

$(function valgavdato() { 
var dateFormat = "mm/dd/yy", 
    to_MaxDate = 13; // From date + this = to maxDate 

    from = $("#fra") 
.datepicker({ 
    minDate: '0+', 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 1 
}) 
.on("change", function() { 
    var PickedDate = getDate(this); 
    // See that date is in UTC format. 
    console.log("From DatePicker: "+JSON.stringify(PickedDate)); 

    // Process the picked date. 
    var tempDay = PickedDate.getDate() + to_MaxDate; // Add a number of days to the picked date. 
    var tempMonth = PickedDate.getMonth() + 1; // Because months are zero based. 
    var tempYear = PickedDate.getYear() + 1900; // Because years are 1900 based 
    console.log("Temp date: "+ tempYear+"/"+tempMonth+"/"+tempDay +" --- It may look impossible... But Date() handles it."); 

    // Create a date object in a UTC format. 
    var newMaxDate = new Date(Date.UTC(tempYear, tempMonth-1, tempDay, 0, 0, 0)); 
    console.log( "New max date: : "+ JSON.stringify(newMaxDate)); 

    // Set the minDate ans maxDate options. 
    to.datepicker("option", {"minDate": PickedDate, "maxDate": newMaxDate}); 

}), 
    to = $("#til").datepicker({ 
     maxDate: '14+', 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1 
    }) 
.on("change", function() { 
    from.datepicker("option", "maxDate", getDate(this)); 
}); 

function getDate(element) { 
    var date; 
    try { 
     date = $.datepicker.parseDate(dateFormat, element.value); 
    } catch(error) { 
     date = null; 
    } 

    return date; 
} 

}）;

Answer 1

あなたは、次のようなクラスまたはIDを使用してdatepickersをラップしたい：あなたは、次のような何かをしたい、あなたのCSSで

<div class="datepicker1"><tr><td><label for="from">Book fra:</label></tr></td> 
<tr><td><input type="text" id="fra" name="Fra"></tr></td></div> 
<div class="datepicker2"> 
<tr><td><label for="to">Book til</label></tr></td> 
<tr><td> <input type="text" id="til" name="Til"></tr></td> 
</div> 

：

JavaScriptで

.datepicker1, .datepicker2 { 
    display: none; 
    } 

、あなたは欲しいもの：

$.('#radiotimer').click(function() { 
     $.('.datepicker1').show(); 
     $.('.datepicker2').hide(); 
    } 
    $.('#dagertimer').click(function() { 
     $.('.datepicker2').show(); 
     $.('.datepicker1').hide(); 
    } 

これはあなたが探しているはずの非常に単純な例ですそれで、あなたはおそらくそれをもっと拡大したいと思うでしょう。私はまた、あなたのHTMLをより意味をなさないように書き直すことに目を向けるでしょう。それは、ここの私の答えはあなたがしようとしているもののために働くはずだと言いました。