天滑块加入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

回答

相关问题