4

I am trying to use a timepiker on an apex:inputField just like this figure

enter image description here

and here is my code Visualforce

<apex:includeScript value="{!$Resource.timepicker_js}"/> 
<apex:stylesheet value="{!$Resource.timepicker_css}"/> 

<apex:inputField value="{!object.Name}" styleClass="form-control input-md field_class"/>

JScript

$j(function () {
  $j('.field_class').datetimepicker({
    pickDate: false
  });
});

The problem is that I keep getting an error that datetimepicker is not defined.

Improve this question
9
  • Are you sure your Resource is loading correctly? Check your javascript console to see if you are getting an error. Could the timepicker_js be in a folder in your resource?
    – JimRae
    Commented May 28, 2014 at 17:14
  • is your $j defined in the ready function?
    – greenstork
    Commented May 28, 2014 at 17:17
  • @JimRae yes I'm sure, and I added an alert command to these files to be 100% sure that is loaded, and it's displayed.
    – hasan.alkhatib
    Commented May 28, 2014 at 17:18
  • @greenstork It's outside the ready function, but I tried to put inside it, the same result.
    – hasan.alkhatib
    Commented May 28, 2014 at 17:21
  • is your timepicker js loaded after jquery on the page and also with an includeScript tag?
    – greenstork
    Commented May 28, 2014 at 17:23

3 Answers 3

Reset to default
1

Sounds crazy, but try including the source directly instead of using <apex:includeScript>. I've had similar issues with jQuery Mobile before now.

<!-- Change -->
<apex:includeScript value="{!$Resource.timepicker_js}"/> 

<!-- To -->
<script type="text/javascript" src="{!$Resource.timepicker_Js}"/>
Improve this answer
0

I have used in below order with all component in a static resource. Please try that 

<script type="text/javascript" src="/bower_components/jquery/jquery.min.js"></script>
      <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
      <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
      <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />
      <link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.m

in.css" />

also, check https://eonasdan.github.io/bootstrap-datetimepicker/Installing/

Improve this answer
-1

I faced similar kind of error in bootstrap date-time picker for adding a time picker. It seems you would also like to add a time-picker in the visualforce page. I also added a timpicker in my visualforce page and no doubt it will work for sure.

You can take reference from my blog Timepicker

Hope it would help you!!!

Improve this answer
1
  • It can be better if you include relevant parts from your blog. From help page; "Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline."
    – tugce
    Commented Jan 22, 2017 at 14:26

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .