Unable to create time datatype field through visualforce page

Question

I tried to write a formula and extract time field through date time field. But user needs the time field because of specific requirement.

I tried to create a Visualforce Page with Static Resources based on Time field in sfdc, but, I am unable to display time field. I got an error like

My visual force page

    <apex:page standardController="Account">
<apex:form >
<apex:stylesheet value="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.js" />
<apex:includeScript value="https://code.jquery.com/ui/1.10.3/jquery-ui.js" />

<apex:includeScript value="{!$Resource.timeaddon}"/>
<script>
    j$ = jQuery.noConflict();

    j$(document).ready(function() {
    //laod everytime page loaded
    j$(‘#event_start_time’).timepicker({
    showAnim: "slide"
    })
    });
</script>

<style type="text/css">
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
</style>

<apex:inputText value="{!Account.Acc_Alternate_Contact_Fax__c}"  id="event_start_time" />
</apex:form>
</apex:page>

Answer 1

A few things jump out that will prevent your code from working:

• You're using curly quotes (‘) instead of single quotes (')
• You're selecting on a literal id, but Visualforce component ids get prefixed
  • Instead use an ends with selector: (e.g. $("[id$='event_start_time']"))

---

The specific problem you're seeing right now is that you've tried to include a script as literal text.

Correct

<script>
    j$ = jQuery.noConflict();//Initialize your jquery

    j$(document).ready(function() {
    //laod everytime page loaded
    j$("[id$='event_start_time']").timepicker({
    showAnim: "slide"
    })
    });
<script>

Incorrect

j$ = jQuery.noConflict();//Initialize your jquery

j$(document).ready(function() {
//laod everytime page loaded
j$(‘#event_start_time’).timepicker({
showAnim: "slide"
})
});