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.

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
    May 28, 2014 at 17:14
  • is your $j defined in the ready function?
    – greenstork
    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. May 28, 2014 at 17:18
  • @greenstork It's outside the ready function, but I tried to put inside it, the same result. May 28, 2014 at 17:21
  • is your timepicker js loaded after jquery on the page and also with an includeScript tag?
    – greenstork
    May 28, 2014 at 17:23

3 Answers 3

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}"/>
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/

-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!!!

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
    Jan 22, 2017 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.