Titanium/Appcelerator - using picker for time, produces date object with local time difference

Question

I'm using a picker (Ti.UI.Picker) and setting the type to Ti.UI.PICKER_TYPE_TIME. The purpose is to allow the user to change the time of a date entry in the database. The date is stored in a UTC timestamp. The flow goes like this:

1. User opens controller
2. The date is extracted from the DB, and stored as a Moment JS date object, using the moment.utc() method.
3. The user selects to open the picker to change the time
4. The moment.toDate() method is used to pass the required date object to the picker
5. The picker opens with time that has been corrected according to the timezone setting on their phone e.g: +1 hour.
6. When the user is done, the picker returns a date object, and the resulting time is not what they selected; in this case it's -1 hour.

I thought that by using moment.utc() I would be able to avoid this. But perhaps the picker does some internal stuff with a normal JavaScript date object, thus getting this adjustment in time.

Is there a way around this? My objective is that; if the original time is 13:00, I want the picker to open with 13:00, then if the user changes it to 15:00, I want the result from the picker to be 15:00 and the corresponding label to show as 15:00.

Here is some sample code

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();

Screenshot

Answer 1

In my case I'm setting the default value with the moment format method, and simple dates and times:

picker.setValue(moment(someTime).format("YYYY-MM-DD"));

and for time pickers:

picker.setValue(moment(someTime).format("HH:mm"));

It works perfectly