Titanium/Appcelerator - 使用时间选择器,生成具有本地时差的日期对象
Titanium/Appcelerator - using picker for time, produces date object with local time difference
我正在使用选择器 (Ti.UI.Picker
) 并将类型设置为 Ti.UI.PICKER_TYPE_TIME
。目的是允许用户更改数据库中日期条目的时间。日期存储在 UTC 时间戳中。流程是这样的:
- 用户打开控制器
- 使用
moment.utc()
方法从数据库中提取日期,并存储为 Moment JS 日期对象。
- 用户选择打开选择器更改时间
moment.toDate()
方法用于将需要的日期对象传递给picker
- 选择器打开时的时间已根据 phone 上的时区设置进行了更正,例如:+1 小时。
- 当用户完成后,选择器returns一个日期对象,结果时间不是他们选择的时间;在这种情况下是 -1 小时。
我认为通过使用 moment.utc()
我可以避免这种情况。但也许选择器使用普通 JavaScript 日期对象做了一些内部操作,从而及时进行了调整。
有办法解决这个问题吗?我的 objective 是这样的;如果原始时间是 13:00,我希望选择器以 13:00 打开,然后如果用户将其更改为 15:00,我希望选择器的结果是 15:00 ] 和相应的标签显示为 15:00.
这是一些示例代码
var moment = require('alloy/moment');
var time_unix = 1396815002000;
var date_obj = moment.utc(time_unix);
function updateTimeLabel() {
$.timeLabel.setText(date_obj.format('HH:mm'));
}
function onTimeClick() {
var pickerView = Titanium.UI.createView({
backgroundColor: "#FFF",
height: 280,
bottom :-280,
zIndex: 1000
});
var cancel = Ti.UI.createButton({
title:'Cancel',
style: Ti.UI.iPhone.SystemButtonStyle.BORDERED
});
var done = Ti.UI.createButton({
title:'Done',
style: Ti.UI.iPhone.SystemButtonStyle.DONE
});
var spacer = Ti.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var toolbar = Ti.UI.iOS.createToolbar({
top: 0,
barColor: '#000',
items:[cancel,spacer,done]
});
var picker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_TIME,
value: date_obj.toDate(), // does the problem occur here?
minDate: new Date('1950-01-01'),
maxDate: new Date('2050-01-01'),
top: 45
});
cancel.addEventListener('click', function () {
console.log('cancel pressed');
pickerView.animate({bottom: 0, duration: 500});
});
done.addEventListener('click', function (evt) {
date_obj = moment.utc(picker.getValue());
updateTimeLabel(); // result is 1 hour less than picker
pickerView.animate({bottom: -280, duration: 500});
});
pickerView.add(toolbar);
pickerView.add(picker);
$.win.add(pickerView);
// picker opens with time that is +1 hour
pickerView.animate({bottom: 0, duration: 500});
}
$.win.open();
updateTimeLabel();
截图
快点 "guess"。你现在有没有机会在一个有夏令时的地方?
据我了解 "UTC"(不特定于 Moment)是没有夏令时的 "real" GMT 时间。所以可能是在取笑你。
如果是这样,那么您可以 "convert" UTC 时间来显示用户 "local" 时间中的 "same" 小时(或者至少使用夏令时更正)?然后在用户关闭对话框后转换回来。
有人可能会给你更好的解释-和解决方案;-)
/约翰
在我的例子中,我使用 moment 格式方法和简单的日期和时间设置默认值:
picker.setValue(moment(someTime).format("YYYY-MM-DD"));
对于时间选择器:
picker.setValue(moment(someTime).format("HH:mm"));
完美运行
您使用 (unix) 时间戳来存储 date/time。但是,在显示它时,您使用 momentJS Timezone :
http://momentjs.com/timezone/
另外,您"may"想要监听更改事件以更新标签。
我遇到了完全相同的问题,但意识到 -1 小时的差异是由于夏令时,将 toLocaleString() 附加到返回值后为我修复了它。
我正在使用选择器 (Ti.UI.Picker
) 并将类型设置为 Ti.UI.PICKER_TYPE_TIME
。目的是允许用户更改数据库中日期条目的时间。日期存储在 UTC 时间戳中。流程是这样的:
- 用户打开控制器
- 使用
moment.utc()
方法从数据库中提取日期,并存储为 Moment JS 日期对象。 - 用户选择打开选择器更改时间
moment.toDate()
方法用于将需要的日期对象传递给picker- 选择器打开时的时间已根据 phone 上的时区设置进行了更正,例如:+1 小时。
- 当用户完成后,选择器returns一个日期对象,结果时间不是他们选择的时间;在这种情况下是 -1 小时。
我认为通过使用 moment.utc()
我可以避免这种情况。但也许选择器使用普通 JavaScript 日期对象做了一些内部操作,从而及时进行了调整。
有办法解决这个问题吗?我的 objective 是这样的;如果原始时间是 13:00,我希望选择器以 13:00 打开,然后如果用户将其更改为 15:00,我希望选择器的结果是 15:00 ] 和相应的标签显示为 15:00.
这是一些示例代码
var moment = require('alloy/moment');
var time_unix = 1396815002000;
var date_obj = moment.utc(time_unix);
function updateTimeLabel() {
$.timeLabel.setText(date_obj.format('HH:mm'));
}
function onTimeClick() {
var pickerView = Titanium.UI.createView({
backgroundColor: "#FFF",
height: 280,
bottom :-280,
zIndex: 1000
});
var cancel = Ti.UI.createButton({
title:'Cancel',
style: Ti.UI.iPhone.SystemButtonStyle.BORDERED
});
var done = Ti.UI.createButton({
title:'Done',
style: Ti.UI.iPhone.SystemButtonStyle.DONE
});
var spacer = Ti.UI.createButton({
systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
var toolbar = Ti.UI.iOS.createToolbar({
top: 0,
barColor: '#000',
items:[cancel,spacer,done]
});
var picker = Ti.UI.createPicker({
type: Ti.UI.PICKER_TYPE_TIME,
value: date_obj.toDate(), // does the problem occur here?
minDate: new Date('1950-01-01'),
maxDate: new Date('2050-01-01'),
top: 45
});
cancel.addEventListener('click', function () {
console.log('cancel pressed');
pickerView.animate({bottom: 0, duration: 500});
});
done.addEventListener('click', function (evt) {
date_obj = moment.utc(picker.getValue());
updateTimeLabel(); // result is 1 hour less than picker
pickerView.animate({bottom: -280, duration: 500});
});
pickerView.add(toolbar);
pickerView.add(picker);
$.win.add(pickerView);
// picker opens with time that is +1 hour
pickerView.animate({bottom: 0, duration: 500});
}
$.win.open();
updateTimeLabel();
截图
快点 "guess"。你现在有没有机会在一个有夏令时的地方?
据我了解 "UTC"(不特定于 Moment)是没有夏令时的 "real" GMT 时间。所以可能是在取笑你。
如果是这样,那么您可以 "convert" UTC 时间来显示用户 "local" 时间中的 "same" 小时(或者至少使用夏令时更正)?然后在用户关闭对话框后转换回来。
有人可能会给你更好的解释-和解决方案;-)
/约翰
在我的例子中,我使用 moment 格式方法和简单的日期和时间设置默认值:
picker.setValue(moment(someTime).format("YYYY-MM-DD"));
对于时间选择器:
picker.setValue(moment(someTime).format("HH:mm"));
完美运行
您使用 (unix) 时间戳来存储 date/time。但是,在显示它时,您使用 momentJS Timezone : http://momentjs.com/timezone/
另外,您"may"想要监听更改事件以更新标签。
我遇到了完全相同的问题,但意识到 -1 小时的差异是由于夏令时,将 toLocaleString() 附加到返回值后为我修复了它。