I've created a Visualforce page that lists a bunch of interview time slots with a link for people to reserve them. One of the columns is showing a date/time field. Since it is a public visualforce page, the date/time field defaults to GMT.

I would like to have a picklist containing all the time zones (worldwide), where the user selects their time zone from the list and then the date/time column updates to show the times based on the newly selected time zone.

I have gotten as far as creating the apex class and vf page which almost does the trick for the current system time (which is not very far!). I figure it's a good first step, but need some help as I'm stuck. I'm struggling to get the picklist value to pass into the timezone part of the apex class. Any ideas?

Thanks

Apex Class

public class ConvertTimeZone { 
    public String YourTimeZone {get;set;}
    public String tzOptions {get;set;}
    public String YourInterviewTime{get;set;}
    
    public List<SelectOption> getTimeZoneOptions() {
        List<SelectOption> tzOptions = new List<SelectOption>();
        tzOptions.add(new SelectOption('GMT','Greenwich Mean Time'));
        tzOptions.add(new SelectOption('Australia/Sydney','Australian Eastern Daylight Time'));
        tzOptions.add(new SelectOption('Asia/Kolkata','India Standard Time'));
 
        return tzOptions;
    }
    
    public ConvertTimeZone() {
    DateTime temp = System.now();
    YourInterviewTime = temp.format('dd/MM/yyyy HH:mm a z', 'tzOptions'); 
    }
}

VF Page

<apex:page controller="ConvertTimeZone">

<apex:form >
    <apex:pageBlock title="Custom PickList Demo" id="out">
        
        <apex:pageBlockSection title="Custom Picklist Using selectList and selectOption" collapsible="false">
            <apex:actionRegion >
            <apex:selectList value="{!YourTimeZone}" multiselect="false" size="1">
                <apex:selectOptions value="{!TimeZoneOptions}"/>
            <apex:actionSupport event="onchange" rerender="yourtimezone" />
            </apex:selectList>
            </apex:actionRegion>
        <apex:actionRegion >
            <apex:outputText id="yourtimezone" value="{!YourTimeZone}" label="You have selected:"/>
        </apex:actionRegion>
        </apex:pageBlockSection>

        <apex:pageBlockSection >
        Resulting Time: <apex:actionRegion ><apex:outputText id="yourtimezone" value="{!YourInterviewTime}"/></apex:actionRegion>
        </apex:pageBlockSection>
    </apex:pageblock>
  </apex:form>
</apex:page>