SAPUI5应用程序中的JQuery日期滑块

我发现，我有一个定制的SAPUI5，我想在其中为日期选择器使用滑块

我已经在

Controller.js

中包含了

iquery ui

lib（因为我们将在Fiori Launchpad中运行应用程序）。并在

onAfterRendering（）

中包含了所示帖子中的JS代码，建议使用该代码代替UI5提供的

$（文档）

当我运行应用程序时，它会显示
TypeError:$（…）。slider
不是一个函数，尽管我在网络选项卡
jqueryui.js
中看到正在加载

我还尝试从
index.html
使其工作-然后控制台中没有错误，只是缺少滑块

有人能给点建议吗

这是我在onAfterRendering函数中的代码

$('.slider-time').html(dt_from);
$('.slider-time2').html(dt_to);
var min_val = Date.parse(dt_from) / 1000;
var max_val = Date.parse(dt_to) / 1000;

function zeroPad(num, places) {
var zero = places - num.toString().length + 1;
return Array(+(zero > 0 && zero)).join("0") + num;
}

function formatDT(__dt) {
var year = __dt.getFullYear();
var month = zeroPad(__dt.getMonth() + 1, 2);
var date = zeroPad(__dt.getDate(), 2);
var hours = zeroPad(__dt.getHours(), 2);
var minutes = zeroPad(__dt.getMinutes(), 2);
var seconds = zeroPad(__dt.getSeconds(), 2);
return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
};

$("#slider-range").slider({
range: true,
min: min_val,
max: max_val,
step: 10,
values: [min_val, max_val],
slide: function (e, ui) {

var dt_cur_from = new Date(ui.values[0] * 1000); 
$('.slider-time').html(formatDT(dt_cur_from));

var dt_cur_to = new Date(ui.values[1] * 1000);                 
$('.slider-time2').html(formatDT(dt_cur_to));

感谢您在plunkr上的示例。
我仍在调试，但我也想知道：
您不使用SAPUI5或SAPUI5中的TimePickerSliders控件有特殊原因吗
在SAPUI5和OpenUI5中都可用的滑块控件

您可以保存一些自己的编码，设计可能更像Fiori。
我用以下方式修改了Main.view.xml的“内容”：

<sap.ui.core.mvc:View controllerName="view.Main"
    xmlns="sap.m"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc"
  xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Slider">
        <content>

    <Text text="TimePickerSliders" class="sapUiSmallMarginBottom"/>
    <TimePickerSliders
      id="TPS2"
      valueFormat="hh:mm:ss a"
      displayFormat="HH:mm:ss"
      change="handleChange"
      height="400px"
      support2400="true"/>

    <Text text="Slider with tickmarks and labels" class="sapUiSmallMarginBottom"/>
    <Slider min="0" max="60" enableTickmarks="true" value="30" width="90%" class="sapUiSmallMarginBottom">
      <ResponsiveScale tickmarksBetweenLabels="5"/>
    </Slider>
    <Text text="Minutes" class="sapUiSmallMarginBottom"/>

    <Slider min="0" max="24" enableTickmarks="true" class="sapUiSmallMarginBottom" width="90%">
      <ResponsiveScale tickmarksBetweenLabels="1"/>
    </Slider>
    <Text text="Hours" class="sapUiSmallMarginBottom"/>
        </content>
    </Page>
</sap.ui.core.mvc:View>



这是否符合您的要求？
使用Controller的滑块功能编辑了上面的帖子。如果您能在类似的工具中创建一个示例，可能会有助于调试该问题。是否有一个特殊的原因，为什么你使用滑块日期选择器？您是否熟悉和的UI5示例？您还可以下载这些示例的编码。Hi。该应用程序的时间跨度为24小时，所以slider是一个比datetime选择器更舒适的工具。我为plunker添加了代码