在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对象中的索引进行交叉引用，现在我们知道要设置什么小时了。 然后，我们可以使用时间选择器的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"],
};

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