Question

我是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>

Pickaday - 天选择和限制

0 个答案: