Hello,

I have a custom Time object to track timesheet info for cases, accounts and other objects. Part of the entry is to enter the start and end times, but this is a normal text field, so I updated the functionality putting together a visualforce that uses jquery to create a time spinner on both time entries, this way you can easily select an hour and minute for start and end times. My problem lies on the component to be used for inputting the time. Since jquery styles the input to add the sppinner arrows all I need is an <input>. So I tried this BUT I cannot get the html input text to pass in the values to the controller, although the inputs layout correctly in the page. See below pic and code:

VF page:

<apex:pageBlockSection title="Time and conditions" columns="2">
            <apex:inputField value="{!time.Date__c}" required="true"/>
            <apex:inputField value="{!time.Workplace__c}" required="true"/>
            <apex:pageBlockSection showHeader="false" columns="4">
                <apex:outputLabel style="align:right;float:right;text-align:right;font-size: 91%;font-weight: bold;color:rgb(66, 66, 51);" >Time Start:</apex:outputlabel>
                <input id="hourSpinnerStart" class="hourSpinner" value="{!startTimeHrs}" style="width:20px;height:11px;float:left;"/>
                <input id="minuteSpinnerStart"  class="minuteSpinner"  value="{!startTimeMins}" style="width:20px;height:11px;"/>
            </apex:pageBlockSection>
            <apex:inputField value="{!time.Own_car_used__c}"/>
            <apex:inputField value="{!time.Lunchtime__c}"/>
            <apex:inputField value="{!time.Full_day_purchased__c}"/>
                 <apex:pageBlockSection showHeader="false" columns="4">
                    <apex:outputLabel style="align:right;float:right;text-align:right;font-size: 91%;font-weight: bold;color:rgb(66, 66, 51);" >Time End:</apex:outputlabel>
                    <input id="hourSpinnerEnd" class="hourSpinner" value="{!endTimeHrs}" style="width:20px;height:11px;"/>
                    <input id="minuteSpinnerEnd"  class="minuteSpinner"  value="{!endTimeMins}" style="width:20px;height:11px;"/>
                  </apex:pageBlockSection>

            <apex:inputField value="{!time.Urgent_Request__c}"/>
            <apex:inputField value="{!time.Unspecified__c}"/>
            <apex:inputField value="{!time.Incoming_mobile_call__c}"/>
            <apex:inputField value="{!time.Unspecified_Time__c}"/>
            <apex:inputField value="{!time.Standby_Time__c}"/>     
        </apex:pageBlockSection>

jquery in VF page:

    <script>
    var ptime;
        $j = jQuery.noConflict();
        $j(function() {
            ptime = $j("input[id$='hourSpinner']").val(); 
            $j(".hourSpinner").spinner({min: 0,max: 23,step: 1,start: 0,precision: 0,width: '2em'});
            $j(".minuteSpinner").spinner({min: 0,max: 45,step: 15,start:0,precision: 0,width: '2em'});
        });
    </script>

 This renders correctly in the page since both the spinners are one right beside the other. The inputs are binded to a properties in the controller so to receive the values.

Controller code:

public class Time_NewEntry {
    private SFL5_time__c mTime;
    public String retURL;
    //Time fields, these will map to Start and End time fields on the Time object
    public String startTimeHrs {get;set;}
    public String endTimeHrs {get;set;}
    public String startTimeMins {get;set;}
    public String endTimeMins {get;set;}

    public Time_NewEntry() {
        mTime = new SFl5_Time__c();
       // List<RecordType> recType = [Select id From RecordType Where Name = 'Project Time Read Write' LIMIT 1];
       // mTime.RecordTypeId = string.valueOf(recType[0].id).left(15);
        retURL =  ApexPages.currentPage().getParameters().get('retURL');
    }

    public SFL5_Time__c getTime() {
        return mTime;
    }
    
    public PageReference save(){
        if(mTime.Unspecified__c == true) {
            if(mTime.Unspecified_Time__c == null) mTime.Unspecified_Time__c.addError('If Unspecified is checked, then must specify a Time');
        }else{
            //ELSE Time start/end must be inserted:
            system.debug('###startTimeHrs:' +startTimeHrs);
            system.debug('###startTimeHrs is blank:' + String.isBlank(startTimeHrs));
            if(startTimeHrs == null) {
                ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Must enter Start time hour');
                ApexPages.addMessage(myMsg);
                return null;
            }else if(endTimeHrs == null) {
                ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Must enter End time hour');
                ApexPages.addMessage(myMsg);
                return null;
            }else if(startTimeMins == null){
                ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Must enter Start time minutes');
                ApexPages.addMessage(myMsg);
                return null;
            }else if(endTimeMins == null){
                ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Must enter End time minutes');
                ApexPages.addMessage(myMsg);
                return null;
            }           

            system.debug('###BEFORE Entered start time: ' + startTimeHrs +':'+ startTimeMins );
            system.debug('###BEFORE Entered end time: ' + endTimeHrs +':'+ endTimeMins );
            
            if(startTimeHrs.length() == 1) startTimeHrs = '0' + startTimeHrs;
            if(endTimeHrs.length() == 1) endTimeHrs = '0' + endTimeHrs;
            if(startTimeMins.length() == 1) startTimeMins = '0' + startTimeMins;
            if(endTimeMins.length() == 1) endTimeMins = '0' + endTimeMins;
            
            system.debug('###Entered start time: ' + startTimeHrs +':'+ startTimeMins );
            system.debug('###Entered end time: ' + endTimeHrs +':'+ endTimeMins );
            mTime.Time_start_txt__c = startTimeHrs +':'+ startTimeMins ;
            mTime.Time_end_txt__c =  endTimeHrs +':'+ endTimeMins;
           
            system.debug('###Start time: ' + mTime.Time_start_txt__c );
            system.debug('###End time: ' + mTime.Time_end_txt__c);
            system.debug('### Inserting new time: ' + mTime);
        }
            try{
                insert mTime;
                PageReference timeView = new PageReference('/'+mTime.id);
                timeView.setRedirect(true);
                return timeView;
            }catch(Exception e) {
                ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Error saving Time record: ' + e.getMessage());
                ApexPages.addMessage(myMsg);
                return null;
            }
    }

}

If I create a Time and assign a time to the spinner it gives NULL, see debug log:

23:16:54.091 (91199000)|USER_DEBUG|[30]|DEBUG|###startTimeHrs:null

23:16:54.091 (91295000)|USER_DEBUG|[31]|DEBUG|###startTimeHrs is blank:true

HOW CAN I GET THE CONTROLLER TO USE THE TIME I ENTER IN THE TIME SPINNER(S)?????

I tried changing the input tags to apex:inputText but this screws up the layout, but the value does get passed to the controller correctly and the time record is created successfully. The problem with this is that the two spinners are not one beside the other, but rather equally spaced causing it to look awkward.

PLEASE HELP!!!! THANK YOU