Javascript 将日期滑块添加到jQueryUIDateTimePicker

参考jQueryUIDateTimePicker的标准示例

我正在寻找一种方法，除了用于小时、分钟、秒等的滑块之外，还可以添加一个日滑块

HTML:

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

我准备了一个基本的JSFIDLE：

---

非常感谢任何继续进行的提示，谢谢

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

工作示例：

以下是要点：

  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);
  }

功能收获天数（目标）{
var dayelms=target.find（“[data handler='selectDay']”）；
风险值天数=[]；
Dayelms.每个（功能（ind，el）{
推({
日期：parseInt（$（el）.text（）），
所选：$（el）.hasClass（“ui日期选择器当前日期”）
});
});
console.log（“找到”+days.length+“days.”，days）；
返程天数；
}
函数makeDaySlider（目标，ds）{
无功电流=0；
$。每个（ds，函数（k，v）{
如果（v.选定）{
电流=k；
}
});
变量$cont=$（“”{
类：“ui日选择器分区”
});
$cont.append（“”）；
$cont.find（“dl”）。追加（“日”）；
$cont.find（“dt”）。追加（“”）；
$slide=$（“”{
类：“ui tpicker日滑块”
});
$cont.find（“dd”）。追加（$slide）；
$cont.insertAfter（target.find（“.ui日期选择器日历”）；
$slide.slider({
最大：ds.length，
值：当前
});
console.log（“为“+ds.length+”天创建了日期滑块，选择了当前日期：”+（当前+1），$slide）；
}

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

---

因为我不知道你到底想要完成什么，我不确定这是否是你想要的。我认为您可能希望滑块更改选定的日期。。。哪种方法需要回调

幻灯片

您希望用户使用滑块，而不是从天数列表中选择一天？如果月份发生变化，是否希望天数随之调整？目的还不清楚。谢谢，看起来很有希望。我应该做些什么更改才能使它在HTML中使用

而不是

？更新的JSFIDLE:

  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);
  }