Question

我正在创建一个预订表格，我希望客户从收音机盒中选择两个选项。两个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;
}

}）;

Answer 1

您希望使用类或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以使其更有意义。也就是说，我在这里的答案应该适用于你想要做的事情。

使用单选按钮显示/隐藏日期选择器

1 个答案: