将日期滑块添加到 jQuery UI datetimepicker

Question

参考 jQuery ui 日期时间选择器的标准示例 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

Add day slider to jQuery UI datetimepicker

javascript

jquery-ui

datepicker

datetimepicker

jquery-ui-datepicker