天滑塊加入jQuery用戶界面的DateTimePicker

參考的jQuery用戶界面的DateTimePicker http://trentrichardson.com/examples/timepicker/#slider_examples 天滑塊加入jQuery用戶界面的DateTimePicker

我正在尋找一種方式，用以增加一天滑塊，滑塊時，分，秒等標準的例子。

HTML：

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

的JavaScript：

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

我準備了一個基本的jsfiddle：https://jsfiddle.net/anet04mv/3/

任何暗示繼續非常感謝，謝謝！

來源

2017-03-09 Jakob Vinther

您希望用戶使用Slider而不是從日期列表中選擇一天？如果月份發生變化，您是否希望天數與其一起調整？目的不明確。 – Twisty

不確定如果這會幫助你。我建議從日曆中收集日期，然後製作滑塊。

工作實例：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。

來源

2017-03-10 19:46:36 Twisty

謝謝，它看起來很有希望。我應該改變什麼，以使其在'HTML中使用''而不是'

'？更新了JsFiddle：https：//jsfiddle.net/PhazzAgtig/k7ura2L0/ –

天滑塊加入jQuery用戶界面的DateTimePicker

回答

相關問題