【问题标题】:JQuery Date Slider in SAPUI5 applicationSAPUI5 应用程序中的 JQuery 日期滑块
【发布时间】:2018-08-10 10:20:53
【问题描述】:

我有一个自定义 SAPUI5,我想在其中使用滑块作为日期选择器,我找到了 example

我已将 iquery-ui 库包含在 Controller.js 中(因为我们将在 Fiori Launchpad 中运行应用程序)。并包含onAfterRendering()中指定帖子的JS代码,UI5建议使用该代码代替$(document).ready

当我运行应用程序时 - 它说 TypeError: $(...).slider 不是一个函数,尽管我在“网络”选项卡中看到 jquery-ui.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));

【问题讨论】:

  • 使用控制器的滑块功能编辑了上面的帖子。
  • 如果您可以在 plnkr.co 之类的工具中创建示例,这可能有助于调试问题。您将滑块用于日期选择器是否有特殊原因?您是否熟悉 Date PickerDate Time Picker 的 UI5 示例?您还可以下载这些示例的编码。
  • 嗨。该应用程序的时间跨度为 24 小时 - 因此滑块只是比日期时间选择器更舒适的工具。我已将代码添加到 plunker link

标签: sapui5 jquery-ui-slider


【解决方案1】:

感谢您在 plunkr 上的示例。 我还在调试,但我也想知道: 是否有特殊原因,为什么您不使用 SAPUI5 中的 TimePickerSliders-control 或 滑块控件,在 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>

您的要求可以接受吗?

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-01-16
    • 1970-01-01
    • 1970-01-01
    • 2012-02-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多