Add day slider to jQuery UI datetimepicker

Question

Referring to the standard examples for the jQuery ui datetimepicker http://trentrichardson.com/examples/timepicker/#slider_examples

I am looking for a way to add a day slider in addition to the sliders for hours, minutes,seconds etc.

HTML:

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

JavaScript:

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

I prepared a basic jsfiddle: https://jsfiddle.net/anet04mv/3/

Any hint to proceed is much appreciated, thanks!

Answer 1

Not sure oif this will help you. What I suggest is to collect the days from the calendar and then make the slider.

Working Example: https://jsfiddle.net/Twisty/anet04mv/6/

Here are the highlights:

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

Currently, this will work until the month is changed. Just feed the new calendar back through and replace the slider to get the new number of days.

Since I do not know what you're trying to accomplish exactly, I am not sure if this is what you're looking for. I considered that you might want the slider to change the selected day... which would require a callback for slide.