JQuery SAPUI5 应用程序中的日期滑块
JQuery Date Slider in SAPUI5 application
我有一个自定义 SAPUI5,我想在其中使用滑块作为日期选择器,我发现 example
我已将 iquery-ui
库包含在 Controller.js
中(我们将 运行 应用程序包含在 Fiori Launchpad 中)。并在onAfterRendering()
中包含了post中的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));
感谢您在 plunkr 上的示例。
我还在调试,但我也想知道:
是否有特殊原因,为什么您不使用 SAPUI5 中的 TimePickerSliders 控件或
Slider-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>
这可以满足您的要求吗?
我有一个自定义 SAPUI5,我想在其中使用滑块作为日期选择器,我发现 example
我已将 iquery-ui
库包含在 Controller.js
中(我们将 运行 应用程序包含在 Fiori Launchpad 中)。并在onAfterRendering()
中包含了post中的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));
感谢您在 plunkr 上的示例。 我还在调试,但我也想知道: 是否有特殊原因,为什么您不使用 SAPUI5 中的 TimePickerSliders 控件或 Slider-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>
这可以满足您的要求吗?