在jquery ui datepicker如果我选择星期六，我该如何让timepicker.co改变时间？

Question

目前我正在努力使Datepicker更改timepicker.co选项，如果选择星期六。

$(".selector").datepicker({ 
if(Saturday chosen) { 
Time changed 7am - 2pm 
     } 
    }) 

任何想法如何做到这一点？

谢谢！

Answer 1

已经有一段时间了，为你做了一个演示。

首先，看看现有的演示：http://jsfiddle.net/wvega/A9cE6/embedded/result,js,html,css,resources/

您首先需要选择工作日，并应设置小时之间的一些关联。我用数组的对象做了这个。

var hours = { 
    sunday: [null, null], 
    monday: [6, 22], 
    tuesday: [6, 22], 
    wednesday: [6, 22], 
    thursday: [6, 22], 
    friday: [6, 22], 
    saturday: [7, 14], 
}; 

在那里做了一些猜测。可以在做出选择时做到这一点，但觉得这更容易一些。

由于您未包含示例或完整数量的代码，因此进行了一些其他猜测。

HTML

<div class="ui-widget" style="width: 340px;"> 
    <div class="ui-widget-header ui-corner-top">Date &amp; Time</div> 
    <div class="ui-widget-content ui-corner-bottom"> 
    <ul> 
     <li> 
     <label>Select Date</label> 
     <input type="text" class="date selector" id="date-1" /> 
     </li> 
     <li> 
     <label>Select Time</label> 
     <input type="text" class="time selector" id="time-1" /> - 
     <input type="text" class="time selector" id="time-2" /> 
     </li> 
    </ul> 
    <button id="date-time-save">Set Date &amp; Time</button> 
    </div> 
</div> 

在这里，我们有一个日期和两个时间字段。这是一个基本的包装，只是为了看起来不错。

的JavaScript

var hours = { 
    sunday: [null, null], 
    monday: [6, 22], 
    tuesday: [6, 22], 
    wednesday: [6, 22], 
    thursday: [6, 22], 
    friday: [6, 22], 
    saturday: [7, 14], 
}; 

$(function() { 
    $(".date").datepicker({ 
    dateFormat: "DD m/d/y", 
    onSelect: function(dt, $dtp) { 
     var selectWeekDay = dt.slice(0, dt.indexOf(" ")).toLowerCase(); 
     var selectHours = hours[selectWeekDay]; 
     if (selectWeekDay === "sunday") { 
     $(".time").val(""); 
     return true; 
     } 
     var hour1 = selectHours[0] < 12 ? selectHours[0] + ":00a" : selectHours[0] + "00p"; 
     var hour2 = selectHours[1] < 12 ? selectHours[1] + ":00a" : selectHours[1] + ":00p" 
     $("#time-1").timepicker("setTime", hour1); 
     $("#time-2").timepicker("setTime", hour2); 
    } 
    }); 
    $(".time").timepicker({ 
    timeFormat: 'h:mm p', 
    interval: 30, 
    minTime: '6', 
    maxTime: '10:00pm', 
    startTime: '6:00', 
    dynamic: false, 
    dropdown: true, 
    scrollbar: true 
    }); 

    $("#date-time-save").button({ 
    icon: "ui-icon-disk", 
    click: function(e) { 
     e.preventDefault(); 
     return false; 
    } 
    }); 
}); 

工作实例：https://jsfiddle.net/Twisty/r1dfLr9r/

当用户选择一个日期可以看到，日期文本传递回onSelect回调。如果需要，还有一些更难的方法来获取这些数据，但我希望它很容易，所以我只是删除了我需要的文本。

我们交叉引用，作为我们的hours对象中的索引，现在我们知道我们要设置几个小时。然后我们可以使用timepicker的setTime方法。

对于setTime，Timepicker会采用几种格式，最简单的是一个字符串，如"7:00a"。所以我们添加了一些格式代码，因为我们提取了当天想要的时间。然后我们设置时间值。如果需要，也可以在数组中输入这些字符串。例如：

var hours = { 
    sunday: [null, null], 
    monday: ["6:00a", "11:00p"], 
    tuesday: ["6:00a", "11:00p"], 
    wednesday: ["6:00a", "11:00p"], 
    thursday: ["6:00a", "11:00p"], 
    friday: ["6:00a", "11:00p"], 
    saturday: ["7:00a", "2:00p"], 
}; 

您的偏好。希望这可以帮助。