Question

参考jQuery ui datetimepicker http://trentrichardson.com/examples/timepicker/#slider_examples

的标准示例

我正在寻找一种方法来添加天滑块以及滑块的小时，分钟，秒等。

HTML：

<div id="datetimepicker1"></div>

JavaScript的：

$("#datetimepicker1").datetimepicker({
  timeFormat: 'HH:mm:ss'
});

我准备了一个基本的jsfiddle：https://jsfiddle.net/anet04mv/3/

非常感谢任何继续提示，谢谢！

Answer 1

不确定这会对您有所帮助。我建议从日历中收集日期，然后制作滑块。

工作示例：https://jsfiddle.net/Twisty/anet04mv/6/

以下是重点：

  function harvestDays(target) {
    var dayElems = target.find("[data-handler='selectDay']");
    var days = [];
    dayElems.each(function(ind, el) {
      days.push({
        day: parseInt($(el).text()),
        selected: $(el).hasClass("ui-datepicker-current-day")
      });
    });
    console.log("Found " + days.length + " Days. ", days);
    return days;
  }

  function makeDaySlider(target, ds) {
    var current = 0;
    $.each(ds, function(k, v) {
      if (v.selected) {
        current = k;
      }
    });
    var $cont = $("<div>", {
      class: "ui-daypicker-div"
    });
    $cont.append("<dl></dl>");
    $cont.find("dl").append("<dt class='ui-daypicker-label'>Day</dt>");
    $cont.find("dt").append("<dd class='ui-daypicker-day'></dd>");
    $slide = $("<div>", {
      class: "ui-tpicker-day-slider"
    });
    $cont.find("dd").append($slide);
    $cont.insertAfter(target.find(".ui-datepicker-calendar"));
    $slide.slider({
      max: ds.length,
      value: current
    });
    console.log("Created Day Slider for " + ds.length + " Days, current day selected: " + (current + 1), $slide);
  }

目前，这将有效，直到月份发生变化。只需重新输入新日历并替换滑块即可获得新的天数。

由于我不知道你想要完成什么，我不确定这是否是你正在寻找的。我认为您可能希望滑块更改所选日期...这需要回调slide。

将日期滑块添加到jQuery UI datetimepicker

1 个答案: