1

我是 JQuery 的相对新手，所以请放轻松；）

我有一个需要有两个选择选项的预订表格：

逗留天数（下拉菜单） 开始日期（日期选择器）

选择了一定天数后，需要隐藏日期选择器上的某些天数。

选项 3 天 - 仅限周五预订 4 天 - 仅限周一预订 7 天 - 仅限周六预订

我几乎设法用 pikaday 做到了这一点，但遇到了“未捕获的 RangeError：超过了最大调用堆栈大小”。问题，因为我的 JQuery 不断调用同一个选择器。

这是我使用的代码：

function next_day() {
            var index;
            var day_nums = document.getElementById("day_nums");
            var options = day_nums.getElementsByTagName("option")
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected) {
                    index = i;
                }
            }
            index = index + 1;
            if (index >= day_nums.length) {
                alert('For a flexible booking, please call: ##########')
            }
            else {               
                day_nums.value = day_nums[index].value;
            }
 
        }
        function prev_day() {
            var index;
            var day_nums = document.getElementById("day_nums");
            var options = day_nums.getElementsByTagName("option")
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected) {
                    index = i;
                }
            }
            index = index - 1;
 
            if (index <= -1) {
                // Alert('First record reached')
            }
            else {               
                day_nums.value = day_nums[index].value;
            }
        }    




/*PIKADAY*/
function get_days(currnum)
{
	if(currnum > 0) { $('#date_div').show(); }
	else { $('#date_div').hide(); }
}

$(document).ready(function () {

	
  $(".button, #day_nums").on("click", function() {
    var zValue = $('#day_nums').val();
	  get_days(zValue);
	  update_date(zValue);
	 // $("#cal_picker").val("");
  });
	
	
 function update_date(day_num)
 {
    var picker = new Pikaday({
		bound:false,
    disableDayFn: function(date){
       
		if(day_num == 3) { // FRIDAY
		return date.getDay() === 1 
			|| date.getDay() === 2 
			|| date.getDay() === 3 
			|| date.getDay() === 4
			
			|| date.getDay() === 6 
			|| date.getDay() === 7
			|| date.getDay() === 0;
		}
       
		if(day_num == 4) { // MONDAY
		return date.getDay() === 2 
			|| date.getDay() === 3 
			|| date.getDay() === 4  
			|| date.getDay() === 5
			|| date.getDay() === 6
			|| date.getDay() === 7
			|| date.getDay() === 0;
		}
       
		if(day_num >= 7) { // SATURDAY
		return date.getDay() === 1 
			|| date.getDay() === 2
			|| date.getDay() === 3 
			|| date.getDay() === 4  
			|| date.getDay() === 5
			|| date.getDay() === 7
			|| date.getDay() === 0;
		}
    },
    field: document.getElementById('cal_picker')
	});
 }

	
});
.num_nights, #date_div {display: none;}
#num_nights_off {display: block;}
.inc_day, .dec_day { 
	background:#047fcb;
    text-align: center;
    font-weight: bold;
    color: #fff;
    display: initial;
    padding: 5px 10px;
    margin: 0 2px;
	}
<script src="https://raw.githubusercontent.com/dbushell/Pikaday/master/pikaday.js"></script>

<div id="day_picker">Nights:

	<select name="day_nums" id="day_nums">
        <option value="0">0</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="7">7</option>
    </select>
	
	<input type="button" class="button" value="-" onclick="prev_day();"/>&nbsp;<input type="button" class="button" value="+" onclick="next_day();" />
	
</div>


<div id="date_div">Dates: <input id="cal_picker" name="curr_date" value=""></div>

4

0 回答 0