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

【问题标题】：Show / Hide Datepicker with Radio Buttons使用单选按钮显示/隐藏日期选择器
【发布时间】：2016-10-24 18:08:16
【问题描述】：

我正在创建一个预订表单，我希望客户在其中从单选框的两个选项之间进行选择。两个单选框都将显示自己的日期选择器。

我遇到的问题。我不知道如何在加载时隐藏它，我尝试了很多方法，例如用 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;
}

});

【问题讨论】：

标签： jquery html datepicker

【解决方案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 以使其更有意义。也就是说，我在这里的回答应该适用于您尝试做的事情。

【讨论】：