在 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方法了。

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

您的偏好。希望这会有所帮助。