在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"], 
}; 

您的偏好。希望這可以幫助。