How to programatically set a date in jquery mobile Datebox plugin 1.1.0

Question

I want to programmatically set date for the input with datebox control, For this i know i can use something like this

$(element).trigger('datebox', {'method':'set', 'value':'dateString'});

but this doesn't seem to update the control(i.e when i open the calendar, it is set to current date and not equal to the value in the input field)

EDIT: based on JTsage's pointers i overwrote the default dateformat to mm/dd/yyyy, using sth like this.

jQuery.extend(jQuery.mobile.datebox.prototype.options.lang, {
    'en': {
        dateFormat: '%m/%d/%Y'

    }
});
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    useLang: 'en'
});

Then i tried setting the date using sth like this

$(element).trigger('datebox', {'method':'set', value:'07/02/2012'});

but this date is not appearing when i navigate to the page..Interestingly when i tried updating the date from firebug console(being on that page) it updated the field as well as datebox control.

I have no idea why this is happening..Need help, please respond JT

Answer 1

So finally i fixed the issue, by doing this

jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'overrideDateFormat': '%m-%d-%Y',
    'overrideHeaderFormat': '%m-%d-%Y'
});

setting the value of the input field explicitly

$(element).val('06-21-2012');

and then refreshing the datebox

$(element).trigger('datebox', {'method':'set', 'value':'06-21-2012'});