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

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

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

在jquery ui datepicker中，如果选择星期六，我如何才能使timepicker.co更改时间？

1 个答案: