Dans jquery ui datepicker comment puis-je faire timepicker.co changer de temps si samedi est choisi?

Question

En ce moment, j'ai du mal à faire Datepicker changer les options timepicker.co si samedi est choisi.

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

Des idées pour le faire?

Merci!

Answer 1

A eu un certain temps, et fait une démonstration pour vous.

D'abord, regardez les démos disponibles: http://jsfiddle.net/wvega/A9cE6/embedded/result,js,html,css,resources/

d'abord vous aurez besoin d'une association entre le jour choisi, et les heures qui doivent être fixés. Je l'ai fait en utilisant un objet de tableaux.

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

Fait quelques suppositions là. Pourrait faire cela quand la sélection est faite, mais a estimé que c'était un peu plus facile.

Fait d'autres suppositions puisque vous n'avez pas inclus un exemple ou une quantité complète de code.

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> 

Nous avons ici une date et deux champs de temps. C'est un emballage de base juste pour avoir l'air sympa.

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; 
    } 
    }); 
}); 

de travail Exemple: https://jsfiddle.net/Twisty/r1dfLr9r/

Vous pouvez voir lorsque l'utilisateur sélectionne une date, le texte de la date est repassée au rappel onSelect. Il y a des façons plus difficiles d'obtenir ces données si vous voulez, mais je voulais que ce soit facile, alors j'ai juste découpé le texte dont j'avais besoin.

Nous croisons que l'index dans notre objet hours et maintenant nous savons quelles heures nous voulons définir. Nous pouvons ensuite utiliser la méthode setTime de timepicker. Timepicker prend quelques formats pour setTime, le plus simple est une chaîne, comme "7:00a". Nous ajoutons donc un petit code de format à mesure que nous prenons les heures que nous voulons pour ce jour. Nous définissons ensuite les valeurs de temps. Vous pouvez également entrer ces chaînes dans le tableau si vous le souhaitez. Quelque chose comme:

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

Votre préférence. J'espère que cela t'aides.