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> 

は、ここでは、日付と2時間フィールドを持っています。これは素敵に見える基本的なラッパーです。

は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オブジェクトのインデックスとしてこれを相互参照しています。今、私たちは何時間に設定したいのか分かります。次に、setTime timepickerの方法を利用できます。

setTimeの場合、タイムピッカーはいくつかのフォーマットをとりますが、最も簡単なのは"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"], 
}; 

あなたの好み。お役に立てれば。