我正在创建一个预订表格,我希望客户从收音机盒中选择两个选项。两个Radio Box都将显示自己的日期选择器。
我遇到的问题。我无法弄清楚如何在负载下隐藏它,我尝试了很多方法,比如用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;
}
});
答案 0 :(得分:0)
您希望使用类或ID包装日期选择器,例如:
<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>
在CSS中,您需要以下内容:
.datepicker1, .datepicker2 {
display: none;
}
在javascript中,您需要:
$.('#radiotimer').click(function() {
$.('.datepicker1').show();
$.('.datepicker2').hide();
}
$.('#dagertimer').click(function() {
$.('.datepicker2').show();
$.('.datepicker1').hide();
}
这是您应该关注的方向的一个非常简单的示例,因此您可能希望进一步扩展它。我还会考虑重写你的html以使其更有意义。也就是说,我在这里的答案应该适用于你想要做的事情。